It’s weird! I was working on my CSS and jquery just stopped working! checked in firefox/chrome and the jquery just stopped working! I have no idea what happen.
I have 2 functions going on. First part animates the header image and the second part generates random numbers when it is click. I pasted my whole code at pastebin.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Hello </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/default.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery.js"></script>
</head>
<body>
<!-- #header Image -->
<img id="header" src="images/header.png" width="424" height="63" alt="Header">
<!-- /#header Image -->
<div id="main-wrapper">
<h1> Your points will be genarated below </h1>
<form>
<input id="points" type="text"/>
<input type="button" id="generate" value="Generate Points!" />
</form>
</div><!-- /#main-wrapper -->
<!-- Generate -->
<script src="js/gen.js" type="text/javascript" charset="utf-8"></script>
</body>
$(document).ready(function(){
// Makes the image go under the div wrapper.
$('img#header').css({'position' : 'relative', 'top' : '17px', 'z-index' : '50' })
//create the animation
$('img#header').hover(function()
{
$(this).filter(':not(:animated)').animate({"top": "-3px" }, "slow");
}, function() {
$(this).stop().animate({"top": "17px"}, "slow");
});
// Generate Numbers
$("#generate").click(function(){
var code = "";
var alphabet = new Array('A', 'B', 'C',
'D', 'E', 'F',
'G', 'H', 'I',
'J', 'K', 'L',
'M', 'N', 'O',
'P', 'Q', 'R',
'S', 'T', 'U',
'U', 'V', 'W',
'X', 'Y', 'Z');
var count = 5 * 4;
for (var i=0; i<count; i++){
var number = false;
var type = Math.round(Math.random() * 2);
if (type == 0) number = true; else number = false;
var output;
if (number){
code += String(Math.floor(Math.random() * 10));
}
else
{
var ranChar = Math.floor(Math.random() * alphabet.length)
code += alphabet[ranChar];
}
if (((i+1) % 5 == 0) && i != count-1) code += "-";
}
$("#points").val(code);
});
});
body { background: #0d0d0d url(../images/body-bg.jpg) repeat; width: 500px; margin: 154px auto; }
img#header { padding: 0 41px; }
div#main-wrapper { background: #dfdfdf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; position: relative; z-index: 1000; padding: 44px 64px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; }
div#main-wrapper h1 { color: #0d0d0d; font: italic bold 1.2em Georgia, Arial, Serif; text-align: center; text-shadow: -1px 1px 0 #fff; margin-bottom: 38px; }
/* Form Generator */
form {}
form input[type="text"]#points { background: #d6d6d6; border: 1px #909090 solid; display: block; font: bold 1.3em Arial, Serif; margin: 0 auto; padding: 10px; }
form input[type="button"]#generate { background: #2d69bd; background: -webkit-gradient(linear, 0% 0%, 0% 71%, from(#3171CA), to(#15396F)); background: -moz-linear-gradient(21% 74% 90deg,#15396F, #3171CA); border: 1px #5b93d1 solid; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; padding: 10px; }
The css and jquery was working, then for some reason it stopped working.
You say your jQuery was working fine until you starting working on your CSS. Could it be because you’re not closing your CSS includes:
Should be: