Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Jquery function problem

    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:

    Code:
    <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:

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

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    In jQuery, there is no mouseOver property, but it is hover which accepts two arguments - over (mouseover) and out (mouseout).

    Should be:
    Code:
    $("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:
    Code:
    function showMe() {
    	$("span").hover(function() {
    		$(this).slideDown(500);		
    	},
    	function() {
    		$(this).slideUp(500);
    	});
    }
    ...and one last thing,

    Please remove highlighted (it's deprecated):
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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.

    Code:
    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:

    Code:
    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

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Reading your code, and the jQuery you attempt to provide, try to add highlighted:
    Code:
    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.



    Quote Originally Posted by surreal5335 View Post
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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:

    Code:
    $("#ex_"+n).slideUp(500);
    Any thoughts?

    Thanks a lot for your help
    Last edited by surreal5335; 01-28-2009 at 06:03 PM.

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Add it here:
    Code:
    function showMe(n)
    I believe you are passing it as an argument to showMe func.

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #9
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Sorry about that.

    The link is:

    http://royalvillicus.com

    Thanks a lot for the help

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #11
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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

  • #12
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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:

    Code:
    <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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •