I'm trying to figure out how to click some coordinates of the webpage after it is being loaded (lets say x:250px && y:500px).
By native click i mean a real life event, like i use my mouse to click an image
or a link or whatever i want.
Is there anyway of doing it?
Thanks a lot for your time.
You need to check what your browser support requirements are, but this should work for most modern browsers:
document.elementFromPoint(x, y).click();
Related
I understand the event mouseup for the window just isn't there for IE 7 and 8. I was wondering if anybody has found a work-around for this or if that is even possible.
I am currently working on a project where the user can click, drag to draw a line, and if the user drags outside of the window and lets up on the mouse, the drawing transaction will be cancelled.
Your difficulty sounds like it would be more from the window losing the scope of the event.
Are you using jQuery? With jQuery you can also tag onto the mousemove event and use the "which" attribute to detect if the button is pressed. This even fires when you come back into the window. But it DOES NOT fire when you are outside of the window.
Alternatively you can use $(window).mouseleave to detect when it leaves the window. However once it has left the window you cannot detect further mouse events (that would be a horrible flaw if they could detect when you right clicked on your desktop etc).
So you are somewhat limited by the browser security implementations in ALL browsers and won't be able to bypass that... but you can add some work around events to provide a "similar" experience.
Not directly, but I believe this should work.
In your mousemove event, check the Event.buttons property. If it is zero, then the user must have released the mouse outside the window and you can cancel the drag.
I am checking the browser compatibility of this now, so this answer may be edited. My computer's being slow right now!
I have made an image gallery in HTML5, JavaScript and CSS by using jQuery mobile. IE Phonegap platform ok.
The images are coming dynamically and are loaded in it, like this:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html
Above mouseSwipe Slider:
TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com
The problem coming with it is that I cannot click on the image and go to next page, because two events are occurring together.
The second problem is that I cannot swipe the page up down, from the place where gallery is placed, except the other area where gallery is not present.
To make it more clear, I am making news application in which I have added 5 - 10 gallery like Pulse news application.
I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.
This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.
I assume this is also what is giving you trouble for clicking to go to the specified page.
If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html
For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).
In the file http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown function has the code below. This will stop the event from the default behaviour and in cases stop captured/bubbled. You may want to look at these or the way event are being handled by the libraries.
e.preventDefault()
Here is more on how to stop JQuery propagation and regular behaviour.
event.preventDefault() vs. return false
What is event bubbling and capturing?
The reason you cannot swipe up and down is likely due to that the "swipe" event is hogging the "movestart" or "move" event.
I ran into a similar problem once when using this plugin:
http://stephband.info/jquery.event.swipe/
Their solution as pointed on on their website was to call the preventDefault method on the event to keep it from blocking as seen here.
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
I have no experience with jQuery mobile, but i would reckon the problems are similar.
I have a project where users can interact with a carousel like slide show, and drag between slides instead of using an arrow/number navigation. JS is based on the following plug in:
http://nooshu.com/explore/jquery-iphone-animation/
The issue is, in IE, if a user grabs inside the carousel and the mouse leaves the container element, the UI freaks out. If you play around with it, you'll see what I mean.
Is there a way to tell IE to handle the drag/click event to mimic firefox and chrome? I'm sure this is a common problem with IE and UI design.
Help!
EDIT: This also happens in Chrome. Firefox is the only browser that handles this in an intuitive way.
When, in IE, the mouse leaves the square, it's not releasing the mousedown event. So even when you let the button go, the plugin still thinks that the mouse is down.
Is it possible then that you wrap the plugin in say a div and on the div have a mouseleave event and force the plugin to execute mouseup?
I think you should be able to use the jQuery keyword "trigger" to do it.
I have a web page where users can play flash games. We are now making some changes to the page which requires the games to be embedded with wmode=transparent or wmode=opaque so that we can show HTML elements on-top of the flash games. The problem is that in Internet Explorer (on all versions) the whole page scrolls if a user presses the up/down arrow keys. I've tried everything I can think of and I've spent a whole day searching for a solution without success.
So far I've tried putting the game inside a iframe and I tried disabling the up/down keys with JS, none of which solves my problem.
The requirements are: wmode has to be transparent or opaque and I can't modify the flash games.
The only way to prevent scrolling when using wmode=transparent in Flash is to prevent scrolling using the arrow keys for the whole page. This page summarizes it best.
Basically, when transparent mode is active, the keyboard events in IE are propagated through to the browser; I don't know how to prevent scrolling (haven't tested), but you'd basically have to prevent keyboard scrolling globally.
This discussion highlights a possible workaround for IE8, and an example of the implementation using jQuery here. I don't have a copy of IE on me right now, but it might be worth a try.
AFAIK, though, games in Flash usually don't work very well with wmode=transparent, since focus can be stolen without user interaction. Your best bet would be reworking the page so as not to require Flash to have HTML overlays (even YouTube avoids having transparent set on their page, and they own the whole content).
The user needs to focus the flash movie first before any key actions are intercepted. This is actually a good behaviour, and shouldn’t be changed.
It would be a good idea to somehow ask the user to focus the movie voluntarily, maybe by putting a bit start button on it which they need to click first. Then all key actions should be sent to Flash.
How about some JS magic, if it works.
http://api.jquery.com/keypress/
http://api.jquery.com/event.preventDefault/
Register a KeyPress event handler on the object/embed tags. Let's say you have flash object with id #flashobj
$('#flashobj').keypress( function(event) { event.preventDefault(); } );
Or, more tricky, if the binding on flash object/embed wouldn't work, you can bind the keypress on the whole window, and check something along the lines of:
if (event.target.tagName.toLower() == "object") ...
Mileage may vary, as I remember it event.target is not very reliable...
Hopefully, flash will catch the keyboard event, and the page will ignore it. I know you said you tried it, but your approach might have been different (I suggested two distinctly different ways to do it, one might work)
It seems that there is simply no way around this. We will just have to accept the fact that HTML stuff (FB like chat in our case) will hide behind flash games.
But I still hope somebody proves me wrong :)
I am working on a Facebook app and have run into a situation where being able to capture whether or not the mouse has left the app's iframe would be really great info to have. I've tried playing with window.blur() and window.focus() in jquery but (for reasons regarding how my content renders at the moment) this only works in Firefox. I have considered using mousemove() to capture the x and y position of the mouse but it would appear that once the mouse leaves the iframe I'm out of luck.
tl;dr I have an iframe that I have control of and a page it's embedded into that I don't. I need to capture the mouse movement/click/whatever outside my iframe and want to know if that's actually possible. Thanks!
I went with a combination of Martin and qwertymk's solution to the issue. I'd check you guys off as answering the question but since you can't approve of comments this will have to do. Thanks all.