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.