Drop down div doesn't stay visible - javascript

I am trying to make a drop down list and I have made it somewhat work. When I put the mouse over the area, a div in the shape of the drop down becomes visible. Then when you put your mouse over anything in the div, it disappears. That is obviously not meant to happen. Here is my code. Any solution is greatly appreciated.
HTML:
<li><a onMouseOver="showServersDropDown()" onClick="showServersDropDown()" class="three-d">
Servers
<span aria-hidden="true" class="three-d-box">
<span class="front">Servers</span>
<span class="back">Servers</span>
</span>
</a></li>
<div onMouseOut="hideServersDropDown()" id="serversDropDown">
<p>Live Map</p>
</div> <!--This ends the Server List Drop Down Div-->
JS:
function showServersDropDown() {
document.getElementById("serversDropDown").style.display="block";
}
function hideServersDropDown() {
document.getElementById("serversDropDown").style.display="none";
}

I wasn't able to reproduce this exact issue, but it sounds like the problem is caused by hovering over the child elements of the div firing the onmouseout event of the parent div. I found this answer that should help you with that: prevent onmouseout when hovering child element of the parent absolute div.
I also noticed that you are changing display to none. Once the display is set to none, the div won't render at all on the browser, which will prevent mouse events from firing on it, so hovering in that area will not cause it to reappear. I found another answer here about hovering over a hidden element to reveal it: Hover over a hidden element to show it.
Also, it seems like you are missing an onmouseover event to reveal the drop down list when you hover over it, although I may be mistaken in what you are trying to accomplish.
So in all, with two modifications to your Javascript and a small modification to your HTML, I think you can achieve your intended result with this:
<div onmouseout="hideServersDropDown(event)" onmouseover="showServersDropDown(event)" id="serversDropDown">
<p>Live Map</p>
</div> <!--This ends the Server List Drop Down Div-->
function showServersDropDown(event) {
document.getElementById("serversDropDown").style.opacity="1";
}
function hideServersDropDown(event) {
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
document.getElementById("serversDropDown").style.opacity="0";
}
I only put the event blocking code in hideServersDropDown since you would want the onmouseover event to fire and show whether you are hovering over a parent or a child in the div. I hope this helps!

It's usually because the mouse is leaving the original div, the key is to make the submenu a child of the main div:
<ul class="menu">
<li>
<a>nav title</a>
<ul>
<li><a>sub link</a></li>
</ul>
</li>
</ul>
Then in pure css you can handle this:
.menu ul { display: none }
.menu li:hover ul { display: block }

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.

Showing an image only within a certain area

I have a simple menu in an unordered list:
<ul class="courses">
<a href="#">
<li class="spinny">
<h3>Course Title</h3>
<img class="rotateme" src="images/logo_transparent.png"/>
</li>
</a>
</ul>
When the user hovers over the li item, the background changes colour and the img is displayed using a simple jQuery .toggle function:
$(".spinny").hover(function(){
$(".rotateme").toggle("fast");
});
The image is also spinning thanks to some CSS3 animation, hence the class name rotateme, but I don't think that matters.
My problem is that the image is displayed on top of everything else, whereas I'd like to only show it within the bounds of the li item (as if it was a background-image essentially). How can I do this?
Also, how can I scale this up to multiple list items?
EDIT: Rough JSFiddle example here. As you can see, the whole circle is shown. I just want to show it where it lies inside the grey box.
.spinny { overflow: hidden; }
Is your easiest solution. Other than that, you'd have to set an appropriate size on the image so that it isn't bigger than the list item.
In response to your comment:
$(".spinny").hover(function(){
$(this).find(".rotateme").toggle("fast");
});

Trouble creating an expanding list with jQuery

I need to make a list for my client's podcast archive page that opens up to reveal links to the different podcasts for the month they click on. I pretty much want exactly something like BlogSpot has for their default blog archive widget on the right side of the page here: http://kimrome.blogspot.com/
I was able to make something like that here: http://thehummingbirdplace.com/test2.html but I'm not sure how to make the arrows that show if a list has been expanded or not. So it needs to change direction when it's clicked and return to the previous direction when it's clicked again to close that section.
My version also has the child elements showing when I open the page, and I don't want them to expand until their parent is clicked on.
I've look online to see if there is jQuery already created to do this, or how I might be able to make it, but since I'm not sure what this whole thing is properly titled, I get mixed results. Any help would be appreciated!!
Try jQuery-UI accordion
$(...).accordion();
, or this: http://jsfiddle.net/5SKLV/1/
$(...).myAccordion();
Just write CSS at your taste.
If you would like to do this yourself (it's fun to write things yourself):
I've added an ID of #tree to the root <ul>, and wrapped the text of the level 1 <li>s in <span>:
<ul id="tree">
<li>
<span>parent1</span>
<ul>
<li>child11</li>
<li>child12</li>
</ul>
</li>
<li>
<span>parent2</span>
<ul>
<li>child21</li>
<li>child22</li>
</ul>
</li>
</ul>
To apply arrows that point left and right to the parent elements, create two CSS classes with backgrounds, for example (you'll need to find the background images elsewhere or make your own):
.opened > span {
background: url('arrow_pointing_down.png') left top;
color: #0a0; /* just to make it easy to know which class it has */
}
.closed > span {
background: url('arrow_pointing_right.png') right top;
color: #00a; /* just to make it easy to know which class it has */
}
To hide all the child elements when the page loads...
$('#tree > li').addClass('closed');
// hide the level 2 ul's
$('#tree > li ul').hide();
Then in your click handler:
$("#tree > li > span").click(function (event) {
event.preventDefault();
// swap the opened and closed classes
$(this).parent().toggleClass('opened closed');
// toggle the level 2 ul instead of li
$(this).parent().find("ul").toggle();
});
Working demo here: http://jsfiddle.net/cTLGN/
ADDITIONAL:
This demo code doesn't make use of caching references to jQuery objects to make it easier to read. In reality instead of doing:
$(this).parent().toggleClass('opened closed');
$(this).parent().find("ul").toggle();
... one should do:
var parent = $(this).parent(); // search the DOM once for this' parent, and remember it
parent.toggleClass('opened closed');
parent.find("ul").toggle();
.. because every time you use jQuery's $() constructor it needs to search thru the entire DOM, which can be quite expensive if you do it repeatedly.

Animation repeating while hovering on a div

I've read other questions and answers about this issue but they didn't work for me, maybe I am missing something or my example is slightly different, I don't know. Anyway, I have a div with some text and a link inside and I would like to create a new div when the user hovers over this first div. The problem is that, when I am over the first div, the second one fades in and out continuously, even if I don't leave the first div with the mouse.
Here is the HTML code:
<div id="content">
<h1>Portfolio</h1>
<div id="web">
<p>Web apps</p>
<a href="#">
First link
</a>
</div>
<div id="commentweb">
<p>The text that I want to show</p>
</div>
</div>
and this is the jQuery:
$(document).ready(function() {
$("#web").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
$("#commentweb").hide();
$("#web").hover(
function () {
$(this).children("a").children("img").attr("src","2.png");
$(this).css("background-color","#ecf5fb");
$(this).css( 'cursor', 'pointer' );
$(this).css('border','1px solid #378ac4');
$(this).children("p").css("opacity","1.0");
$('#commentweb').stop(true, true).fadeIn();
},
function () {
$(this).children("a").children("img").attr("src","1.png");
$(this).children("p").css("opacity","0.5");
$(this).css("background-color","#e8e3e3");
$(this).css('border','1px solid grey');
$('#commentweb').stop(true, true).fadeOut();
}
);
});
What should I do to have the fade in animation start when I am over #web and the fade out animation when I leave that div, without flickering (i.e. constant fadeIn and fadeOut)?
I have added a fiddle to show you the problem: http://jsfiddle.net/mMB3F/
It basically happens when I hover on the text.
This problem occurs because your comment div is inside the div that you are assigning the hover event. Note that the flickring occurs when you enter the mouse pointer in the highlighted area (red) showed in the image below (related to the comment div).
Take a look in this solution: http://jsfiddle.net/davidbuzatto/mMB3F/1/
The comment div has now a absolute positioning. When the mouse enters, the comment div will be showed next to the pointer. Off course, now you will need to change the code to fit your needs. Another way of doing this is to set an div container that encloses the #web div and to put another div next to it, seting them to float. Inside the new div you insert the div with the comment.
Update
My other answer was a little too grandiose, You just have to float your other div
#commentweb {float:left}
http://jsfiddle.net/mMB3F/5/
It needs to be asynchronous, the stop() is what causes it to blink, but you dont need a stop if you just wait for the fade to complete before you assign the event handlers.
http://jsfiddle.net/u7Q9P/1/
use jquery .mouseenter() and .mouseleave() to avoid that.
that way, you dont have to reposition anything in your css.
see my answer here for more detail

Trigger jQuery's hover() over anchor to show drop-downs within containing LIs?

I have a horizontal nav bar that is an unordered list with anchor tags. It currently uses jQuery's hover (mouseover and mouseout) to show drop-down navigation in each LI.
How can I make it so instead of triggering the drop-down when hoving over the LI it will be triggered when mousing over the anchor tag? When I changed it to the anchor the drop-down always disappears when mousing down over top of it, but it works fine when I set the LI to as the target for the hover() (I guess because all of the drop-down code is wrapped in the LI so the cursor is still hovering over the LI).
I need to set it up this way due to the design, so there isn't any way to change it. I need the hover() to be triggered just from the anchor and not the LI.
You could change the class of the LI by the hover code for the anchor. Change it back when you move off the LI.
The problem you're having, if I understand correctly, is that the dropdown closes before you get your mouse to it. This is probably because there's a gap between the anchor tag and the dropdown menu.
So how about, you change the opener to the a-tag, but then you add a little timer that keeps the dropdown list opened for one or more seconds even if you mouse out? Such an addition is nice to have later anyway, gets irritating if you accidentally mouse out of a navbar and have to go back because it closed.
Edit: Also, yes, JSFiddle it.
Try putting a span tag inside your anchor:
<a href='#'><span>test</span></a>
a span {
display: block;
}

Categories