Capturing mouse event data outside an iframe - javascript

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.

Related

Click on coordinates

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();

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?
Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars
Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()
For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

Iframe stealing mouse events

I'm using a Javascript scroller class on a site that seamlessly takes care of adding a scrollbar to all predefined elements on the page that have overflown content. The client has recently asked that one of these elements contain an iframe so they can easily add interactive content to this area. (I know I know, iframes, but I'm a subcontractor on this job. Not much pull.) Fortunately the content of the iFram is being pulled from the same domain, so I'm able to resize the iframe once the content loads, in turn firing the Javascript scrollbar. In the end it works beautifully—in Chrome.
In Explorer and Firefox the iframe seems to be stealing mouse events as soon as the mouse is over the iframe. So the mousewheel event no longer works. You can still drag the scroll handle to scroll, or click anywhere on the scroll track, but using the mousewheel does nothing. It doesn't even fire the event.
I've seen that others have had similar issues, but haven't found a workaround. Anyone have any suggestions?
Here's the Scroll class for good measure: http://hastebin.com/xisidogiju.coffee
Appreciate any help I can get!
Mouse events are tied to windows, iframes are windows. Its a miracle this works in webkit browsers as you say.
You need to pass the eventListener and perhaps eventHandler between your parent window and the iframes when the mouse moves into them.
Some reference about passing objects between iframes: http://www.dyn-web.com/tutorials/iframes/refs.php.
I could just manage to overcome this problem. You can check the solution mentioned in the jsfiddle mentioned below.
http://jsfiddle.net/6nnMV/358/
Here, I have created a event to listen to the mouse scroll and have binded the event to the iframe.
You can then scroll the parent window or element by using the scrollTop property like
$(element).scrollTop($(element).scrollTop+(number of pixels));
This will only work when the iframe you are accessing is in the same domain.

Prevent scrolling in IE when flash has focus

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 :)

jquery scrolling help

Is it possible without the help of a plugin to make a page scroll to a certain position on the click of a button?
Basically, if the user clicks a button a popup gets displayed in the center of the screen, if the user uses the button at the bottom of the page, the popup is sometimes out of view so I am wanting to couple the showing of the popup and scolling to the top of the popup on the clickup.
Is this possible?
Thanks
Using the CSS
position : fixed
is the best bet for your problem.
In case if you would like to know the way to scroll the page to certain position using jQuery then here it is.
Use jQuery's scrollTop() function in the following way.
jQuery(window).scrollTop(<position>);
Using jQuery to handle scrolling will also resolve any browser incompatibility.
You can get that effect with the scrollIntoView method. But it's probably better to centre your popup on the window rather than the document to avoid the problem in the first place ...
Sometimes lean and mean works nicely. No Plugins, No JQuery:
window.scrollTo()
Watch out for cross browser incompatibilities that might creep in. That's the point of JQuery ;)

Categories