[SOLVED] Jquery help

darkfreaks · June 8, 2009

okay soi am using the following Jquery dropdown nav script to create drop downs.

however it will not let me use more than one instance of the dropdown menu. can anyone tell me why ???

http://www.visual-blast.com/javascript/animated-drop-down-menu-with-jquery-and-css/

gevans · June 8, 2009

If I have understood your question right it's not to hard, the following isn't an amazing solution, but a solution;

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


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animated Drop Down Menu with jQuery</title>
<link href="example_files/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="example_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
	var ul = $(this).attr('rel');
	$('ul#' + ul).slideToggle('medium');
    });
$('ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
$('ul.menu_body li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

</head>
<body>
<div class="container" style="float: left;">
<img src="example_files/navigate.png" rel="1" class="menu_head" width="184" height="32">
<ul style="display: none;" class="menu_body" id="1">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</div>
<div class="container" style="float: left;">
<img src="example_files/navigate.png" rel="2" class="menu_head" width="184" height="32">
<ul style="display: none;" class="menu_body" id="2">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body></html>

darkfreaks · June 8, 2009

thatis not what i mean at all :-\

i have 5 seperate images that all say different things, there image just has navigation and they use that image for all there menus.

i want to have 5 different menus with 5 different images.

gevans · June 8, 2009

I gave you the code for that, you just have to go through and change the lists and images, the jquery works fine

darkfreaks · June 8, 2009

i tried changing the CSS class from "menu_body" and "menu_head" to "members" and "members_body" and the image is not clickable. i get no dropdown on click.

gevans · June 8, 2009

jQuery references the css of the image, if you want to change the class names in the css and html, you need to change them in the jQuery also

darkfreaks · June 8, 2009

Jquery:

<script type="text/javascript">
$(document).ready(function () {
$("ul.members li:even").addClass("alt");
$('img.members_head').click(function () {
$('ul.members').slideToggle('medium');
});

$('ul.members li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );

});

$('ul.members li a').mouseout.(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>

HTML:

 <td width="39" valign="top"><img src="images/nav1.gif" width="92" height="35" /></td>
      <td width="137" valign="top"><img src="images/nav2.gif" class="menu_head"> <ul class="menu_body">
  <li><a href="#">Join</a></li>
  <li><a href="#">Rules</a></li>
  <li><a href="#">Staff</a></li>
  
</ul>	  </td>
      <td width="23" valign="top"><img src="images/nav3.gif" class="members_head" /><ul class="members">
  <li><a href="#">WWCF Roster</a></li>
  <li><a href="#">Champions</a></li>
  <li><a href="#">Title History</a></li>
  <li><a href="#">Archives</a></li>
  <li><a href="#">Legends</a></li>
  <li><a href="#">Rankings</a></li>
  <li><a href="#">News</a></li>
  </ul>
  </td>

see my mistake?

gevans · June 8, 2009

You are only referencing one image and one list in your jquery, try this..

<script type="text/javascript">
$(document).ready(function () {
$('ul.members li:even', 'ul.menu_body li:even').addClass("alt");
$('img.members_head').click(function () {
	$('ul.members').slideToggle('medium');
});

$('img.menu_head').click(function () {
	$('ul.menu_body').slideToggle('medium');
});

$('ul.members li a', 'ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});

$('ul.members li a', 'ul.menu_body li a').mouseout.(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>

darkfreaks · June 9, 2009

works now but im trying to make everything compliant according to webdev toolbar and i get this JS error

Error: XML filter is applied to non-XML value (function (fn) {return fn ? this.bind(name, fn) : this.trigger(name);})

Source File: file:///C:/Users/Bryce/Desktop/wwcfnew.html

gevans · June 9, 2009

Sounds like a line from a jQuery library, can't help you there I'm affraid

darkfreaks · June 9, 2009

oh i installedfirebug lite on IE and get this........

"Expected identifier (wwcfnew.html,98)"

  <script type="text/javascript">
$(document).ready(function () {
   $('img.members_head').click(function () {
      $('ul.members').slideToggle('medium');
   });
   
   $('img.menu_head').click(function () {
      $('ul.menu_body').slideToggle('medium');
   });
    $('img.shows_head').click(function () {
      $('ul.shows').slideToggle('medium');
   });

   $('ul.ahows li a','ul.members li a', 'ul.menu_body li a').mouseover(function () {
      $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
   });

   $('ul.ahows li a','ul.members li a', 'ul.menu_body li a').mouseout.(function () {
      $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
   }); ////line 98
});
  </script>

gevans · June 9, 2009

Have a close look, it's a suntax error on your part.

$('ul.ahows li a','ul.members li a', 'ul.menu_body li a').mouseout.(function () {

darkfreaks · June 9, 2009

thanks LOL didnt see the dot but i sorta figured.

Sign In

[SOLVED] Jquery help

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information