...

View Full Version : Jquery function problem



surreal5335
01-26-2009, 09:04 PM
I am looking to use JQuery which I am really new to and get my navigation submenus to slideDown when the parent is rolled Over. I have multiple parents and children or sub menus and want them to activate individually but without repeating the JQuery over and over again for each.

Obviously the goal is to also slideUp on the mouseOut event.

Here is the code that I have so far:




<style type="text/css">
span.position
{ vertical-align: top;
align: left;
position: relative;
}
</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">

//jquery slideDown function

$(function showMe() {

$("span").mouseOver(function() {
$(this).slideDown(500);

});

$("span").mouseOut(function() {
$(this).slideUp(500);

});

});
</script>


Here is the html markup I am using:



<!--main menu-->

<a href="recompare.php"><img src="image/listings.png" onmouseover="rollOn(this); showMe(1)" onmouseout="rollOff(this); " id="hotspot" name="hotspot" vspace="1" hspace="0"></a>
<a href="#"><img src="image/education.png" onmouseover="rollOn(this); showMe(2)" onmouseout="rollOff(this); " id="hotspot" name="hotspot" vspace="1" hspace="0"></a>

</td>

</td>
</tr>
<tr>
<td height="42">
<!--sub menu-->
<span id="ex_1" style="display:none;" class="position">
<!--some links-->
</span>

<span id="ex_2" style="display:none;" class="position">
<!--some more links-->
</span>

<!--end sub menus-->


The rollOn() function is used to change the button images as a standard rollOver.
This code has worked great in the past minus the additions of the JQuery.
Firefox has stated that I need to define the showME()
and that
$("span").mouseOver is not a function. I am just going by what the tutorials have shown me, so I'm not sure what to do with this.

Thanks a lot for all your help

rangana
01-27-2009, 12:29 PM
In jQuery, there is no mouseOver property, but it is hover which accepts two arguments - over (mouseover) and out (mouseout).

Should be:


$("span").hover(function() {
$(this).slideDown(500);
},
function() {
$(this).slideUp(500);
});


Additionally, if you want to enclose your jQuery in a function (named), then there's no need to surround it with dollar sign block.

This ammendment will do:


function showMe() {
$("span").hover(function() {
$(this).slideDown(500);
},
function() {
$(this).slideUp(500);
});
}


...and one last thing,

Please remove highlighted (it's deprecated):


<script language="javascript" type="text/javascript">



For further reading:
http://docs.jquery.com/Events/hover


I'm not sure what's in your "rollOn()" function, but hopefully, this makes sense.

surreal5335
01-27-2009, 10:12 PM
Thanks a lot for your help. The changes you mentioned have gotten rid of the errors in firefox. The problem left is the submenu is not displaying.

I use to use this code to create the show and hide submenu and sucessfully.



var currentSpan = 1;
function showMe(n) {
document.getElementById("ex_"+currentSpan).style.display = "none";
document.getElementById("ex_"+n).style.display = "block";
currentSpan = n;

}



So now the new jquery function that you modified is the one I am trying to use for the same purpose but obviously just to give it style.

I have tried merging the defining elements of the old code with the new jquery such as:

var currentSpan = 1;

("ex_"+currentSpan)

("ex_"+n)

currentSpan = n;

Although I may not have put them in the right place or formatted them to jquerys standard either.


So my idea of how to place it looks like this with your modifications included:



var currentSpan = 1;

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

currentSpan = n;
}


This maybe completely wrong but I feel that the code needs to reference the currentSpan like the old code did for it work properly.

One other question I have is with the hover function how do I go about setting the arguments of "Over" and "Out" or does jquery take care of this for me?

side note: The rollOn() function I have stills works fine.


Thanks a lot for all your help

rangana
01-28-2009, 02:39 AM
Reading your code, and the jQuery you attempt to provide, try to add highlighted:


var currentSpan = 1;

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

currentSpan = n;
}


...this will instruct jQuery that you are referring to an element via its ID.





One other question I have is with the hover function how do I go about setting the arguments of "Over" and "Out" or does jquery take care of this for me?


The first argument will be assigned for the over and the 2nd argument will be assigned for the out - nothing to worry. jQuery assigns that.

Hope it helps.

surreal5335
01-28-2009, 05:52 PM
I made those changes and it says that currentSpan = n; is not defined. How would I go about defining it?

The only method I know of defining an element is with the 'this' definer, but I dont think that it applies to this this situation.

The error that keeps popping up is:

'missing ; before statement' which was refering to this line:



$("#ex_"+n).slideUp(500);


Any thoughts?

Thanks a lot for your help

rangana
01-29-2009, 01:57 AM
Add it here:


function showMe(n)


I believe you are passing it as an argument to showMe func.

Hope that helps.

surreal5335
01-29-2009, 08:48 PM
I have made the changes you suggested, which did seem to get rid of the undefined problem. I seem to get another problem now.

Permission denied to call method Location.toString

Never seen this error before, any suggestions?

This error occured when I hovered over the main menu

rangana
01-30-2009, 02:18 AM
Could you please provide a sample of how your markup is laid or better a link to the page instead?

It would be a lot easier on our end to reproduce the issue.

surreal5335
01-30-2009, 05:39 PM
Sorry about that.

The link is:

http://royalvillicus.com

Thanks a lot for the help

rangana
01-31-2009, 05:21 AM
Works fine at my end. Try to reference your jQuery from your local server instead of googleapis.

Also, please remove the html tag found above your DOCTYPE. It's invalid and pushes IE into quirksmode.

surreal5335
02-02-2009, 06:49 PM
what browser and version were you using? Do you have any ideas as to why this only works on selective computers?

I removed the html tag at the top

The reason I use the google link for the jquery library is bc it was the only way to call it properly. I called it from my local server and only had problems. Used the google link, finally worked. I call external files all the time with success so I am not sure why this wont work.

Any thoughts?

Thanks a lot for all your help

surreal5335
02-04-2009, 10:32 PM
Ok after fiddling around on the site I came upon the source of my issue, but cant figure out how to fix it.

The page where my problem shows itself is on

http://royalvillicus.com/reforeclosure.php

It seems that I am setting the value from rolling over the menu bar, but the actual slide down event with jquery doestn execute until I rolled over the image map in the middle of the screen containing the names of the different sites. I am also getting the same problem when I click on the sections to the right of it, the jquery will not execute until I hover over the image map.

Here is the code for image map:



<span class="menu1" id="menu1">
<map name="menu1" id="menu1">
<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="#menu1" width="" height="" vspace="5" hspace="1"/><br><br>
</span>



I have tried putting in a '#' and also using the name attribute to identify the sub menus but this doesnt change anything.

Any suggestions?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum