We Keep Coding

javascript not working on my webpage

I doing a tshirt designing website for my college project.I have added preview option where when the user types it get displayed on the tshirt present in the iframe..I have also added a proceed button, when the user clicks on it,I want the text to get stored in database but for some reason I cant get it to work.I am using ajax and php for the database part.But the javascript part with ajax is not working.Even alert function is not working for onclick funtction..
Any help is appreciated..
$(document).ready(function)() {
$("#btn").click( function() {
var tshirt-text =$('#tshirt-text').val();
var size =$('#size').val();
alert("tshirt-text");
$.ajax ({
type :'POST',
data :{tshirt-text:tshirt-text,size:size},
url :"storeinfo.inc.php",
success :function(result)
})
});
});
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );
$text.on( 'keyup', function ( e ) {
$demoText.text( $text.val() );
} );
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif;
}
header{
padding: 8px;
height:155px;
color: white;
background-color:#6495ED;
clear: left;
width:100%;
}
footer
{ padding: 4px;
color: white;
background-color:#6495ED;
width:100%;
text-align:center;
font-size:20px;
font-family:Arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
}
li {
float: left;
}
li a,.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li a.active {
background-color: royalblue;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: royalblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}
iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}
.designcontainer {
display: inline-block;
margin:0 0 0 10px;
}
.colorbutton {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.colorbutton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */
.buttony {background-color: yellow; } /* Yellow */
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5.33333px;
right: 0;
bottom:0;
left: 0;
height: 25px;
width: 25px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
line-height: 50px;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: royalblue;
}
.option-input:checked::before {
height: 15px;
width: 15px;
position: absolute;
content: '\2714';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 28px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: royalblue;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.labelname
{
font-size: 20px;
}
span {
position: relative;
display: inline-block;
margin: 30px 10px;
}
.gate {
display: inline-block;
width: 500px;
height: 100px;
padding: 10px 0 10px 15px;
font-family: "Open Sans", sans;
font-weight: 400;
color: royalblue;
background: #c6c6c6;
border: 0;
border-radius: 10px;
outline: 0;
text-indent: 65px;
transition: all .3s ease-in-out;
}
.gate::-webkit-input-placeholder {
color: #c6c6c6;
text-indent: 0;
font-weight: 300;
font-size:18px;
}
.gate + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: royalblue;
transition: all .4s ease-in-out;
border-radius:5px;
transform-origin: left bottom;
z-index: 99;
color:white;
size:18px;
}
.gate + label:before, .gate + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: royalblue;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
font-size:18px;
}
.gate + label:before {
background: rgba(3, 36, 41, 0.2);
z-index: -2;
right: 20%;
font-size:18px;
}
span:nth-child(2) .gate {
text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
text-indent: 0;
}
.gate:focus,
.gate:active {
color: ;
text-indent: 0;
background:#c6c6c6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
transform: rotate(-66deg);
border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
transform: rotate(10deg);
}
.demo-tshirt {
position: relative;
width: 200px;
height: 100px;
margin: 0 0 0 890px;
z-index:999;
}
.demo-tshirt-text {
position: absolute;
top: 30%;
left: 45%;
width: 60%;
transform: translateX( -45%);
font-size:25px;
color: black;
font-family: Arial, sans-serif;
}
.spacereducer101{
margin-top:-80px;
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-1.5.min.js"></script>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
at your doorstep"</h2>
</header>
<ul>
<li>Home</li>
<li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
<li class="dropdown">
Buy From Us
<div class="dropdown-content">
Quotes printed T-shirts
Graphic printed T-shirts
Memes printed T-shirts
</div>
</li>
<li>Help</li>
<li>Contact Us</li>
<li onclick="document.getElementById('id02').style.display='block'"style="float:right">Sign Up</li>
<li onclick="document.getElementById('id01').style.display='block'" style="float:right">Login</li>
</ul>
<div class="designcontainer">
<h1>Select Colour</h1>
<button class="colorbutton buttonw">White</button>
<button class="colorbutton buttonr">Red</button>
<button class="colorbutton buttonb">Blue</button>
<button class="colorbutton buttony">Yellow</button>
<h1>Select Size</h1>
<div>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="small" checked />
Small(S)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="medium" />
Medium(M)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="large"/>
Large(L)
</label>
</div>
<div class=spacereducer101> </div>
<div class="demo-tshirt">
<div class="demo-tshirt-text"></div>
</div>
<h1>Enter the Text you want on your T-shirt</h1>
<span>
<input type="text" name="tshirt-text" class="tshirt-text gate" id="tshirt-text" placeholder="Max 10 letters.." />
<label for="tshirt-text">Enter</label>
</span>
<br>
<input type="button" id="btn" name="Proceed" value="Proceed" class="colorbutton" style="margin-top:20px; margin-left:200px;">
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
<footer >
Copyright © 2017 www.DAJ.com
</footer>
</body>
</html>
PHP code:
<?php
$connection =mysqli_connect('localhost','root','','textstorage');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if($_POST['tshirt-text']){
$tshirt-text =$_POST['tshirt-text'];
$size =$_POST['size'];
$q = "insert into information values('','tshirt-text','size')";
$query = mysqli_query($connection,$q);
if ($query) {
echo"data inserted";
}
}
?>

If you check the console, you'll see that the problem is the first line inside of the javascript click function...
var tshirt-text = $('#tshirt-text').val();
... because '-' is not a valid character for javascript variable names. Just change it by tshirttext (in all your code), and you will see the alert and should be able to go on.
I hope it helps

You've got some errors with you JavaScript. Try running your JavaScript through a validator (for example, http://beautifytools.com/javascript-validator.php) to see where your errors are. In addition to the one A. Iglesias found, you've got an extra clothes parenthesis on line 1, the same tshirt-text error from line 3 is repeated on line 9, and your syntax for an event handler for success on line 13 isn't right, but I can't tell what you're trying to do.
You've also got a conceptual problem. Lines 17 through 22 should be inside your $(document).ready handler. The ready event runs after the initial HTML is loaded into the browser and ready to go, so any reference to HTML elements outside of that event handler may be referring to them before they're ready.
I wanted to make this a comment to your question, but it's too long, so hopefully it's okay an answer. Perhaps once you've fixed some of these JavaScript issues, post an update to your question in the form of an edit and we can then see what else is going on if it's not working.
edit: I reformatted your JavaScript and tried to resolve any syntax errors. If you open up your browser developer tools and run this JS Fiddle (with comments and without comments), you'll see there are no syntax errors in the console. That doesn't mean it works, just that it's syntactically valid. In fact, this shouldn't work, because the AJAX success handler I wrote simply logs the response.
$(document).ready ( // When function parameters and code blocks are big, I like to
// put the opening ( or { at the end of line and put the the
// closing } or ) in the same column way at the end. I find it
// is easier to keep track of openings and closings.
function() { // no extra close parenthesis right after "function"
$("#btn").click(
function()
{
var tshirtText = $('#tshirt-text').val(); // Variable names can only be
// letters, numbers, dollar symbols,
// and underscores. They cannot start
// with numbers.
var size = $('#size').val();
alert("tshirt-text");
$.ajax(
{ // For clarity, I'll separate out the opening ( and opening {
// and the closing } and closing ) when they are one after the other.
type: 'POST'
// I like to put my commas on the next line rather than the previous line.
// I think it makes it more clear that you're moving on to the next thing.
, data: { "tshirt-text": tshirtText, size: size } // You can specify names in
// this JSON-style syntax that
// aren't valid JavaScript
// identifiers, but you have
// to put them in quotes.
, url: "storeinfo.inc.php"
, success: function(data, textStatus, jqXhr)
{
console.log(data);
}
}
);
}
);
var $text = $('.tshirt-text');
var $demoText = $('.demo-tshirt-text');
$text.on(
'keyup'
, function (e) {
$demoText.text($text.val());
}
);
}
);

my footer doesn't stay at the bottom of the site when I zoom out the site

Pls help me, I am making a site and my footer isn't staying at the bottom, when I zoom out the site. I'm a beginner so the code can be a little messy.
as you can see, the footer doesn't stay at the bottom, I have searched here for people with a similar problem with the code and I found some. And I tried some of the solutions, but none of them worked for me.
I think it doesn't work because there's something else wrong with my css, but I just cant figure it out.
html{
box-sizing:border-box;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
*,*:before,*:after{
box-sizing:inherit
}
body{
margin: 0;
overflow-x: hidden;
background-color: #f6f6f6;
}
ul {
padding: 4px 8px;
float: right;
}
a.nav-button {
padding: 8px 16px;
text-decoration: none;
color: black;
letter-spacing: 4px;
border: none;
outline: none;
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
}
a.nav-button:hover {
background-color: #cccccc;
}
img.logo{
padding-top: 14px;
height: 50px;
float:left;
}
div.menu{
position:fixed;
width:100%;
z-index:1;
background-color: #ffffff;
}
div.front_img{
padding-top:500;
vertical-align: middle;
display:inline-block;
max-width:100%;
width: 100%;
max-height: 60%;
position: relative;
background-image: url(../images/front_image.jpg);
background-size: cover;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
}
div.webpage {
max-width:980px;
margin:auto;
}
div.container {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.article {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.h3-container {
border-bottom:1px solid #ccc;
width:100%;
}
h3 {
font-size: 24px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
p {
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
div.footer {
position: relative;
padding-top: 6;
padding-bottom: 6;
padding-right: 8;
width: 100%;
text-align: right;
background-color: black;
color: goldenrod;
}
div.footer, a{
color: goldenrod;
}
div.footer-container {
position: relative;
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
width: 100%;
background-color: black;
color:goldenrod;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
border-bottom:1px solid goldenrod;
}
div.footer-background{
background-color: black;
overflow: hidden;
}
div.leverancier-wrap {
padding-left: 22;
background-color: white;
}
div.footer-content {
// tried position:fixed; here but didnt work :c
}
HTML
<div class="footer-content">
<div class="container" style="max-width:1564px">
<div class="h3-container" id="intoduction">
<h3 class="Welcome-title"><img src="images/location_icon.png" height="30" length="20" hspace="20"/>Installatietechniek Haaglanden bevindt zich hier.</h3>
</div>
</div>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
border-bottom: 5pt solid black;
}
</style>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.0442081, lng: 4.3370828};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[aint getting mah map]&callback=initMap">
</script>
<div class="leverancier-wrap">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide1.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide2.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide3.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide4.jpg" height="30" width="300">
</div>
<div class="footer-background">
<div class="footer-container" style="max-width:1564px">
<div class="footer-text">
<h3>Contactgegevens</h3>
<p>Installatietechniek Haaglanden<span style="display:inline-block; width: 280px;"><img src="images/telphone-icon.png" height="16" length="8" hspace="259"/></span>070 7620180</p>
<p>Burgemeester Elsenlaan 321<span style="display:inline-block; width: 297px;"><img src="images/mail-icon.png" height="16" length="8" hspace="276"/></span>info#installatietechniekhaaglanden.nl</p>
<p>2282 MZ Rijswijk<img src="images/facebook-icon.png" height="16" length="8" hspace="362"/></p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © installatietechniekhaaglanden.nl. Designed by ajeeth</p>
</div>
</div>

Negative margin method
Use a negative bottom margin like this. Keep the .push div empty.
HTML
<body>
<div class="wrapper">
...content...
<div class="push"></div>
</div>
<footer class="footer">All rights reserved</footer>
</body>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
Full demo: codepen.io
Other methods
You can also use negative top margins, calc(), flexbox, and grid to achieve the same effect in a better way.
Original source: This and 4 other ways originates from css-tricks.com

Give position: fixed; and to fix it at the bottom even if the content is little like the below demo
body {
margin: 0;
}
div.footer-content {
background: red;
position: fixed;
bottom: 0;
width: 100%;
}
HTML
<div class="footer-content">
this is the footer
</div>

You mean a Sticky Footer?
Change the CSS in
.footer-content { position: absolute; bottom: 0; width: 100%; }

Why are there different results for the following code?

I have a project where I create a virtual workstation using HTML CSS and JavaScript.
The code works smoothly and perfectly, as shown below (minus the images)
<!DOCTYPE html>
<html>
<head>
<title>Malfunction Compueter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<style>
html{
font-family: courier
}
.inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
font-size: 20px;
opacity: 1.0;
}
.loadScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999999999999999999999999999999999999;
background: white;
font-size: 80px;
text-align: center;
padding-top: 150px
}
#cover{
position: relative
}
#content{
padding-top: 50px
}
td{
width: 33.3%
}
table{
width: 100%;
text-align: center
}
.titleSelection{
font-size: 60px;
transition-duration: 0.5s;
line-height: 10px
}
.titleSelection:hover{
box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.title{
text-align: center;
padding-top: 40px;
}
#titleImage{
height: 200px
}
.selectionIcon{
height: 120px
}
#backgroundImage{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index: -9999;
text-align: center
}
#background{
width: 100%;
bottom: 0px
}
#title{
font-size: 60px;
font-family: "kaiTi";
text-align: center;
line-height: 5px
}
#exit{
position: fixed;
bottom: 10px;
right: 40px;
z-index: 99999
}
#exit:hover + #exitText{
font-size: 30px
}
#exitText{
transition-duration: 0.5s;
font-family: "kaiTi";
position: fixed;
bottom: 45px;
right: 45px;
z-index: 99999;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: white;
}
#fangNiu{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 74px;
z-index: 999999;
}
.innerTitle{
font-size: 80px;
text-align: center
}
.goodQuotesTable{
width: 20%;
font-size: 25px;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
#quotesTable{
border-collapse: collapse;
vertical-align: bottom;
}
b{
font-size: 45px;
text-align: center
}
.quoteImage{
height: 50px;
width: 50px;
}
#summary{
border: 10px;
}
.quote{
color: black;
}
/* tell the container's children to float left: */
.floatLeft > * {
float:left;
margin-right:5px;
}
.floatRight > * {
float:right;
margin-left:5px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* end clearfix*/
/* below is just to make things easier to see, not required */
body > div {
margin-bottom:10px;
}
.characterPicture{
height: 140px;
width: auto
}
#summaryText{
text-align: center;
font-size: 80px
}
.characterText{
font-size: 25px;
}
.tab{
position: relative;
margin-left: 120px;
margin-right: 10px;
}
#summaryItself{
padding: 10px
}
#schoolImage{
height: 290px;
width: auto
}
button{
border-radius: 50%;
background-color: #00FF04;
border-color: #00FF04;
color: white;
font-size: 40px;
transition-duration: 0.4s;
width: 25%;
height: 80px;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: red;
border-color: red;
}
#options{
text-align: center
}
#apps{
text-align: center
}
#languageMenu{
opacity: 0.9;
height: 100%;
width: 100%;
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
}
</style>
<body>
<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>
<div id="content">
<table id="titleSelections">
<tr>
<td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
<td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
<td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
</tr>
</table>
<script>
$(document).ready(function(){
$(".loadScreen").fadeOut("slow")
})
$(document).ready(function(){
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
})
$("#about").on("click",function(){
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click",function(){
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click",function(){
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click","#exit",function(){
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
</script>
</body>
<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>
<img src="images/logout.png" id="exit">
<p id="exitText">Exit</p>
<div id="options" class="inner" style="display: none">
<b>OPTIONS</b>
<br>
<br>
<br>
<button id="language">Languages</button>
<br>
<br>
<br>
<button id="wifi">Wifi connection</button>
</div>
<div id="applications" class="inner" style="display: none">
<b>APPS</b>
</div>
<div id="info" class="inner" style="display: none">
<b>ABOUT MALFUNCTION COMPUETER</b>
<p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
<p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸，然后, and then one must also 死掉。这样.</p>
</div>
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
</html>
However, there is one set of lines that is not running properly:
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
^This is the DIV "#languageMenu", where the user selects his language.
Here, I have a button "#language" which on click, is supposed to make "#languageMenu" appear.
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
Strangely, this does not work when I run it on Google Chrome, but when I put it in a JSFiddle it gives strange results.
http://jsfiddle.net/b58Lvtfy/1
From Chrome, what happens is that the language menu only appears upon pressing the exit button, and then fades immediately.
Why might this be so and what amendments might make the code work better?
Online demo: http://garridpunching.neocities.org/malfunction.html

Put every event binding inside doc ready block:
$(document).ready(function() {
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
$("#about").on("click", function() {
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click", function() {
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click", function() {
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click", "#exit", function() {
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click", function() {
$("#languageMenu").fadeIn(500)
})
})
Because your button appears after event binding so no events bound on this element and cause as error. That is why it is always safe to put event bindings inside doc ready block.
Or you can shift your script to the closing of </body>.

Your inproper indentation obscures the errror, but you are closing the DOMReady listener, before you are binding the #language click listener. Therefore, #language does not exist in the DOM when the click listener is added.

Push other divs to the right

Im trying to slide in a div then move 3 other divs.
I have fiddle showing how I want to do it. But its not 100% correct.
If you check the fiddle you will see it slides in when you press "Press me". But instead of going over the 3 red divs I want it to push them to the side.
Fiddle with code
HTML
<div class="wrapper wrapper-content">
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div id="red">Press Me</div>
<div id="red"></div>
<div id="red"></div>
</div>
</div>
CSS
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:absolute;
height:100%;
z-index:1;
}
.container {
border: 2px solid #73AD21;
width:100px;
}
Script
$(function()
{
$("a#toggle-menu").click(function()
{
$("#effectMenu").animate({width:'toggle'},350);
return false;
});
});

Change the id to a class,toggle a class to the items called left,in the css animate the transition of adding the class using css transitions
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div class="red">Press Me</div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
$(function() {
$("a#toggle-menu").click(function() {
$("#effectMenu").animate({
width: 'toggle'
}, 350);
$(".red").toggleClass('left');
return false;
});
});
.red {
background-color: red;
height: 50px;
margin-top: 2px;
width: 100px;
position: relative;
transition: all 350ms ease-in-out;
}
#effectMenu {
display: none;
background: grey;
color: #FFF;
width: 30px;
position: absolute;
height: 100%;
z-index: 1;
}
.container {
border: 2px solid #73AD21;
width: 100px;
}
.left {
margin-left:30px;
transition: all 350ms ease-in-out;
}
https://jsfiddle.net/ygmbnwgL/

Using float and relative position instead of absolute one, you can do it :
CSS code :
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
float: left;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:relative;
height:150px;
z-index:1;
float: left;
}
.container {
border: 2px solid #73AD21;
width:150px;
}
See this fiddle

Jquery click event work only when page to top position

I have CSS tabs:
.tabs {
width: 100%;
height: 100%;
margin: 0 0 30px;
}
.tabs label {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 1px;
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
line-height: 25px;
z-index: 1;
}
.tabs label:hover {
color: #F70;
padding: 0 13px;
background: #FFFFDF;
border: 1px solid #FFCA95;
}
.tabs input {
position: absolute;
left: -9999px;
}
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2 {
color: #444;
background: #EFEFEF;
padding: 0 13px 2px;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #EFEFEF;
z-index: 3
}
.tabs_cont {
position: relative;
height: 552px;
border: 1px solid #DDD;
border-width: 1px;
background: #EFEFEF;
padding: 0 12px;
z-index: 2;
}
.tabs_cont > div {
position: absolute;
left: -9999px;
top: 0;
opacity: 0;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2 {
position: static;
left: 0;
opacity: 1;
}
and html:
<section class="tabs">
<input id="tab_1" type="radio" name="tab" checked="checked" />
<input id="tab_2" type="radio" name="tab" />
<label for="tab_1" id="tab_l1">Изображения</label>
<label for="tab_2" id="tab_l2">Текст</label>
<div style="clear:both"></div>
<div class="tabs_cont">
<div id="tab_c1"> </div>
<div id="tab_c2">
<div class="add_element" id="add_text">добавить текст </div>
<div id="text_inputs_wrapper"> </div>
</div>
</div>
</section>
And JS:
$("div#add_text").click(function () //on add input button click
{
alert( "Handler for .click() called." );
});
When the page is in the upper position, the event is running. If I`m use scroll and page move - event is not running.
The problem occurs in all browsers.
Has anyone encountered this problem? Help please.
UPDATE.
Please see picture
in this case the event is running
http://1drv.ms/1wg73ak
in this case the event is not running
http://1drv.ms/1mt24JS

As Vector said, you can only click on the #add_text div to trigger the event. The #add_text div is only has a height of one line so you have to click right on the text.
Add a height: 100% to your tab_c2 and to the #add_text then you can click anywhere on the 2nd tab page to trigger the event.

Append this code to your css, your div#add_text will fill the entire container area and the click is works in all position
#add_text {
background-color: red; //remove this later
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}