I have menu links on a page that lie across the top horizontally.
When I hover on a particular link, a div appears below it showing child divs. for this I used jQuery hover function.
Now, when I mouseout of the link, the div that appeared should dissappear, I used mouseout function to do that.
My problem is, when I am leaving the link to go into one of the child links, it should not dissappear. How do I achieve this?
as I move my mouse towards the child links, as soon as I moouseout of the parent link, the child div dissappears.
You can give them(menu and layers) the same class.
Sample code:
<div class="menu keep">
<div class="layer keep">Layer1</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer3</div>
</div>
and in JQuery:
$(".keep").on("mouseenter",function(){
$(".layer").show();
});
$(".keep").on("mouseleave",function(){
$(".layer").hide();
});
Related
Given 2 divs, both of which are auto scroll.
I want to be able to drag an item from Div1 into Div2, or internally within Div1.
Items will never be in Div2 - the drop event on Div2 will take care placing it into the correct place on Div1
So far that's easy enough but here's the snag - Div2 needs to be able to scroll vertically while dragging.
I can't find anything in the jQuery draggable that helps here so I tried to create my own hover regions which cause a scroll on Div2. This works when not dragging but not while dragging. I suspect jQuery is stealing the event causing mine not to fire.
html:
<div id="Outer">
<div id="Div1">
<div class='Item'></div>
<div class='Item'></div>
<div class='Item'></div>
</div>
<div id="Div2">
<div class="ScrollUp"></div>
some long content that causes a scrollbar
<div class="ScrollDown"></div>
</div>
</div>
css:
#Div1, #Div2
{
overflow: auto;
}
javascript:
$('#Div1>.Item').draggable({appendTo: $('#Outer')});
$('#Div1').droppable({tolerance: 'pointer'});
$('#Div2').droppable({drop: Div2Drop});
function Div2Drop() {}; //function places the item into the approriate place in Div1
$('#ScrollUp, #ScrollDown').mouseenter(function(){... }); /* These 2 events don't */
$('#ScrollUp, #ScrollDown').mouseout(function(){... }); /* fire when dragging */
Div1 also needs to be scrollable when dragging internally.
How can I make the events fire, or is there a better way to do this? (Perhaps something internal to the draggable and droppable interactions that I missed?
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 }
I want a layout the was showed in the following demo
http://jsfiddle.net/EX6qV/2/
<div class='container'>
<div class='one'> One </div>
<div class='two'>Two</div>
</div>
Here the div one has position:fixed. I want to scroll the fixed div (One) if scrolling happens.
Due to the fixed position the div sticks at that position hence it overlaps with div two if scroll happens on zooming a page.
Is the any jquery methods to overcome this problem.
I want to implement a simple slide up and slide down mechanism for revealing content on the press of a button. Using the out of the box jquery functions slideUp() and slideDown() squishes the content. I want the slide mechanism to be similar to the one used in twitter (in the timeline when you click on a tweet, more info and options slide down). There the content does not get squished. Instead the bottom border seamlessly moves over the content thus sliding up without squishing. Any pointers on how to implement this?
Edit:
The content to be slided into and out of visibility is inside a div
<div id='container'>
<div id='slider'>
<div> other content </div>
</div>
<div id='button'>
Click to slide
</div>
</div>
I listen to the click event of the 'button' div
$('.button').click(function(){
if($('.slider').is(":visible"))
{
$('.slider').slideUp();
}
else { $('.slider').slideDown(); }
});
This is a basic slider. The contents inside the 'slider' div get squished and distorted when animating.
try this demo
$(function(){
$('#button').click(function(){
if($('#slider').is(":visible"))
{
$('#slider').slideUp();
}
else { $('#slider').slideDown(); }
});
});
Ok what I want is when the user moves the mouse pointer over a certain div it should appear. And when the mouse leaves the div that div should disappear. This is what I have done so far.
<div id="center" style="position:absolute; left:45%; top:35%;" onMouseOver=" document.getElementById('center').style.visibility = 'visible'" onMouseOut="document.getElementById('center').style.display = 'none'">
But my problem is that when the mouse leaves the div it disappears but when I again go over the div it does not appear. How can I fix that ?
When you hide the div, you will not be able to mouseover it again. That is usually the point of hiding an element, so that clients cannot access it. One thing you can do is add a container and attach the mouseover event to the container.
<div onmouseover="document.getElementById('center').style.visibility = 'visible'">
<div id="center" onmouseout="this.style.visibility = 'hidden'">
</div>
</div>
Try like this:
<div id="center" style="position:absolute; left:45%; top:35%;background-color:#03C;width:400px;height:400px;opacity:0;" onMouseOver="document.getElementById('center').style.opacity = 1" onMouseOut="document.getElementById('center').style.opacity = 0">
I added a background color to the div and some dimension because if the div has nothing inside and no costraints for the dimension it collapse.
Hope this is useful