Detect window mouse leave on TideSDK apps

Question

I'm developing my first app using TideSDK. I have some toolbar-like buttons, and I want them to fade out when mouse left the window.

Unfortunately looks like TideSDK does not fire mouseout or mouseleave events on window object, and I cannot detect it using mousemove because obviously mousemove events are not fired when cursor is out of the main application window.

I didn't found any mouse related event for Ti.UI.UserWindow in TideSDK official documentation.

Anybody got some ideas?
Thanks.

score 2 · Accepted Answer · answered May 29 '13 at 13:02

2

I have the same problem in TideSDK. On Chrome or Firefox window.onmouseleave works fine, but not on TideSDK (stupid old Webkit) :( But... You can use CSS and :hover on #wrapper inside :) You can move #wrapper for 1px on every side (by position: fixed for example), then you have write something like this:

#wrapper:hover #myelement{
// some CSS
}

answered May 29 '13 at 13:02

procek

111
1
5

The second solution (the slightly moved wrapper one) doesn't work (see my comment on Jason answer). Incredibly the CSS `:hover` doesn't work too! I tried to place a *full-sized full-red* `div` in the body, and used `:hover` to make it *full-green*: the app start and my `div` is red, I move the mouse on it and it turns green, and then moving the mouse out nothing happens... – lorenzo-s May 30 '13 at 11:42
I am convinced that it is a bug. I reported all **[as issue on GitHub](https://github.com/TideSDK/TideSDK/issues/199)**. I don't know if SO will assign bounty to you automatically. – lorenzo-s Jun 01 '13 at 09:25

score 1 · Answer 2 · answered May 25 '13 at 13:06

1

Does it fire mouseout or mouseleave events on other objects? You could create another object the size the window and place in the background.

answered May 25 '13 at 13:06

Jason

13,563
15
74
125

With this method you could detect mouseout events on the body element. The only problem ist, when moving your mouse on the window menu or window bar, your mouse is still on the window, but not on body. – Alex May 26 '13 at 14:22
It does not work. The problem isn't thw `window` object itself. All mouse movement are not detected while outside the app window: so `mouseout/leave` JS events are not fired at all. If I place some `
` to cover the whole area and attach events to it instead of `window`, nothing change.
– lorenzo-s May 30 '13 at 11:36
I am convinced that it is a bug. I reported all **[as issue on GitHub](https://github.com/TideSDK/TideSDK/issues/199)**. – lorenzo-s Jun 01 '13 at 09:26

score 0 · Answer 3 · answered Jun 01 '13 at 10:30

0

A possible workaround might be to use a timer. Every time the timer triggers you check the position of the mouse and if it is not inside the bounds of your window, manually trigger the mouseleave.

I am not experienced enough in TideSDK to tell you how to get the position of the mouse on the screen, sorry about that.

answered Jun 01 '13 at 10:30

daangemist

113
10

Searching the documentation, I found nothing about mouse cursor :( – lorenzo-s Jun 01 '13 at 10:35
Sorry, I was under the impression that it was possible, turns out it doesn't. – daangemist Jun 02 '13 at 12:06

score 0 · Answer 4 · edited Oct 18 '13 at 09:42

You dont need TideSDK to do this, you can simply do it with JavaScript.

Here is what I do in jQuery:

$(document).on("mouseenter", function() {
  return $("#side_bar_container").addClass("slide_in");
});

$(document).on("mouseleave", function() {
  $("#side_bar_container").removeClass("show_full_menu");
  $("#side_bar_container").removeClass("slide_in");
  return removeAllClasses("active", $(".show-archive"));
});

This works on my current TideSDK app and all browsers I am testing in.

Detect window mouse leave on TideSDK apps

4 Answers4