Jquery question

cpage · Wed 22/06/2011 04:47:53

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.

Code: ags


<!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

Calin Leafshade · Wed 22/06/2011 06:19:40

Because the div hasnt loaded when the jquery runs.

Look up $(document).ready function and wrap all your functions in that.

cpage · Wed 22/06/2011 06:40:37

Yeah thats what I thought too... I tried it both ways. it still isnt working.

Code: ags


<!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>

Calin Leafshade · Wed 22/06/2011 07:07:40

fadeOut, not fadeout. JS is case sensitive.

EDIT: also put

Code: ags


event.preventDefault();

at the start of your click function to stop it loading #

cpage · Wed 22/06/2011 07:58:03

you are officially my hero. Thanks so much!

MillsJROSS · Thu 23/06/2011 03:23:34

A great resource to ask these types of technical questions is www.stackoverflow.com

-MillsJROSS

Jquery question

cpage

Calin Leafshade

cpage

Calin Leafshade

cpage

MillsJROSS