ansaurus

Question

Jquery: When Hover on Menu Item, Display Text

Answer 1

A:

I haven't tested this, but I think it should work:

$(document).ready(function() {

  //first method
  $(".NavSubhead").hide();

  $('#Navigation li').hover(
    function(){$('div.NavSubhead', this).fadeIn(500);},
    function(){$('div.NavSubhead', this).fadeOut(500);}
  );
}

Marius 2009-08-14 09:31:09

Testing... thanks in advance! going to report back with results.

Maxim Zaslavsky 2009-08-14 09:33:17

Nope, not working, but that you for helping anyway! However, the code looks *right* to my untrained eye... can anybody enlighten me as to why this isn't working either? Thanks!

Maxim Zaslavsky 2009-08-14 09:37:18

Sorry, I meant "but thank you for helping anyway", misspelled "thank".

Maxim Zaslavsky 2009-08-14 09:37:50

I fixed a few other possible errors in my code, still not working...

Maxim Zaslavsky 2009-08-14 09:42:15

Answer 2

+1 A:

This worked for me. You should probably be consistent in your markup though and have the hidden text appear after its associated link in both cases.

$(document).ready(function()
{
    $('.NavSubhead').hide();

    $('li.hovertriggerssubhead').hover(
     function()
     {
      $('.NavSubhead', $(this)).show();
     },
     function()
     {
      $('.NavSubhead', $(this)).hide();
     }
    );
});

Stephen Curran 2009-08-14 10:02:16

Thank you, but I'm having trouble even with using the working demo below, so once I figure out what's going on I'll attempt your way. Thanks again!

Maxim Zaslavsky 2009-08-14 18:58:31

Answer 3

+2 A:

Working Demo

jQuery code

$(function() {

  $("div.NavSubhead").hide();

  $('#Navigation li a').hover(
    function(){$(this).next().stop(false, true).fadeIn(500);},
    function(){$(this).next().stop(false, true).fadeOut(500);}
  );

});

N.B. I have added a click event handler to prevent the default action on anchor elements in the demo too

You may also want to chain in a slideDown() and slideUp() before the fade command in each event handler, respectively, to make the animation smoother

  $('#Navigation li a').hover(
    function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
    function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
  );

You may also want to take a look at the jQuery accordion, which essentially does what you are doing here, but has some additional options too.

EDIT:

After both of your updates, I know what the problem is. The slideshow plugin that you are using is for the Mootools JavaScript framework. The code supplied here is for the jQuery JavaScript framework. Whilst it is fine to use both frameworks on your site on the same page, both frameworks assign an object to $ to use for selection, and the object in each case has different methods, properties, etc. So, to get both frameworks to work at the same time we need to avoid this conflict. Luckily, jQuery has a command to easily get around this, noConflict(), which will release the $ shorthand so that other frameworks can use it. Take particular note of the order in which it must be included in a page.

So to get the code working, the structure of the scripts will need to be as follows

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
    // you can assign the jQuery object to another name if you want. Just
    // use var $j = jQuery.noConflict() and then can use $j() for jQuery object.
    jQuery.noConflict(); 

    // now your jQuery stuff comes here
    // there are a couple of techniques that can be used so that you can use the $
    // shorthand with jQuery library. I'll show you one here using a self-invoking
    // anonymous function that takes one parameter, $, into which we will pass the
    // the jQuery object

    (function($) {
      $(function() {

        $("div.NavSubhead").hide();

        $('#Navigation li a').hover(
            function(){$(this).next().stop(false, true).fadeIn(500);},
            function(){$(this).next().stop(false, true).fadeOut(500);}
        );

      });
    })(jQuery); 

    // now put the Mootools script and relevant slideshow script.
    <script src="....." ></script>

    ....

There are plenty of great slideshow and lightbox plugins for jQuery that offer similar effects to the Mootools one that you have linked to.

I'm of the opinion that, unless absolutely necessary for some specific functional need, I stick to using just one JavaScript framework in my site. Not only does this avoid conflicts, but there are usually ways built into a framework of achieving what another framework does. Even if a framework does not have that functionality as part of the core library, frameworks are designed to be extensible and as such, have an architecture that allows one to develop plugins and extend functionality to fit ones needs.

Russ Cam 2009-08-14 10:30:30

I pasted this code in, as well as trying the demo code, but it still doesn't work, which is very weird. Could it be related by any chance to constraints of the navigation html because of an encompassing table? The table has a fixed width. Other than that, I don't know what is the problem, and JQuery is referenced correctly.

Maxim Zaslavsky 2009-08-14 18:57:45

did the demo work for you? Is jQuery referenced correctly in your page - you can test this with a simple $(function() { alert("hello"); }); which should bring up an alert dialog when the DOM has finished loading.

Russ Cam 2009-08-14 20:52:10

I thought that too, but tested it with an alert not wrapped into a function, so i think it didn't verify it - i'm going to try that right now...

Maxim Zaslavsky 2009-08-15 00:59:47

Yes, JQuery works, but only when not in the document.ready function - is this correct? Oh, and I've been placing the code that you posted as an answer into the document.ready function, but it doesn't work even if you place it outside of document.ready. What gives?

Maxim Zaslavsky 2009-08-15 05:41:47

Sorry, I mean that the hello alert worked, but only when not in document.ready - jquery is working.

Maxim Zaslavsky 2009-08-15 05:42:18

If the hello alert worked but not wrapped in document ready then that sounds like jQuery is not referenced correctly as if it was, the alert would work wrapped in the document ready function. Are you using other JavaScript frameworks? Can you post all of your page code (if not too big)?

Russ Cam 2009-08-15 07:02:32

Sure! However, it has some other javascript code for a slideshow using a framework. I'll update the question with the code.

Maxim Zaslavsky 2009-08-15 08:10:35

Thank you so much for this prompt and simple solution - I will look into using a JQuery slideshow plugin instead in the future. The noConflict() code you posted works wonders. Have a great day!

Maxim Zaslavsky 2009-08-15 11:38:56

ansaurus

tags:

views:

answers:

Jquery: When Hover on Menu Item, Display Text

related questions