Demo: http://jsbin.com/afixay/3/edit
1) place cursor over red box
2) don't move cursor, just hit ctrl+r (page should be reloaded)
3) you'll get no alert.
Well, you will get an alert once you unhover/hover it back. The problem is, when cursor is placed over red box on a page load, hover event is not fired (also no mouseenter).
How do I fix this?
I know, browser's work seems to be true, but I really need to know if an element is hovered, even on page load.
$(function() {
function hovered(e){
e.type == 'mouseenter' ? alert('on') : alert('off');
}
$('.box').hover(hovered);
});
You aren't going to be able to do this, not with pure JS anyway.
You cannot get the mouse position manually on initial page load until there is an event fired. X and Y positions are 0. So there's no way to tell if the mouse is already over your element.
No mouse events are fired until it moves. You could listen for mousemove to immediately respond, but that still doesn't give you what you want.
The CSS trick that was pointed out in the comments is the closest you'll get, but it's hardly a solid solution.
Related
So I have an element behind another, but it's still visible(its covered only partially by the element itself, but is otherwise completely covered by the margin attribute of the element above). I want to trigger a mouse event when I mouse over, but it doesn't get passed to it because of the element in front. I know how to calculate if I am over it and how to point to it, but I don't know how to send it the event onmouseover or hover or onmouseout.
If it helps I would be pointing at it by using document.getElementById("<calculated id>"). I know this works because it's ID is based off of its location within a grid, so I just have to calculate the position of the mouse and relate it to the grid.
Also the event that is supposed to happen(but isn't because of the things in front of it), is a :hover that triggers a simple transition animation via CSS.
document.getElementById('elementInFront').addEventListener('mouseenter', function(){
document.getElementById('elementBehind').DoYourStuff();
});
Does this work? I'm not sure if I understand your intention.
var item = document.getElementById("CalculatedId");
item.addEventListener("mouseover", func, false);
function func()
{
console.log("Hovered");
}
You can use the css property
pointer-events: none;
On the top element. This will allow all mouse events to "fall-through" to the element in the back. Unfortunately this doesn't work in IE, the only simple alternative for that is to make the front element's background transparent
Interesting glitch. It turns out that if you try to use CSS to style the cursor (as in to hide or use a crosshair cursor), when you fire an onmousedown event, the cursor is changed to a text cursor.
Here's a code snippet from the Experiment where I noticed this:
mouse=[[0,0],false];
snap_mouse_by=10;
canvas.onmousedown=function(evt){
var X=evt.clientX,Y=evt.clientY;
mouse[0]=[X-X%snap_mouse_by,Y%Y-snap_mouse_by];
//set mouse coordinates
mouse[1]=true;
//set mouse is down to true
}
Along with this, a self-executing function runs and checks for the mouse coordinates and whether the mouse is down or not. Based on this data, it draws a box.
Of course, when I hit the mouse button, the cursor's style goes to text instead of doing nothing.
No need to answer this question, answer is below.
I did a quick google search to see if I was doing the CSS wrong, or if there's a documented bug.
I found nothing, but then got an idea that should seem pretty obvious.
canvas.onmousedown=function(evt){
...
evt.preventDefault();
return false;
}
I tested that out to see if it was a browser function causing the CSS inconsistency, and it worked like a charm, I now have full control of the cursor's style.
Here's the link, if anyone's curious.
Just thought I'd share this in case anyone else runs into this glitch.
Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.
Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.
Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc
I've been working on making a change to the jQuery add-on tooltipsy so that it locks on-to the mouse.
Getting it to do this is a simple task, all you have to do is change the showEvent to 'mousemove' however, because that is the show event, every time you move the mouse it has to redo the entire tooltipsy function for every pixel you moved, so the box doesn't keep up properly with the mouse.
Also, because of a problem with the lagging box and mouseleave, the box doesn't usually hide properly on mouseleave (because the function as to be run for every pixel your mouse moves so it's still computing after you mouseout)
This problem would ordinarily be easy to solve. All you would have to do is split the show hide and move into three different events. (mouseenter, mouseleave, and mousemove respectively) however, getting this to work in the context of tooltipsy is a much more complicated matter.
Here is the example:
http://jsfiddle.net/MarkKramer/HwpEs/2/
Notice how on the third div I got it to follow the cursor, but it is using mousemove as the showEvent, when really mousemove should only be used to get the coordinates of the tooltips.
If someone can solve this I will be very grateful.
Update: I tried putting if alignTo = cursor in a mousemove, which would work except that the function messes with the variable's scope.
That plugin seems to be way too complicated if you want basic tooltip behavior.
The code for a tooltip like that is quite simple:
$('#tooltip-container').mousemove(function(e) {
$('#tooltip').css('left', e.pageX + 20);
$('#tooltip').css('top', e.pageY + 20);
});
$('#tooltip-container').mouseleave(function() {
$('#tooltip').hide();
});
$('#tooltip-container').mouseenter(function() {
$('#tooltip').show();
});
If you want a live demo, here ya go: http://jsfiddle.net/DR4Wv/6/
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();
});