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.
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
}
Does it fire mouseout or mouseleave events on other objects? You could create another object the size the window and place in the background.
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.
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.
Related
I am creating a simple mobile app with Cordova. For good user experience I would like there to be instant feedback whenever a user presses a button. This should be accomplished with the :active pseudoclass. It mostly works, but it's not quite 'instant'.
See the jsbin here.
With desktop Chrome, clicking the button produces absolutely instant feedback, no question.
With Chrome for Android, tapping the button quickly feels pretty quick, but a slow tap or holding on the button causes a delay (it might be hard to notice, but it is there and it's bugging me).
I think this is something to do with scrolling. If you go to the Android settings, there is a scrolling list of options. These options seem to highlight with a similar delay. However, any native Android buttons which are not within a scrolling list are absolutely instant (for example, the back button in the top right, or save/cancel on a popup dialog).
Is there some way I can convince Chrome that these buttons are not on any kind of scrolling pane and should just be highlighted instantly?
This is probably unrelated, but I have also noticed that holding on an html button highlights it, but then moving your finger (still within the button) causes the highlight to disappear. This does not match the behaviour of native Android buttons, which would stay highlighted so long as you stay within the button.
Edit: I should add that -webkit-tap-highlight-color (which only works with cursor: pointer) is a bit faster than :active, but it's not an acceptable solution, for a few reasons:
The highlight disappears if you hold on the button for more than one second
It clashes with :active - to get sensible results with -webkit-tap-highlight-color you would have to remove :active, which makes no sense
There is no way to control the size/shape of the highlight, which might not match the actual button (sometimes it bleeds around the edge, or has mismatching rounded corners)
The correct HTML way of solving this is :active, and I would like to use that if at all possible.
It seems the best way to solve this is to listen for touch events and set a class:
$('button').on('touchstart', function(e){
$(this).addClass('active');
});
$('button').on('touchend', function(e){
$(this).removeClass('active');
});
To keep this as closely related to the :active pseudoclass, I opted to use a class of active and add styles for both like this:
button:active, button.active {
// active style
}
For more information, see: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
I have a scenario that when I mouse down onto a li element and at the same time mouse move on other li element call css active for that.
like a piano that we press multi keys at the same time. and active effect show for all of them.
thanks and sorry for my bad english.
First, you cannot track if a mouse button is pressed with CSS, JS is needed for that anyways. For example check JQuery mouse events documenattion.
Second, I believe "the piano-like" behavior means you need to press keys, not just put you fingers over it. And a mouse cursor makes you a "single-finger pianist". So, if I get your idea right (which I'm not sure), here is a simple JQuery snippet you may start with:
$('li').on('click', function(){
$(this).toggleClass('active');
})
See it in action here: https://jsfiddle.net/uL5506xg/
I have a "follow" button that has "Follow" which when clicked, changes a class and the text visible is "Following". On hover this changes to "Unfollow".
Works just fine. On mobile (phone), clicking it seems to lock it into the "hover" state. As a result, it completely bypasses "Following" and shows "Unfollow". If I tap somewhere else on the screen, it "fixes" itself.
Is there any way to make this happen automatically? $('body').click() did nothing for me...
You can use the touchstart/touchend events in jquery. If you are using only CSS, I don't know of a solution, but what you can either bind your normal functions to touchstart/touchend events in addition to hover events or do something like the following.
$('.button').bind('touchstart',function(){
$(this).addClass('hoverClass');
});
$('.button').bind('touchend',function(){
$(this).removeClass('hoverClass');
});
This just make your "hoverClass" change the button as you need to via CSS. I hope that is clear enough. Basically, touchstart/touchend are similar to hover, but as far as I know not accessible via CSS exclusively.
In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:
a:hover {
color: red;
}
words
http://jsfiddle.net/RHGG6/1/
This issue doesn't occur in either FF8 or IE9. It's problematic because I'm implementing a drag-and-drop action and using CSS to highlight the drop target. I could do this pretty trivially in JavaScript, but that seems heavy-handed for what is essentially a CSS problem. Are there any workarounds to this?
From a little playing around, it seems that Chrome 30.0.1599.69 m on windows7 doesn't generate a mouseenter event if the left button is held when moving over an element. As such, relying on the onmouseenter event gives the same result as using css - perhaps this (non-triggered) event is used to signal the css engine that something needs to change.
Anyhow, you can just add code to handle mousemove and mouseout events. I simply set the text colour with the js, though something that toggled a class would probably be a better option. At least the js will be using the time that the css should have been using, so it won't all be overhead, although it does suck redoing it all anytime the mouse moves.
Perhaps you could use removeEventListener from inside the handler you're trying to remove. If so, you could attach the js to handle the events with addEventListener, attaching to both events on page load. When the onmousemove event was triggered, you could change the style and then remove the handler. Then, when the mouseout event fired, you could restore the style and re-attach the onmove handler. I wouldn't be surprised if trying to remove a handler from an event, from within the handler itself would fail, but one can only try. It would only add a few bytes to the js, but would improve efficiency (in terms of the link, not the whole page) tremendously - from potentially very poor if the mouse was moved over the link a lot to 100% - i.e the style is set exactly once and cleared exactly once per enter/leave cycle.
words
Works for me - Note: only tested with chrome in win7.
I checked in Safari and Opera as well and they behave just like IE9 and Firefox. It seems Chrome is the only browser that behaves this way. The only way I was able to get the desired behavior was using Javascript. The suggestions with the :active pseudo class definitely don't work, I think they misunderstand the problem. Strangely, :hover in Chrome works when the right mouse button is being held down and not when the left button is. Go figure.
The link turns red when I mouseover it using Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, so you might want to update your Chrome.
On a related note, the :hover pseudo-class applies to an element being HOVERED by a mouse pointer. For a style to apply while the mouse button is held down while clicking the link, use the :active pseudo-class. I'm not sure why FF and IE behave differently.
When you're left mouse button is down, isn't the element supposed to be in the active state? The difference here is that Firefox and IE are allowing the active state to be inherited from the hover state, and Chrome is not. In CSS, the active state can be controlled using the :active pseudo-class. You need to explicitly set the style for the active state to ensure consistency between browsers.
Nowadays (2018), while the bug still persists in Chrome, you can work around it using HTML5 drag&drop's dragenter and dragleave events. If you have a nested dom-element you can apply a counter to mitigate the dragleave events that occur when the mouse gets over a child element.
var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
<h1>hover over me<span>, and me</span></h1>
<h2 draggable=true>drag me</h2>
You're looking for the :active pseudo-class. :hover will only activate when the node is being hovered over by the mouse. :active will only trigger when the node has been selected or clicked on.
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/
I have an ASP.NET button on my page. When I click the button using JavaScript (buttonId.click()), Firefox seems to fire all onclick event handlers on the page. I would like to click only one button.
This scenario is working fine in Internet Explorer.
Please let me know of any workarounds for this.
Thanks
The simple workaround is:
Make a div, height 100% of the page, width 100% of the page.
This div is hidden.
Make a function showDiv() that shows your div.
On every action in your page you'll use a JavaScript function.
The last row of all JavaScript function is showDiv().
Then after every click that calls a JavaScript function other clicks on this page are disabled.
Ps. Obviously the div need remains align to viewport (top=0;left=0).