Hack for `mouseup` outside of window in IE 7/8 - javascript

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!

Related

Detect User Mouse Moves Outside and Inside the Browser

I want to detect user if he is not using his computer by tracking mouse events? Do you know How can I achieve this using JQuery or Javascript?
Not sure tracking mouse movements outside the browser is possible. You track this type of thing by using event listeners and mounting the listener to an html element. in your case you would mount a mousemove listener to the window to track movement across the whole page. But outside of the browser window their is nothing that JS can mount an event listener to their for leaving no option to track mouse movement outside the browser. (could be wrong though, seems creepy if its possible)

Is there a way to detect if the browser window is visible to the user?

Is there a way to detect if the browser window is visible to the user? I know this has been asked before. However, the answers I have seen suffer from the following problems:
Using visibilityChange event. The problem with this approach is that (at least on a Mac) when one uses cmd+tab to switch between applications, this event is not fired.
Using onBlur and onFocus events. These solve the above problem. However, these also fire when a page's visibility does not change. For example, if the browser is open in one half of the screen and another application is open in the other half, then switching between these will cause these events to fire; even though the user has the browser window visible all the time.
Using onPageShow and onPageHide events - these appear quite useless for the task of visibility. For example, onPageHide does not fire either when the page is minimized, or when cmd+tab is used to switch to another application that occupies the whole window.
What is the ideal solution for checking whether the page is visible to the user given the above issues?
Thank you.
Could you use setIterval polling and document.hidden?
nice wrapper Visibility.js

How can it be detected when the mouse cursor leaves the webpage if the cursor doesn't touch the edge?

I'm looking for a non-JQuery solution for a seemingly simple task: Detecting when the mouse has left the page. BUT, standard methods using:
document.onmouseleave
//or
document.onmouseout
will only work if the mouse leaves the page via the edge.
That means it will fail if the mouse leaves by crossing over into another program that has a higher focus (eg: Notepad.exe).
It will also fail if the browser is minimized (eg: Win+D), or if Alt+Tab is used.
There are probably other ways it will fail.
What other methods are there that have a better success at detecting the mouse leaving? Perhaps even through polling?
This must work in Chrome+Windows, but ideally any modern browser.
Update:
dman2306 has linked to some methods for detecting when the browser is minimized, including:
document.addEventListener("visibilitychange", function() {
doThings();
}, false);
I just verified that works in the latest version of Chrome on Windows 8.1.
That that just leaves the issues of the cursor exiting via another Window's edge, or via Alt+Tab.
There is an event onblur which does what you want.
window.onblur = function () {
console.log('blur');
}
You can add to you solution another handler for onfocusout event, that will detect if another program got focus or if the window was minimized.

Dragging divs from one window to another

I have window with some divs that are draggable. I also have a second window that I created with window.open() that has divs that are draggable. Is it possible now to drag a div from one window to the other?
Thanks
Take a look at this tutorial for the DnD part.
To achieve this, it's possible to pass a temp value that both sending and receiving window can read. It could be a cookie, or a better idea could be to use localStorage if it's available, as some people voluntarily block cookies for more privacy.
Using the Modernizr's fallback test, it could goes like this:
if (Modernizr.draganddrop) {
// add drag and drop support
} else {
// custom drag and drop support or suggest the user to get a real browser (if possible)
}
Whenever a drag is started :
if (Modernizr.localstorage) {
window.localStorage['item_1_drag_started'] = true;
} else {
document.cookie = "item_1_drag_started=1";
}
Then, when drag is over / mouse is up :
if (Modernizr.localstorage) {
delete window.localStorage['item_1_drag_started'];
} else {
document.cookie = "item_1_drag_started=0";
}
Now, when the mouse enters the other window, you may check if the item was still being dragged by accessing localStorage (or the dirty cookie if it's unavailable).
The only issue I can think of is when the user releases the mouse button while between those windows. That could be a problem, since the item will be considered dragging but you can't release a button that isn't pressed. Does anyone know about a trick to check if the mouse button is still pressed when entering a window even if it doesn't fired the event ?
In the meantime, the click event in the receiving window could simply check if it's still dragging then drop the item and remove the flag.
UPDATE: Concerning the mentionned issue, after digging a little and doing some test with events it seems that neither mouseover or mousemove is fired when a mouse button is still pressed (at least in Chrome where my tests have been made).
With that in mind, I think that the best approach to Drag and Drop between two windows is to toggle it:
Click --> Drag is started
Click again --> Drop the item
From the answers provided I can see now that dragging between windows is really ugly. You have to basically transfer the mouse state from one window to the other and inject the element being dragged into the DOM of the destination window. I was hoping there was some jQuery around that you could run in both windows that would smooth all that over, but I guess not. I just won't do the drag in this project. I can just allow the user to click an element in the second window and have it appear immediately in the first window. Good enough. Thanks for looking at the question.
I guess you could set a variable "drag item = true" and store the item content somewhere. Then drop it on the mouse up in your popup.
What you could do is on drag being, set a cookie and on mouse over the target window, check for the cookie and simulate the drag.

Firefox extension: observing "user-interaction-inactive" across multiple browser windows

I'm trying to observe within my Firefox extension when a user is inactive. My current solution is derived from a similar question, found here (see accepted answer). And it basically works just fine.
I noticed, however, that it doesn't seem to distinguish between multiple open browser windows - that is, a user cannot be active in one window and inactive in another one. At the moment the active/inactive state is some global state across all Firefox windows. Thus, a user becomes really inactive, if the user is active in all open browser windows
Is there a way to distinguish between different windows, or do I have to deal with it (wouldn't be to bad, but still...)? Thanks a lot for any hints on that!
This is something that you will have to implement yourself. It also largely depends on what you mean by "inactive in a particular window". I guess that you mean the lack of mouse and keyboard activity in this window. So you would have to add a listener for keydown, keyup, mousemove, mousedown, mouseup, DOMMouseScroll, touchstart, touchend, touchmove events. The listener for these events would set a timeout, e.g. for one minute. However, it would first clear the already existing timeout if any. This way the timeout will fire one minute after the last event received, one minute after the user stopped generated keyboard or mouse events in the window.
The subject parameter the observer passes should be the window of the currently active browser window.

Categories