I have a .hover() action assigned to an element to hide/show something depending on the cursor being over it. The problem I am running into is that when the page loads and the cursor is OVER the element it doesn't register as being over because its not firing the mouseenter event.
Is there a another way to tell if the cursor is over a desired element?
Using the mouse position on page load you could call
var currentElement = document.elementFromPoint(x, y);
then if the element found at that position is the one with the hover event. You can trigger that hover event manually
$(currentElement).trigger('hover');
If you hide the element(s) until the page is done loading and then show them all at once, will your mouseover event now fire?
<div id='allmyelementsinhere' style='display:none'>
then use javascript to remove the display:none on page load.
I'm thinking that your mouseevent will fire as soon as you display the elements.
I also had this issue with next and previous navigation buttons that navigate between consistently designed pages.
A user would click next to go to the next page, and because their mouse was in the same position on the page load of the second page, they were able to click next again to continue navigating through the collection of pages. Essentially a convenient next/previous UI.
Except of course that the hover state didn't display on page load for the second and subsequent pages.
So I added a url parameter (action='next or action=prev) and then on load I put the next or previous button into the hover state if the relevant url parameter is present. If the user has somehow moved their mouse and isn't over the button then you do get a button incorrectly in it's hover state until the first mousemove event.
It's not perfect and it only suits this specific circumstance where a user is using a consistent UI within pages on your site, but as this sort of UI is a fairly common - especially in blogs/galleries I though I'd mention it.
Here is the jquery method to track mouse position starting from page load.
(function($) {
$.mousePos = {x: 0, y: 0};
var recordPos = function(e) {
$.mousePos.x = e.pageX;
$.mousePos.y = e.pageY;
};
$(document).mousemove(recordPos).mouseover(recordPos);
})(jQuery);
This will populate $.mousePos.x and $.mousePos.y as soon as the mouse starts to interact with the page.
Script to get mouse coordinates on load
Related
I want to trigger a function if a user clicks anywhere on the page, even clicking on no element or link. Is it possible?
The extension runs only on youtube.com so I can't add every element on the page to the trigger and I assume that every page has different element's ids.
Emmanouil Chountasis is correct, you can use the code at "Detect left mouse button press" to detect a left mouse click crossbrowser.
To the heart of your question, I think what you're looking for is Event Delegation. In jQuery,
// Select a wrapper for the events
$('body')
// Whenever any element in the <body> is clicked
.on('click', '*', function (evt) {
// Emmanouil Chountasis's suggestion would be called right here
if (isLeftClick(evt)) {
// ... do stuff
}
});
See http://learn.jquery.com/events/event-delegation/
Reed's answer works fine, but it triggers the action multiple times. I found this solution that only works on left mouse triggers and executes once per click.
$("body").unbind().click(function() {
//Do Stuff
});
I need to check in my javascript code which mouse buttons are pressed. It's not so hard to do but I need to check it when a page is just loading and no mousedown event was fired in that page yet. For example when onload event is fired. Is it possible? It can be done with jQuery too if it wouldn't be done only with javascript.
JavaScript does not provide mouse button state query outside of event handlers.
But in principle you can check if body is in :active state thus has mouse pressed on it.
console.log($(document.body).is(":active"));
I believe if you need to get clicks before the page finishes loading (and after) you could do it using load instead of ready.
$(document).load(onLoad);
function(onLoad){
$('body').mousedown(function(event){
var mouseClick = [];
mouseClick.push(event.which);
});
}
or whatever mouse click tracking code you need.
Background:
I'm helping an old friend who has a mixed media slideshow, and one of the slides is an iframe embed of a lytro camera image (it's interactive and you can click or tap on mobile to change the focus).
Issue:
The issue that I'm having is that when you interact with the iframe, it steals keyboard focus on desktops and that prevents the arrow keys from allowing you to change slides.
What I've tried:
My main attack angle on this had been trying to use jquery to set a timer that periodically sets focus on the parent document, to remove focus from the iframe and allow the keystrokes to be captured properly. I've noticed that if I click anywhere outside of the iframe then I can use the arrow keys properly.
Here's my jquery code, along with comments about why I tried each method. Unfortunatly nothing has worked (I've also tried including the lytro image with an embed tag instead of the iframe tag with no change in results).
<script>
//make sure body maintains focus, so that swipe and arrows still work
function focusit(){
$('#focushere').focus(); // this is a div on the main page that I tried to set focus to
$('body').focus(); // tried moving focus to the body
$('embed').blur(); // tried bluring the embed
$('iframe').blur(); // tried bluring the iframe
$('body').click(); // tried faking a click on the body
$('#focushere').click(); //tried faking a click on a element
$(document).click(); // tried click on document
$(document).focus(); //tried setting focus to document
}
setTimeout(focusit, 100);
</script>
Your issue seems to be two-fold.
You are using setTimeout which will only run your callback once. I think you mean to use setInterval, which will repeatedly run the callback.
You can't set focus to document using the focus method natively or in jQuery. In order to restore focus to the body, you should call the blur method on the currently active element using document.activeElement.
Example:
function focusit(){
if(document.activeElement)
{
document.activeElement.blur();
}
}
setInterval(focusit, 100);
CodePen Demo
On - window.location.hash - Change?
The above question talks about hash change while this question talks about callback whenever internal link is clicked
I have many links in a page that points to another location in the same page using # links. Whenever, I click one such link, the page scrolls to that location. But I need to adjust the scroll manually after the automatic scroll happens. So would like to know if there is any callback function for such events?
Also the event should fire if the # tag was present in the initial page load (not only when it is clicked with a link) and when the same link is clicked again (hashchange event won't fire in this case)
You can register one by calling this function on the element:
addEventListener('click', function(){/*update your stuff here/*});
in jQuery, it's even easier
$('a').on('click', function(){/*update your stuff here/*}); will update after every link click.
There is no specifica callback that I know of but you could bind a function to the window.onscroll (https://developer.mozilla.org/en-US/docs/DOM/window.onscroll) event. That will detect when the window has been scrolled by the links being clicked and will let you make your adjustments. Then only problem is that it will also fire off when a user scrolls the page normally.
Other than that you would add a class to all your # links that will allow you to detect when one has been clicked. In jQuery:
$("a.HASH-LINK-CLASS").on("click", function (event) { ... });
I have an image+text slider with recent blogposts which loop through the recent posts whilst a vistor keeps looking at a certain page.
You can see all the code on http://jsfiddle.net/GsgPM/16/
It is about the big image + text slider where it doesn't fire.
THe event does fire on the pink button.
Does not compute for me really... why does it work for the one, and not for the other?
Now I want to redirect people to the right blogpost with an onclick event on the containing div(slider) with the black borders.
The only puzzling thing is, the click event doesn't fire, nor does the cursor get changed to the right image(a hand) as defined in the css stylesheed, but the 1px border does get added.
On a test div, in my code on http://jsfiddle.net/GsgPM/16/ below my trouble code it does fire.
On another page of my blog I have no issues at a ll with the click event.
when I view the code changes in google chrome inspect elements window the click event does get transported on the div changes.
JSLint shows no errors, my console doesn't show any errors either. The entire event simply doesn't fire.
Who knows what the underlying cause is for this problem?
The problem is the shadow div. When you click on your slider, the click is registered on the div with id="shadow". Try to remove that div, and then it works. If you need that div, you have to make sure it is below the slider divs.
In your code you have
onclick="window.alert('Hello Raxacoricofallapatorius'
your missing a ); so it would be
onclick="window.alert('Hello Raxacoricofallapatorius');
A more Jquery way to react to click on img is to use on
$('#smallphotos div').on('click','img',function() {
alert('here');
});
to further this you could store the target on a data attribute like
<img src="http://www.freedigitalphotos.net/images/gal_images/av-_50.jpg" title="test2" data-target="www.google.com" />
which could then redirect your page like so.
$('#smallphotobox').on('click','#smallphotos div',function() {
window.location.href=$(this).data('target');
});
Also #slider is in the way you will notice i removed it and everything works.. try setting its z index to be behind the rest.
NOTE this wont work on jsfiddle due to restrictions.
fiddle