jQuery: hide div on hover, stay visible on click - javascript

I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.
When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.
When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).
I thought this would be straightforward, but I can't get it to work.

with a little knowledge of your html, here's how I got it.
html
button
<div class="mydiv">some text in it.</div>
jQuery
$('.mydiv').addClass('hover').click(function(){
$(this).addClass('hover').fadeOut();
});
$('a.mybutton').click(function() {
$('.mydiv').toggleClass('hover').show();
// $('.mydiv').removeClass('hover').show();
}).hover(function() {
$('.mydiv.hover').fadeIn();
}, function() {
$('.mydiv.hover').fadeOut();
});
Crazy demo

Related

mouseout closes the trigger and not the target

I have set a popup to open at mouse over on an element. The popup should close when the cursor is off it.
For some reason the popup window closes when the cursor is right off its opener button, instead.
You can see an example here:
http://www.friends.wwz.co.il/Lab/Gefen/Generali/es/popup.html
Please try to hover with the mouse on the "lee mas" button. A popup will open. It should close at hovering off it. But instead it closes at hovering off the lee mas button, so it closes immediately.
Any idea where do I go wrong?
Many thanks in advance for you advice
The main problem is you are attaching hover events to the button. Once you hover out of the button element, it fires the hoverOut button.
So the ideal course of action can be:
Bind hover event to the button.
Once hovered, a pop-up is dynamically added.
Then, a hover event is bounded to the pop.
And the code of dissolving the pop-up is attached in the hover-out function.
So that when actually the cursor is hovered out of the pop-up it dissolves.
Apart from that, Just have a look at this fiddle. It has two hyperlinks for hover. The first is the one you are facing. The second one is the one you are looking for. :D
Code for it:
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
$("#theBox_2").slideUp(500);
});
});
body {
background-color: #eef;
}
#theBox_3,
#theBox_2 {
display: none;
border: 1px solid #000;
width: 200px;
height: 100px;
background-color: #ddf;
}
#toggleSwitch_j,
#StayOpen {
background-color: #cacaca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This layout will only keep the hidden div visible as long as you point to the link
<br>You'll never be able to reach anything inside the div
<br>jQuery Hover
<div id="theBox_3">Peek-a-boo!</div>
<hr>This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it. This would be handy if you need to put links or form elements inside the hidden div, instead of
just text to read.
<div id="StayOpen">
jQuery Hover
<div id="theBox_2">Peek-a-boo!</div>
</div>

Align slideToggle boxes to bottom of parent div

I have the follwing so far: jsFiddle
Just a small script that pops out list elements
$(function() {
$("li.content").hide();
$("ul.nav").delegate("li.toggle", "click", function() {
$(this).next().slideToggle("fast").siblings(".content").slideUp("fast");
});
});
I am trying to figure out how I can align the box that slides out when you click "about" to the bottom of the outer div as it is with the "contact" box. Contact should also stay pinned to the bottom as well.
Can I achieve this without having to modify the javascript purely by changing the css, or do I have to make different toggle functions for both boxes?
Thank you all, much appreciated.
All you have to do is add this to your .content.
jsFiddle
.content {
position: absolute;
bottom: 0;
}

Div button to toggle divs - Javascript/CSS

I'm trying to add a "back button" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of the map, the div is toggled with a div that is the image of the "zoomed-in" area which they selected. I want my back button to appear on top of this zoomed-in div, in the bottom right corner, and if the user clicks the button, the div will be toggled with the original Oklahoma map div.
Here's the code I've tried so far:
CSS:
#backButton
{
position:absolute;
bottom:50px;
right:50px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
height:50px;
width:50px;
}
.button
{
position:absolute;
bottom:100px;
right:100px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
cursor:pointer;
}
HTML:
<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
<div class="button"></div>
</div>
The button appears correctly, but it isn't functioning. I'm sure it has to do with onClick="#container.toggle();" but I don't know how to do it correctly.
Just for background information, the container is the original Oklahoma map and it is toggled off in my JS code ($("#container").toggle();) when I switch to a zoomed-in div.
EDIT: Ok, so I do have Jquery and I tried making a click event like my other toggle events:
$("#backButton").click(function(e)
{
$("#container").toggle();
$("#backButton").toggle();
});
--> I removed the onClick part in the div. The button will toggle off when I click it, but the container div (Oklahoma map) is not toggling back on.
As you are using jQuery (evident in your code)
Put this in your javascript:
$("#button").click(function(){
$("#backButton").toggle();// hide the div (assume you have it turned on somewhere
$("#container").toggle();) // show the other div
});
remove the onClick="#container.toggle();" from the markup
You want your onClick method to call a valid function such as abcMethod(). (Wherever your toggle code lives).

Implementing a hover info box

I have a calendar, and when the user hovers over a cell, a large-ish info box appears with details for that date. I am having some trouble though making the info box disappear when the user moves away.
I basically want it so that when the mouse cursor moves out of the calendar cell which is hidden by the info box it will disappear. But I'm having trouble with this because mouseenter and mouseleave get messed up by having the info box as the top element.
So I tried to get around this by using "placeholder" divs that are transparent, have the same shape and location as the calendar cell beneath it, and have a z-index of 1000 so they are above the info box. I then apply the mouseenter and mouseleave events to these divs instead.
There's two problems with this though. One, I have now messed up my HTML semantically. The divs have no purpose but to get around what seems to be a limitation. And secondly, they mess up my jQuery UI selection (I've applied it to the calendar cells - a click no longer selects a cell).
Is there a clean way to handle displaying an info box? There will be no user interaction with the info box -- it's just to display information.
EDIT: Here is some code:
<li>
<div class="day-content">
</div>
<div class="day-content-placeholder">
</div>
</li>
and CSS
li
{ position: absolute; width: 15%; height: 20%; top: ... left: ... }
.day-content
{ position: absolute; width: 100%; height: 100%; }
.day-content-placeholder
{ position: absolute; width: 100%; height: 100%; z-index: 1000; }
.popup
{ position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; }
and Javascript
var popup;
$('.week-content-placeholder')
.mouseenter(function()
{
popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this);
})
.mouseleave(function()
{
popup.remove();
});
That's not the exact code, but you get the idea. This works okay, but like I said, since .week-content-placeholder is above .week-content, the selection capability with jQuery UI doesn't work properly on .week-content.
You could modify your solution with the transparent "placeholder" divs in the following way:
Have the "placeholder" dive underneath the "calendar cell", using {zIndex: -1}.
When you enter a calendar cell, unhide the large "content" div and set {zIndex: 1000} on the "placeholder" div to bring it to the top.
Have a "mouseout" event on the placeholder div that will hide the "content" div and set {zIndex: -1} for the the "placeholder" cell.
Rather than create the "placeholder" cells in the HTML, you could create one in the javascript and move it to the postion of each "calendar" cell as you "mouseIn" it. You could also duplicate any "click" events on the "calendar cell" onto this one as well.
Let me know if this works.
The trick here is to make the info box a child of the cell:
<div id='box'>
Normal content
<div id='inner'>
This big box obscures everything in the cell!
</div>
</div>
The inner box is hidden until the hover occurs. Notice how with CSS we can make the box bigger than the cell itself with negative margins.
#box
{
width:100px;
height:100px;
margin:100px;
border:solid 2px darkblue;
position:relative;
}
#box #inner
{
display:none;
position:absolute;
background-color:#eeee00;
top:-10px;
left:-10px;
width:120px;
height:120px;
}
And you can use normal jquery hover because the hover covers box the box and it's child:
$('#box').hover(function(){
$('#inner').show();
},function(){
$('#inner').hide();
});
Here's it running:
http://jsfiddle.net/RbqCT/
You can create the info box dynamically as you do in your code.
Here's 15 different plugins that let you do this with jquery:
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
You could track mousemouse and use the offsetLeft + width and offsetTop + height of your hover trigger against the event.pageX and event.pageY to compare.
If you make this work as you described a tiny mouse movement that remains within the calendar cell (which is not even visible) leaves the popup in place, but a slightly larger movement that exits the cell makes the popup disappear.
The user sees only movement within the popup itself — small movement within the popup leaves it in place; large movement makes it go away.
I suggest triggering the disappearance of the popup on exiting the popup div itself. Any movement that remains within the "tip" panel leaves it up. I think that (1) this is better usability and (2) it avoids the whole problem with the obscured calendar cell event handling.
You could do that by adding a .mouseleave() handler to the div when you create it.

Hover over image to show buttons and don't trigger when hovering over actual buttons

I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>​
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }​
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)

Categories

Resources