Jquery slideDown confusion

I have made this slide Down function for my navigation menu with some help. Firefox no longer spits out errors but the code is acting weird. It seems that main menu is used to select which sub menu to show (correct), but the hover action doesnt take place till I hover over an image map that has nothing to do with the navigation menu.

I have tried several changes to the name and ID attributes in hopes that was the problem, but still same problem persitsts.

Here is the jquery code:


var currentSpan = 1;

function showMe() {
$("span").hover(function() {
$("#ex_"+currentSpan).slideDown(500);
},
function() {
$("#ex_"+n).slideUp(500);
});

currentSpan = n;
}


Here is the image map code (which works fine by itself):


<span class="menu" id="menu">
<map name="menu" id="menu">
<area alt="memberships" shape="rect" coords="134, 143, 176, 166" href="#"/>
<area alt="memberships" shape="rect" coords="188, 143, 231, 166" href="#"/>
<area alt="memberships" shape="rect" coords="243, 143, 285, 166" href="#"/>
<area alt="memberships" shape="rect" coords="297, 143, 340, 166" href="#"/>
<area alt="memberships" shape="rect" coords="351, 143, 394, 166" href="#"/>
</map>
<img src="image/fsummary.png" alt="membership comparison" usemap="#menu" width="" height="" vspace="5" hspace="1"/><br><br>
</span>


Here is the link to the page:

http://royalvillicus.com/reforeclosure.php

Hope someone can help me with my predicament

From the looks of it, you're assigning the hover function to a <span> element with no id. That in turn generates the problem with you hovering the mouse over the image map in question (and also your google search embed), because it is a <span> element without an id. My suggestion in this case would be: add an id to the table cell element that contains your pop-up sub-menu (menupopup would be an example) and then change your jQuery code to look like this:

function showMe(n) {
$("td#menupopup").hover(function() {
$("#ex_"+currentSpan).slideDown(500);
},
function() {
$("#ex_"+n).slideUp(500);
});

currentSpan = n;
}


Should solve all your problems. Enjoy.

Thanks a lot, sorry about the very long wait on the reply. I went and made the changes although, (I dont mean any disrespect in this)


$("td#menupopup").hover(function() {


If that is to be refering to an id in the submenu, then wouldnt the function only occur when the user hovers over an element in the submenu? Unless I am wrong, and could be the case, It seems like the id should be refering to the main menu at which the hover event would take place.

After checking the changes it seems the code is just picking submenus at random. How would I indentify main menus with their appropriate submenu counter part?

Thanks a lot

When I tested it... and I did that by pulling the entire source code of your webpage... it worked okay. I'm asking you to assign an id to the table cell (<td>) element, in which your menu is located and use that id to point your hover function to. In essence, when you hover over the table cell that contains the menu that needs to pop-up, the menu pops up.

Assigning that ID to the table cell with your original menu does indeed make the menu pop-up, but I don't think it'll be gathering the data all that well... considering the pop-up does happen before you've pointed to a child element inside that table cell, and of course, when you hover out to the actual menu that pops up, it will disappear. Let me see if I can be a bit more specific as to what you need to assign that id to:


<td id="menuslide" height="42">
<!--sub menu-->
<span id="ex_1" name="#ex_1" style="display: none;" class="position">
<a href="http://trulia.com/"><img src="reforeclosure.php_files/trulia.png" onmouseover="rollOn(this); showcontent(4)" onmouseout="rollOff(this)" alt="Trulia.com" hspace="0" vspace="1">
</a><a href="http://realestate.com/"><img src="reforeclosure.php_files/realestate.png" onmouseover="rollOn(this); showcontent(2)" onmouseout="rollOff(this)" alt="Realestate.com" hspace="0" vspace="1">
</a><a href="http://frontdoor.com/"><img src="reforeclosure.php_files/frontdoor.png" onmouseover="rollOn(this); showcontent(3)" onmouseout="rollOff(this)" alt="Frontdoor.com" hspace="0" vspace="1">
</a><a href="http://realtor.com/"><img src="reforeclosure.php_files/realtor.png" onmouseover="rollOn(this); showcontent(1)" onmouseout="rollOff(this)" alt="Realtor.com" hspace="0" vspace="1">
</a><a href="http://realestate.yahoo.com/"><img src="reforeclosure.php_files/yahoo.png" onmouseover="rollOn(this); showcontent(5)" onmouseout="rollOff(this)" alt="Yahoo" hspace="0" vspace="1">
</a><a href="http://royalvillicus.com/recompare.php"><img src="reforeclosure.php_files/compare.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" alt="compare" hspace="0" vspace="1">
</a></span>

<span id="ex_2" name="ex_2" style="display: none;" class="position">
<a href="http://alliedschools.com/"><img src="reforeclosure.php_files/allied.png" onmouseover="rollOn(this); showcontent(9)" onmouseout="rollOff(this)" alt="Allied Schools" hspace="0" vspace="1">
</a><a href="http://foreclosureuniversity.com/"><img src="reforeclosure.php_files/foreclosureuniversity.png" onmouseover="rollOn(this); showcontent(10)" onmouseout="rollOff(this)" alt="Foreclosure University" hspace="0" vspace="1">
</a><a href=""><img src="reforeclosure.php_files/dvd.png" onmouseover="rollOn(this); showcontent(11)" onmouseout="rollOff(this)" alt="DVDs" hspace="0" vspace="1">
</a><a href=""><img src="reforeclosure.php_files/books.png" onmouseover="rollOn(this); showcontent(12)" onmouseout="rollOff(this)" alt="Books" hspace="0" vspace="1">
</a></span>

<span id="ex_3" name="ex_3" style="display: none;" class="position">
<a href="http://www.richdad.com/Store/ProductDetail.aspx?id=1"><img src="reforeclosure.php_files/cashflow.png" onmouseover="rollOn(this); showcontent(6)" onmouseout="rollOff(this)" alt="Cashflow 101" hspace="0" vspace="1">
</a><a href="http://www.logler.com/real-estate-empire"><img src="reforeclosure.php_files/reempire.png" onmouseover="rollOn(this); showcontent(7)" onmouseout="rollOff(this)" alt="RE Empire" hspace="0" vspace="1">
</a><a href="http://www.gamerankings.com/htmlpages2/924192.asp"><img src="reforeclosure.php_files/retycoon.png" onmouseover="rollOn(this); showcontent(8)" onmouseout="rollOff(this)" alt="RE Tycoon" hspace="0" vspace="1">
</a></span>

<span id="ex_4" name="ex_4" style="display: none;" class="position">
<a href="http://royalvillicus.com/videos.php"><img src="reforeclosure.php_files/videos.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" alt="Videos" hspace="0" vspace="1">
</a><a href="http://royalvillicus.com/charts.php"><img src="reforeclosure.php_files/charts.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" alt="Articles" hspace="0" vspace="1">
</a><a href="http://royalvillicus.com/calculator.php"><img src="reforeclosure.php_files/calculators1.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" alt="Calculators" hspace="0" vspace="1">
</a></span>

<span id="ex_5" name="ex_5" style="overflow: hidden; height: 1px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;" class="position">
<a href="http://royalvillicus.com/about.php"><img src="reforeclosure.php_files/about.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" alt="About us" hspace="0" vspace="1">
</a></span>

</td>


Notice that you're not pointing toward an element of the sub-menu, but rather the table cell that does contain your sub-menu. Try it, let me know how it goes.

This is an interesting site. I can learn a lot from the members here. I'll be watching this thread so that I can learn a lot more.



lawsteven
Simulation prêt (http://simulationpretimmobilier.net/simulation-pret-immobilier/simulation-pret)