How to hide this dropdownmenu on mouseout - javascript

I have a dropdownmenu working as shown on jsfiddle example here
How can I get the dropdownmenu to be hidden on mouseout? I have added:
onmouseout="hidediv()";
to the div that contains the drop down menu - but, when you click the link that makes the drop down menu appear - as you move your mouse over the drop down menu it disappears - sometimes. Other times it hangs around as you mouseover the first item in the list, but when you move over the second item in the list - the menu disappears. I don't understand as the mouseout should apply to the whole div.

Change onmouseout to onmouseleave.
From MDN:
Similar to mouseout, [mouseleave] differs in that it doesn't bubble and that it
isn't sent until the pointer has moved from its physical space and the
one of all its descendants.
Fiddle

You have two completely independent elements for the menu and the button. Make the menu list ul#dvMenu a sub-item of the ul under #navcontainer, like this:
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
BTW, you don't need to have a surrounding div, you can apply all those styles directly to the unordered list. This way you won't leave the context of the element, hence avoiding the unintended hide. Also, bind onmouseout="hidemenu();" to the main <ul>.

Related

Showing a submenu on hover of the parent link, then keeping it visible until the mouse leaves the sub menu?

I have a menu arranged like this:
<ul class="parent-menu">
<li class="menu-item">
<a class="menu-item-link" href="#">Link</a>
<ul class="sub-menu">
<!-- sub menu list items -->
</ul>
</li>
<!-- more parent menu list items -->
</ul>
The .sub-menu elements are hidden by default.
I'm using the following jQuery to show/hide the submenus perfectly fine:
$('.menu-item > a').hover(function() {
$(this).find('.sub-menu').toggle();
})
Of course, they disappear as soon as the mouse leaves the .menu-item > a element. I can't figure out a way to "handoff" the second half of the .toggle() event to work as basically a .mouseleave() on the entire .sub-menu element.
So when a user hovers on a parent menu item, they are presented with a sub menu, and should be able to hover at their leisure and select a sub menu item.
How would I go about this?
Figured it out actually. I was overcomplicating things by using .hover() and found that I could simply use mouseenter() and mouseleave() separately, but using the latter on the parent element of both the main menu item and its submenu. So when your mouse enters the parent menu item link, it shows its sub menu (I have multiple, so I had to use $(this) and find() or siblings() instead of hardcoding it). And when the mouse leaves the parent of both (so either the main link or the sub menu itself) it becomes hidden, as it should be.
Here's the code:
$('.menu-item > a').mouseenter(function() {
$(this).siblings('.sub-menu').show();
});
$('.menu-item').mouseleave(function() {
$(this).find('.sub-menu').hide();
});
display = false;
$('.sub-menu').toggle( display );
$('.parent-menu').mouseenter(function() {
$('.sub-menu').toggle("slow");
});
$('.parent-menu').mouseleave(function() {
$('.sub-menu').toggle("slow");
});
Not sure if you wanted each one to separately or together. This will open them all.

How can I make my parent list element ignore its children's width?

I've got a menu build by a list like below:
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
The sub menu items in the list are only displayed when you hover their parent list element. However the child list elements width will force the parent element to the same width and it will make the menu change size when you hover menus.
Is there any way I can prevent this?
Add CSS classes to your elements. (One for the outer <ul>, the same for each of the initial <li> elements, then repeat to the inner lists.)
Use CSS selectors to define a static width of the <ul>s, and probably add a word-wrap in the <li> elements.
Set a fixed width on the containing element (so the top level ul). Child elements will wrap inside the width (other than edge cases, e.g. a white-space: nowrap on one of the sub menu items).
make define width of parent and set position relative to all child elements
also try absolute position to parent

Javascript: how can I judge an element is in viewport?

I have a <ul> element. It's CSS overflow property is scroll.
I have several list elements in the list, such that there is a scrollbar.
<ul style="overflow: scroll; height: 100px;">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
...
<li></li> // how can I judge if this element is in the viewport?
</ul>
How can I determine if a specific list item is visible in that list?
Also, if it's not currently visible, what property can I use to make it scroll into view?
PS: No libraries, please (jQuery, MooTools, etc).
This is a function I just came up with.
I did some testing on the jsFiddle link at the end of this answer, and it seems consistent.
function elementInViewOfParent(elem) {
var container = elem.parentNode;
return (container.scrollTop + container.offsetHeight) >= elem.offsetTop &&
(container.scrollTop - elem.offsetHeight) <= elem.offsetTop;
}
jsFiddle example - Just scroll it wherever you want, and click the button.
It checks for the red LI's visiblity, in this example.
If you are okay with using jQuery, this will scroll so that elem is visible and at the top.
function scrollTo(elem) {
var offset = $(elem).offset();
$(window).scrollTop(offset.top);
}
(You could even animate the scroll: jQuery scroll to element).
Another solution would be to use <a target="foo"></a>, and the change the URL fragment to scroll to a particular element, but you specifically asked to be able to tell from JavaScript, which this does not allow you to do.

Javascript code only effects drop-down menu links for some reason

Edit: I am also okay with doing it through CSS if that is possible. Also, note that a:active will not work because a:active only changes the element / link for a brief moment while it is active, it does not change it until another link in the navigation bar is clicked.
I'm trying to write a code where, in the navigation bar, if a link is clicked and while the link links to the current page, the link color in the navigation bar should be different (should change to red from white). So far, here is my html.
<nav class="menuL">
<ul id="menu">
<li><span></span>biography</li>
<li><span></span>portfolio</li>
<ul id="submenu">
<li class="subclass" id="first">Wine</li>
<li class="subclass" id="second">Landscape</li>
<li class="subclass" id="third">Divers</li>
</ul>
</ul>
</nav>
<nav class="menuR">
<ul id="menu2">
<li><span></span>galleries</li>
<li><span></span>contact</li>
</ul>
</nav>
Here is the Javascript.
$(document).ready(function() {
$('nav a').click(function() {
$(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');
$(this).addClass('activeAnchor');
});
});
and here is my CSS to go with the Javascript.
a.activeAnchor {
color:red;
}
As the title mentions, this only effects the submenu. When I hover over portmenu (portfolio) and if I click a submenu item, then the submenu link I clicked changes to red and if I click another submenu item, it changes, so that works. However, if I click a non submenu item (a normal navigation bar li), it doesn't change. Any idea on why it is only effecting the submenu? Also, if I click one of the submenu items, I want portmenu (portfolio) to be highlighted instead of the submenu item, I'm not too good in Javascript so if someone can help me out with that, that would be great!
This line:
$(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');
...will only remove the 'activeAnchor' class from elements within the same <nav> element as the item just clicked, but your top-level menus are divided into two <nav> elements. You could do this instead:
$('.activeAnchor').removeClass('activeAnchor');
...to remove the active class from any element that had it.
Demo: http://jsfiddle.net/B8EPS/
Or just limit it to ones with some <nav> element anywhere on the page:
$('nav .activeAnchor').removeClass('activeAnchor');
(Or whatever other combination actually matches the html structure you are using.)

jquery toggle and smooth scroll clashing on same page

I am using jquery toggle plugin along with the smoothscroll plugin on a single page website. now, the problem is that the hidden text in the toggle function is not allowing the smoothscroll jquery to function properly. suppose we click 'item a' in the nav option and it is supposed to scroll to the 'item a' section div in a smooth manner, it does so haphazardly and also takes into account the height of the hidden text in toggle function which is about 100px. Hence, there is neither a smooth scroll but also a difference of 100px of the desired result.
For reference, i am using html5 and have 4 sections on the page, as provided in code below.
Here is the code for toggle function:
`$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
return true;
});
});`
here is the code for navigation menu (supposed to scroll on the same page):
<nav>
<ul>
<li>Home</li>
<li>Our Works</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
i am using the smoothscroll plugin located at:http://css-tricks.com/snippets/jquery/smooth-scrolling/
can someone please guide me why these 2 jquery are clashing.
PS: i am also using a jquery slideshow, but that has no effect as far as i can tell, coz i removed that, and nothing changed.
It's difficult to tell based on what you've posted, but using the .hide() method, which is comparable to setting the CSS property to display: none, could cause the browser to incorrectly calculate height. I would try setting visibility: hidden , and then when active visibility: visible.

Categories