Hey folks
I was wondering if there is a jquery guru here who can tell me why this div won't disappear! I am just barely learning jquery and this is a ridiculously simple piece of code but the sucker wont work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Jquery Experiments</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('a').click(function() {
$('#box').fadeout();
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Fade out the box</a>
</body>
</html>
thanks in advance
Edit: here is a link if needed http://jquery-tests.twomindeddesign.com (http://jquery-tests.twomindeddesign.com)
Because the div hasnt loaded when the jquery runs.
Look up $(document).ready function and wrap all your functions in that.
Yeah thats what I thought too... I tried it both ways. it still isnt working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Jquery Experiments</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#box').fadeout();
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Fade out the box</a>
</body>
</html>
fadeOut, not fadeout. JS is case sensitive.
EDIT: also put
event.preventDefault();
at the start of your click function to stop it loading #
you are officially my hero. Thanks so much!
A great resource to ask these types of technical questions is www.stackoverflow.com (http://www.stackoverflow.com)
-MillsJROSS