I am making a fake website for a class at school. For some reason it won't let me scroll. Any ideas? I am a total beginner so you will have to excuse my cluelessness.
Live Site:
http://ec2-54-187-248-132.us-west-2.compute.amazonaws.com/pizzaplace/
Source:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>The Pizza Place</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{text-align: center;}
table{margin-left:auto; margin-right:auto;}
h1{font-style: italic;
font-size: 450%;}
div.title{
position: fixed;
top:10px;
left:10px;
}
div.contents{
background-color: red;
position: fixed;
top:200px;
left:420px;
padding:20px;
-webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
-moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
}
</style>
</head>
<body>
<h1>The Pizza Place</h1>
<div class="title"><img src="pizza.gif"></div>
<div class="contents"><br><br>
<form name="orderdetail" action="MAILTO:ndespai7#bruinmail.slcc.edu"
method="post" enctype="text/plain">
<b>Name:</b><input type="text" name="Name" value="Enter Your Name" size="30" max length="30">
<b>Phone:</b><input type="text" name="Phone" value="Enter Your Phone Number" size="30" max length="30"><br><br><br>
<b>Size:</b> <input type="radio" name="size" value="S"/> Small
<input type="radio" name="size" value="S"/> Medium
<input type="radio" name="size" value="S"/> Large
<input type="radio" name="size" value="S"/> Family Size
<br><br><br>
<b>Crust:</b> <select name="crust"><option value='Thin'>Thin Crust</option>
<option value="Original">Original Crust</option>
<option value="Stuffed Crust">Cheese Stuffed Crust</select><br><br>
<div><b>Toppings:</b></div>
<table>
<tr><td><input type="checkbox" name="toppings" value="P" checked/></td><td>Pepporoni</td></tr>
<tr><td><input type="checkbox" name="toppings" value="S" checked/></td><td>Sausage</td></tr>
<tr><td><input type="checkbox" name="toppings" value="GP" checked/></td><td>Green Peppers</td></tr>
<tr><td><input type="checkbox" name="toppings" value="C" checked/></td><td>Chicken</td></tr>
<tr><td><input type="checkbox" name="toppings" value="J" checked/></td><td>Jalapenos</td></tr>
</table>
<br><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Send"><br><br>
</form>
<br><br>
</div>
<br><br><br>
</body>
</html>
That's because you have all the contents fixed into place. Remove position: fixed; from div.contents in your styles.
I'm Not sure what are the things you don't want to move but you can scroll down by replacing position: fixed; with position: relative; in the style
div.contents{
background-color: red;
position: fixed; /*replace This*/
top:200px;
left:420px;
padding:20px;
-webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
-moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
}
The fixed position is holding the div content down without letting them to appear. Hope This helped.
Edited code
div.contents{
background-color: red;
position: relative;
top:200px;
left:420px;
padding:20px;
-webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
-moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
}
Related
I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1.
The question if I increment the value of input type number how the price double if i increase the value of number?
blade
#foreach($service->invoices as $invoice)
<tr>
<td class="text-right">{{ $invoice->description }}</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">{{ $invoice->price }}
<td class="total"></td>
</tr>
#endforeach
script.js
<script>
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
</script>
css
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
My input number is like this.
You can use click and input event to achieve above . I have removed updateTotal function and have merge all code in one . In below code i have use $(this).closest('tr') to get closest tr where the buttons or the input-box is located and then i have use .find to get require values from input and finally added total to .total td .
Demo Code :
//when - or + click or qty input
$(".minus , .plus , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quan = selectors.find('.quantity').val(); //get qty
if (!quan || quan < 0)
return;
var cost = parseFloat(selectors.find('.cost').text());
var total = (cost * quan).toFixed(2);
selectors.find('.total').text(total); //add total
})
nput[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="text-right">A</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add minus class-->
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">13
<td class="total"></td>
</tr>
<tr>
<td class="text-right">B</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">135
<td class="total"></td>
</tr>
</table>
Below is the code :
I want to select the radio button which is present within the span class. Could you please help in identifying a successful xpath ?
<div id="quicklinkbox" class="col-md-2" data-position="left" data-intro="You can directly download payslip PDFs for the last 3 or 6 months. (India payslip only)" data-step="4">
<div style="background-color: transparent; margin-top: 28px;">
<div id="panel-title" ng-click="changeExpand(expand);" style="position: relative; left: 24px; cursor: pointer; font-weight: 500;">Quick Download</div>
<div id="panel-title" class="panel-body" style="text-align: left; font-weight: lighter; padding: 5px 0px 0px 50px; font-weight: 400">
<span style="margin-left: -16px;">Payslips for</span>
<form class="ng-pristine ng-valid">
<div class="form-group">
<div class="radio">
<span same-heightcol="" style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" style="cursor: pointer;" value="3" name="payslipradio"/>
<span style="font-size: 16px; position: relative; top: -5px;">Last 3 months</span>
</span>
</div>
<div class="radio">
<span style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" value="6" name="payslipradio" style="cursor: pointer;"/>
<span style="font-size: 16px; position: relative; top: -5px;"> Last 6 months</span>
</span>
</div>
<img style="margin-bottom: -12px; margin-left: -16px; cursor: pointer;" ng-click="downloadbulkpayslip()" src="appResources/images/Download-button.png"/>
</div>
</form>
</div>
</div>
</div>
</div>
You can use:
//span/input[#name='payslipradio' and #value='6']
Explanation:
//span -> Will search in all HTML al span tag
/input -> Will searth inside the span tag previous selected a input tag
[#name='payslipradio' and #value='6'] -> Will search in the previous selected tags one that the name attr is equals to 'pslpradio' and value attr equals to '6'
//*span[input#class='ng-pristine ng-valid' and #type='radio']))
I'm using Foundation4 as my framework and I want fadein animations to trigger when scrolling down. More like this website: www.isaacpvl.com . I have four divs and they're responsive if these information matters. Thanks to whoever answers! I already tried using firebug and I still can't find how. I'm a newbie when it comes to javascript.
Here are the codes I've done so far. It's just a mock-up to see how things would look like, not too much on the design yet.
<div class="row">
<div style="background-color: black;" id="head" class="large-12 columns">
</div>
</div>
<div class="row">
<div style="background-color: red;" id="section1" class="large-6 columns">
</div>
<div style="background-color: red;" id="section1" class="large-6 columns">
<img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" />
</div>
</div>
<div class="row">
<div style="background-color: blue;" id="section2" class="large-12 columns">
</div>
</div>
that's the body so far and the css of the divs
.row.full-width { width: 100%; max-width: 100%; }
.row {min-width:100% !important; background-color: black;}
.section1{
/*background-image: url("../img/hongkong/background.png");*/
background-color:red;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.section2{
/*background-image: url("../img/hongkong/background.png");*/
background-color: black;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
As you can see there is an image source with the animated class, that's the image that I want to animate. It's a full-screen kind of website.
I'm using animate.css from http://daneden.me/animate/ btw
I think i found a strange bug in firefox.
When i have an hover class on a div with a background-size property (with a change in the opacity) the size of some of the image a use in the background, changes by one pixel in horizontal, or in vertical.
I made an example of the probleme here:
http://jsfiddle.net/xz4F8/
the html:
<div class="group cont_tutto">
<div class="conteiner_articoli_cinema">
<div class="back_navigazione_articoli-mag">
<div class="articolo_mag">
<div class="tipo-articoli-mag">speciale cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Now-You-See-Me--I-maghi-del-crimine_articolo.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">speciale cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/theloneranger384470.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">rcensione fumetti</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Nodo-alla-gola_articolo.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div></div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/15072013/Distribuzione-cinema-e-dvd_articolo.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione serie tv</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/08072013/trueblood-stagione6309717.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione blu-ray</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/13072013/ax967523.jpeg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/12072013/lareligiosa825433.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
</div>
</div>
</div>
The css:
#charset "utf-8";
/* CSS Document */
.articolo_mag {
background-color: #EFEFEF;
float: left;
width: 129px;
margin-right: 6px;
}
.articolo_mag_cover {
width: 129px;
height: 177px;
background-size:129px 177px;
background-color: #333;
}
.articolo_mag_cover:hover {
background-size:129px 177px;
opacity: 0.9;}
.mag_titolo {}
.mag_titolo h2 {display: table-cell;
vertical-align: middle;
background-color: #FFF;
font-size: 10px;
font-family: Lato, Arial;
font-weight: bold;
border: 1px solid #D9D9D9;
text-align: center;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
height: 30px;}
.mag_titolo h2:hover { color: #09F;
background-color: #E4E4E4;}
.mag_titolo h2 a {
display: block;
color: #000000;
text-decoration: none;
text-transform: uppercase;
width: 119px;
line-height: normal;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 0px;
}
.tipo-articoli-mag {
background-color: rgba(0,0,0,0.75);
height: 17px;
width: 115px;
color: #FFF;
font-family: Lato, Arial;
font-size: 10px;
font-weight: bold;
padding-top: 3px;
padding-left: 5px;
text-transform: uppercase;
left: 5px;
z-index: 25;
position: relative;
float: left;
margin-top: 150px;
}
If i use the cover option for the background-size,the size problems seems attenuated, but, some of the images start to flicker during the update of the page, or the hover state (seems to me, firefox can't decide witch is the right size of the image )
It seems that the problem is triggered by the div container that i use to center all the content in my page (cont_tutto) witch has a 951px in width..
No problem at all on all the other browsers!
You had to add "-moz-backface-visibility: hidden" to solve the problem. Here is the solution: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/
Try to add
transform: rotate(360deg);
somewhere as i did to the following image that was moving 1px when hover
.btnRoll:hover img {
filter: alpha(opacity=80);
opacity: 0.8;
transform: rotate(360deg);
}
I have recently experienced the same problem, which is the exact reason I have chosen to stick to the built in "Inspect Element" function in Firefox
Tanner
Im using Fancybox to edit entities without reloading the whole page. But after loading the form content via ajax I can't edit the input fields. If I click in one of the input I lose the focus instantly.
The code for showing fancybox is very simple:
<a class="lightbox fancybox.ajax" href="/app_dev.php/devices/517781e3e707a00217000033/edit">Bearbeiten</a>
and the javascript (submitting the form not implemented yet)
$(document).ready(function() {
$(".lightbox").fancybox({
minWidth : 300,
minHeight : 150,
openEffect : 'none',
closeEffect : 'none'
});
});
The content returned over ajax:
<form class="lightbox" action="/app_dev.php/devices/517781e3e707a00217000033/edit" method="POST">
<fieldset id="device">
<p>
<label for="device_name" class="required"> device.name </label>
<input type="text" id="device_name" name="device[name]" required="required" value="VW BUS">
</p>
<p>
<label for="device_type" class="required"> device.type </label>
<select id="device_type" name="device[type]" required="required">
<option value="0">FME 2100</option>
<option value="1">FME 2200</option>
<option value="2">FME 3200</option>
</select>
</p>
<p>
<label for="device_number" class="required"> device.number </label>
<input type="text" id="device_number" name="device[number]" required="required" value="+43xxxxxxxxx">
</p>
<p>
<label for="device_imei" class="required"> device.imei </label>
<input type="text" id="device_imei" name="device[imei]" required="required" value="xxxxxxxxxxxx">
</p>
<input type="hidden" id="device__token" name="device[_token]" value="xxxxxxxxxxxxxxx">
</fieldset>
<input type="submit" value="form.save">
</form>
As said, I'm losing instantly the focus on the input fields. The select is working...
I'm using fancybox 2.1.4 with jquery 1.9.1
You can go with this fiddle and change as per syntax : http://jsfiddle.net/UYHxc/2/
$.fancybox.open('#divFancyBoxTest',{
// prevents closing when clicking INSIDE fancybox
openEffect : 'none',
closeEffect : 'none',
closeBtn : false,
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
$('#addbtn').click(function(){
$(".input_add").toggle(); //add input box
});
<div id="divFancyBoxTest">
<div style=" font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 17px;">Click the link in the email we have sent to</div>
<div style="text-align:center; margin-bottom: 17px;">logout</div>
<div style=" font-size: 14px; font-weight: bold; text-align: center;margin-bottom: 17px;">to complete your registration.</div>
<div style=" font-size: 14px; text-align: center;margin-bottom: 17px;"><span style="color: #00A8EC; font-weight: bold;padding-left: 5px;padding-right: 5px;">
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="resendemail">Resend confirmation email </a>
<span style="color:#000;">|</span>
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="addbtn">Change email address</a>
<div class="input_add" style="margin-top: 30px;display: none;">
<input type="text" name="email" style="padding-top: 4px !important;" >
<button style="background-color: #00A8EC;height: 30px;box-shadow: none;border: 1px solid #00A8EC;color: #fff;">Submit</button>
</div>
</span>
</div>
</div>
<input type="text" id="something" value="test" />
</div>