SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stop function from executing

    I'm having some difficulty preventing a function from executing.

    Here's a scenario:
    I have a drop down list that has a sub menu. When you "mouseover" the menu heading, the sub menu expand and when you "mouseout" the menu heading, the submenu collapse.
    I also add "mouseover" and "mouseout" listeners to the sub menu.

    My trouble is how do I prevent the drop down list from collapsing so that I can get to the sub menu. And only collapse when there is a "mouseout" on both the menu heading and the sub menu?

    In short: how do I prevent a function from executing, from inside another function?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I think the easiest way to do that would be to add a variable outside of both the functions so they can both see it. This var would contain the hover state (e.g. true if hovering, false if not).

    Another solution would be to have a markup structure along the lines of:
    Code:
    <ul>
    	<li>
    		<a href=""></a>
    		<ul>
    			<li><a href=""></a></li>
    			<li><a href=""></a></li>
    			<li><a href=""></a></li>
    		</ul>
    	</li>
    	<li>
    		<a href=""></a>
    		<ul>
    			<li><a href=""></a></li>
    			<li><a href=""></a></li>
    			<li><a href=""></a></li>
    		</ul>
    	</li>
    </ul>
    This way, you can track a hover state on a LI using CSS and display the child UL. Technically you would still be hovering over the LI when hovering over the child UL below it (so long as there is no margin / gap between the LI and the child UL)

    See A List Apart: Articles: Suckerfish Dropdowns for some more info on the markup / CSS required

    The JS required for this should be fairly minimal.

    Let me know if I'm completely on the wrong track with this solution here
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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