Jump to content

jquery problem. .hasClas() issue


dianikol85

Recommended Posts

Hi to all, I am trying to build from scratch an image cross fade slideshow but i stack ...

 

here is my html code

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="gallery.js"></script>
	<style type="text/css">
		#wrapper {
			width: 800px;
			height: 600px;
			margin: 0 auto;
			position: relative;
		}

		#wrapper .images{
			position: absolute  
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div class="images" style="width:600px; height:400px;">
			<img src="image1.jpg" />
		</div>

		<div class="images" style="width:600px; height:400px;">
			<img src="image2.jpg" />
		</div>

		<div class="images" style="width:600px; height:400px;">
			<img src="image3.jpg" />
		</div>
	</div>
</body>
</html>

 

 

and here my jquery code gallery.js

 

$(document).ready(function() {
var counter = $("#wrapper div.images").length;
$("#wrapper .images:first").addClass('first');
$("#wrapper .images:last").addClass('last');
$("#wrapper .images:not(:first)").hide();

cur = $("#wrapper .images:first");

setInterval('Forward()',3000);

});

function Forward()
{
cur.fadeOut( 700 );
if ( cur.hasClass('class') == "last" )
	cur = $("#wrapper .images:first");
else
	cur = cur.next();
cur.fadeIn( 700 );
}

 

i add in the first div a class named "first" and in the last one a class named "last". So I check if the current div has a class "last" ake the cur variable point to the div with the class "first" in order to succed the slideshow effect. I will add buttos and stuff later...

 

I use the .hasClass() jquery function ofcourse to check the current class but it seems something is wrong,

 

Any advices??

 

Thanks nurds :D

Edited by dianikol85
Link to comment
Share on other sites

if ( cur.hasClass('last') )
   cur = $("#wrapper .images:first");
else
   cur = cur.next();
cur.fadeIn( 700 );

 

or

 

if ( cur.attr('class').indexOf("last") != -1 )
   cur = $("#wrapper .images:first");
else
   cur = cur.next();
cur.fadeIn( 700 );

 

.hasClass('className') function returns true or false only.

Edited by BeeDev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...