Jump to content
MakeWebGames

JQuery help

Dayo

By Dayo
in JavaScript

 Share

Recommended Posts

Dayo Experienced

Dayo

Posted
Posted

right i have this script

<!DOCTYPE html>
<html>
<head>
 <style>
 p { width:400px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div>
 </div>
 </div>


 <script>

   $(".inner").hover(function () {
     $(".text").slideToggle("slow");
     $(".ammount").slideToggle("slow");
   });
</script>

</body>
</html>

what i want it to do is only toggle the slide on the div i hover over and not all 3 i have tryed for a while any help would be appreciated!

Dave Community Regular

Dave

Posted
Posted

It works like this.. Could be a bit more efficient but I've never used slideToggle so personally I'd do it like this.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { width:400px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div>
 </div>
 </div>


 <script>

   $(".inner").hover(function () {
	if($(this).children('.text').css('display') == 'none') {
     		        $(this).children('.text').slideDown("slow");
		$(this).children('.text').slideDown("slow");
	} else {
		$(this).children('.text').slideUp("slow");
		$(this).children('.text').slideUp("slow");	
	}
   });
</script>

</body>
</html>
Dave Community Regular

Dave

Posted
Posted
Thank you, i will have to look more deeply into JQuery :D

If you need any help just ask! I'm not that great at jQuery but I've written some advancedish stuff with it.

Dayo Experienced

Dayo

Posted
  • Author
Posted

just done a quick fix using children and probly made it more efficiant

the problem was you could get the grey area that slides down stay at the bottom once you move the mouse away (some thing i didnt want :D)

Thanks for pointing out children

<!DOCTYPE html>
<html>
<head>
 <style>
 p { width:400px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div align="center">
<div style="width:585px;">
 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

 <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;">
 <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;">

 <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div>
 <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div>
 </div>
 </div>

</div>
</div>
 <script>

 $(".inner").hover(function () {
     $(this).children(".text").slideToggle("slow");
     $(this).children(".ammount").slideToggle("slow");
   });

/* $(".inner").hover(function () {
	if($(this).children('.text').css('display') == 'none') {
     		$(this).children('.text').slideDown("slow");
		$(this).children('.text').slideDown("slow");
	} else {
		$(this).children('.text').slideUp("slow");
		$(this).children('.text').slideUp("slow");	
	}
   });*/
</script>

</body>
</html>

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

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.

×
 Share
Go to topic listing
×
×
  • Create New...