This is simple but I just can't get this bug fixed. I have a div which is visible by default and hides on mouseover to reveal menu below it, but for some apparent reason, the visibility effect keeps on repeating itself rather than just on mouseover and mouseout.
I have used following JavaScript
$(document).ready(function(e) {
$("#butt").mouseover(function () {
$(this).closest("button").css("visibility","hidden");
})
$("#butt").mouseout(function () {
$(this).closest("button").css("visibility","visible");
});
});
the fiddle is here
when you mouseover the image in the fiddle it keeps on hiding and appearing...
The behavior of your fiddle is very logical. You try to hide something on mouseover, but when the item effectively disappear, the mouse is not on it anymore! So there is a mouseout! That's why it flickers, just try to implement behaviors that are a little bit more logical than that and you will not have that kind of problem anymore.
A sample that does not flicker:
$(document).ready(function(e) {
$("#butt").mouseover(function () {
$("span", $(this)).css("visibility","hidden");
})
$("#butt").mouseout(function () {
$("span", $(this)).css("visibility","visible");
});
});
http://jsfiddle.net/xMwCN/5/
I'm assuming this is because the mouseout triggers when the button is hidden, and because the cursor is still in the same place when mouseout triggers, it triggers mouseover. I suggest you wrap your button in a container and wire up the mouseover/mouseout on the container instead. Then you can hide/show the button inside. On your fiddle you're hiding the b and not the button. Perhaps instead of
$(this).css('visibility', 'hidden')
it should be
$('button', this).css('visibility', 'hidden')
I also noticed your css hover styles are affecting this as well.
You should use css attribute opacity instead of visibility otherwise the element wont be there anymore activating the mouse event again.
I have updated your Fiddle with the Gray Box going invisible on mouseover
But what you want to do here is this:
$(document).ready(function(e) {
$("#butt").mouseover(function () {
$(this).css("opacity","0");
})
$("#butt").mouseout(function () {
$(this).css("opacity","1");
});
});
And also your css was changing the display, witch was causing some visibility problems, you might want to change it to:
.info {
display: none;
}
Or otherwise check which element need to have the :hover property.
Cheers.
You need a fixed height for the panel. It is because the height of image is 400px, when you hover it, the image hide and show the menu. However, the menu height is less than 400px. Now you are not hovering the panel and show the image again and repeating the problem. The simplest fix is set height to the panel.
.panel { height:400px;}
.panel ul{ margin:0;}
Hope this can fix your problem.
If it is an acceptable solution, you can just do the following to avoid flickering:
$(document).ready(function(e) {
$(".panel").mouseover(function () {
$("#butt").css("visibility","hidden");
})
$(".panel").mouseout(function () {
$("#butt").css("visibility","visible");
});
});
This removes the text when you hover over the entire panel and then it appears on mouseout. You cannot hide a div and call mouseout on that div, the div with the hover must stay there the entire time to avoid flickering problems.
I got the answer which i was looking for, tnax everyone, because i was able to deduce the result by guidelines and answers which everyone provided.
As mentioned, my javascripts hides the div on mouseenter and makes it visible on mouseleave; when mouse is over it is hidden and browser understans this as mouseleave, therefore it was toggling continuously, visible and hide
The code thus now i did is
$(document).ready(function(e) {
$("#butt").mouseenter(function () {
$("#butt").css("visibility","hidden");
})
$("#info2").mouseleave(function () {
$("#butt").css("visibility","visible");
});
});
Thus mouseleave is on the div which is beneath it which i want to show on mousenter of the above div
Related
I made a fiddle here:
http://jsfiddle.net/RrxpT/
So the red box needs to be placed over the blue boxes when mouse is on top of them. As you can see it works, but I also want the red box to be hidden if it's not on top on any of the blue boxes.
I changed the code to:
if(box.is(':hover')){
// put red box on top
}else{
// hide red box
}
http://jsfiddle.net/RrxpT/1/
But it doesn't work very well :s
Do you have any hints?
Assuming I've understood the question correctly then I would stop using mousemove and instead delegate mouseenter and mouseleave event handlers to elements that should trigger the overlay:
$("body").on("mouseenter", ".Box", function () {
// Show the overlay
}).on("mouseleave", ".Box", function () {
// Hide the overlay
});
Because the overlay is then on top of the element it will not work nicely when you move the mouse around within the element itself. To resolve this you can add a CSS property to the overlay:
#over {
/* ... */
pointer-events: none;
}
Here's a working example.
Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?
Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/
You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});
Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.
You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.
You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.
Here is the page i am working with: http://jimeagle.com/new/music/
I want to make it so when you hover over a row the image shows and when you leave the row the image shows, but because (i think) the image is in the hover div, the image stays visible when you hover out of the row but over the image.
I tried to move the image out of the hover div but it caused some horrible flickering because when your over the image you are no longer over the hover div.
Any way around this? Thanks.
Get the height of the div with the class "music_row". If the mouse y-position (on mousemove) is higher then the calculated height, hide the image.
$(document).ready(function() {
var iHeight = $(".music_row").height();
$(".music_wrapper")
.mouseover(function() {
$(this).find('.image').show();
})
.mousemove(function(o) {
if (o.layerY > iHeight) {
$(this).find('.image').hide();
}
})
.mouseout(function() {
$(this).find('.image').hide();
});
});
Also see my jsfiddle.
Because the image is a child of the element you bind the handlers on, it will prevent the mouseout event being triggered unless the pointer also leaves the container, .music_wrapper in your case.
To work around this, you could create an absolute positioned 'ghost' element with zero opacity and use this for triggering your hover events. Something like this:
$(function() {
$('.music_wrapper').each(function() {
var ghost = $(this).find('.music_row').clone();
ghost.css({opacity: 0, position: 'absolute', overflow: 'hidden' });
ghost.hover(
function() { $(this).parent().find('img').show(); },
function() { $(this).parent().find('img').hide(); }
);
$(this).append(ghost);
});
})
Not tested, but this should recreate your .music_row div element in every .music_wrapper, set some css properties, bind the hover handlers and append it to the wrapper element.
Now image and hover element are seperated, which can hide the image even when the mouse is still over it.
I would suggest not doing this, actually. I think the intuitive thing is that when you hover over the number / text the image pops up, but moving your mouse inside the image shouldn't do anything.
How about just moving the images to the right a little so that the big numbers are still at least partly visible? Then it would feel natural to move over to the next # to see the next image.
So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});
Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});
This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});
I've got a really strange jquery behavior. I want to make a grid like background with animated tiles (opacity to .8 and back to .25 on mouseover and mouseleave).
As this should be my background it should'n have an impact on my content div.
Unfortunately it doesn't work as expected. THe content div(Which i colored red for testing purposes) gets animated, too.
Here's a link the the site.
Part of the problem could be that, when you mouseover the background tiles, the event is bubbling up to the content div. You could try doing this somewhere in your event listeners:
e.stopPropagation();
I'm adjusting your code to use the .hover() event instead of juggling mouseover/mouseout, also I'm using fadeTo instead of manually animating opacity.
$(document).ready(function() {
$('#page-bg ul li img.keyword').hover(function(){
$(this).fadeTo('slow',0.8);
},
function() {
$(this).fadeTo('slow',0.25);
});
...
});
The content div is not animated, but the page-bg div is on the top of the content (because of absolute position), so when you change opacity, the content div (in the background) is getting visible...