OK, I lied - one more question.
I'm having an issue that appears intermittently when the user loads
the page, and their mouse is already over a designated link that
triggers the menus. When the user is over the link before the page has
finished loading, the toggle function gets confused, and thinks that
on is off, and off is on. So when the user mouses out of the menu
area, the menu appears, and when the user mouses in the menu area, the
menu disappears. It was a hard bug to track down, but that is the
logic behind it.
So, with this being my jquery script that triggers the toggle
function...
<script type="text/javascript">
$(document).ready(function(){
$("li.main-nav").bind("mouseenter mouseleave", function(){
$(this).children('div').toggle();
return false;
});
});
</script>
...is there anything I can do to make Jquery set all menus to be off
right after load, to ensure this bug doesn't happen?
Here's my test case:
http://dl.getdropbox.com/u/21984/menu_test/menu_test.html
Thanks for any help!
On Dec 8 2008, 8:59 am, Ted <theodorew...@gmail.com> wrote:
> One last question (at least on this topic, I promise)-
>
> I'd like to have the main menu item keep it's hover class active while
> the user has the submenu selected.
>
> I've tried adding -
>
> $('li.main-nav').addClass('menu-on');
>
> ...to the code to achieve this, but it's not working.
>
> Code here:
>
> http://dl.getdropbox.com/u/21984/navigation.html
>
> Thanks -
> Ted
>
> On Dec 1, 8:28 pm, "Jeffrey Kretz" <jeffkr...@hotmail.com> wrote:
>
> > Here's what I believe is happening.
>
> > You have an LI that is a certain height, about 21px.
>
> > This LI is inside a div that is larger, 36px.
>
> > The floating DIVs are positioned underneath the larger DIV.
>
> > -------
> > MENU DIV
>
> > --------
> > LI
> > --------
>
> > <- Empty space
>
> > ------
> > Floating Div
>
> > There is an empty space between the LI and its child DIV.
> > So when you move the mouse there, it is no longer inside the
> > LI or its children, and it fires the mouseleave event.
>
> > You could set the height of the LI to expand to the size of the menu DIV.
>
> > JK
>
> > -----Original Message-----
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Ofserpicolugnut
> > Sent: Monday, December 01, 2008 4:52 PM
> > To: jquery-en@googlegroups.com
> > Subject: [jQuery] Re: Using jquery to construct menus like nbc.com
>
> > I used your mouseenter and mouseleave function, but I'm still having issues
> > with the menus disappearing when the user mouses off the top level item, and
> > in to the lower level list items (containing the div menus).
>
> > Here's a link to a more fleshed out example:
>
> >http://dl.getdropbox.com/u/21984/menu_test_case/menu_test_case.html
>
> > Any clues on why it's inconsistent in it's sticky-ness?
>
> > Thanks -
> > Ted
>
> > Jeffrey Kretz wrote:
>
> > > I made a few changes and reposted it here:
>
> > >http://test1.scorpiondesign.com/LocalTest7.htm
>
> > > Changes:
>
> > > menu1 through menu5 were moved underneath their respective LIs. When the
> > > menus were NOT children of the LIs, the mouseenter mouseleave kept firing.
>
> > > #nav { position:relative; }
> > > This allows the absolute positioning of child elements relative to itself.
>
> > > #menu1, #menu2, #menu3, #menu4, #menu5 {
> > > display:none;
> > > left: 0px;
>
> > > Rather than hiding the menus with javascript, I set the CSS to display
> > > none.
> > > The first toggle called will turn them on. The left:0px aligns the menus
> > > with the first relatively positioned element, in this case #nav.
>
> > > $("li.main-nav").bind("mouseenter mouseleave", function(){
> > > $(this).children('div').toggle();
> > > return false;
> > > });
>
> > > So it's a class based selector (less code), and it only binds the parent
> > > element (rather than the parent and child).
>
> > > Cheers,
> > > JK
>
> > > -----Original Message-----
> > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > > Behalf Ofserpicolugnut
> > > Sent: Tuesday, November 25, 2008 11:04 AM
> > > To: jquery-en@googlegroups.com
> > > Subject: [jQuery] Re: Using jquery to construct menus like nbc.com
>
> > > Here's a link to a simplified version of the code. The
> > > mouseenter/mouseleave
> > > events helped, but I'm seeing some strangeness on the first menu item, and
> > > then some flickering on the others.
>
> > >http://dl.getdropbox.com/u/21984/menu_test.html
>
> > > Jeffrey Kretz wrote:
>
> > >> If you have a sample url of your code, that would be helpful.
>
> > >> But at a guess, the flyout div is probably not a child of the main menu
> > >> element, so the mouseenter and mouseleave won't work properly. If this
> > >> is
> > >> the case, it will require a minor change to the hover plumbing.
>
> > >> The z-index with flash in IE6/7 can usually be solved by doing two
> > >> things:
>
> > >> 1. Add the wmode="transparent" attribute to the flash movie.
> > >> 2. Wrap the tag in a div set for the same width and height, with
> > >> its z-index set for 0.
>
> > >> JK
>
> > >> -----Original Message-----
> > >> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > >> Behalf Ofserpicolugnut
> > >> Sent: Tuesday, November 25, 2008 7:08 AM
> > >> To: jquery-en@googlegroups.com
> > >> Subject: [jQuery] Using jquery to construct menus like nbc.com
>
> > >> I'm trying to utilize jquery to construct a menu structure that is
> > >> similar to what you see at fox.com and nbc.com. Basically I have a
> > >> menu that is a ul list, with each li selector given it's own id. Below
> > >> I have a div container for each menu item, which are set to be hidden
> > >> by jquery upon load.
>
> > >> I've been the mousever/mouseout actions to trigger turning each div
> > >> container on/off, but the problems I'm encountering with this are 1)
> > >> it works when hovering over the main menu selection, but not when the
> > >> mouse is inside the div, making selecting sub items difficult/
> > >> impossible, and 2) for some reason in IE6/IE7, the divs don't show
> > >> when they are over a Flash object.
>
> > >> Does anybody have any ideas on how to take items #1 and #2?
> > >> --
> > >> View this message in context:
>
> >http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp...
> > >> 1s27240p20682171.html
> > >> Sent from the jQuery General Discussion mailing list archive at
> > >> Nabble.com.
>
> > > --
> > > View this message in context:
>
> >http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp...
> > > 1s27240p20687612.html
> > > Sent from the jQuery General Discussion mailing list archive at
> > > Nabble.com.
>
> > --
> > View this message in
> > context:http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp...
> > 1s27240p20783951.html
> > Sent from the jQuery General Discussion mailing list archive at Nabble.com.
