PDA

View Full Version : Mouseover delay



varunach
26 Apr 2011, 6:49 AM
I want an pop up to open only if the mouse been over a link for 500 ms. How do i do that? Right now it fires immediately..

friend
26 Apr 2011, 8:46 AM
If you're talking about ToolTips, you can set global options to affect all ToolTips:


Ext.QuickTips.init();
Ext.apply(Ext.QuickTips.getQuickTip(), {showDelay: 500, dismissDelay: 5000});
Note that you can set a 'dismissDelay: 0' if you want the user to manually dismiss the tooltip, via a mouse click.

varunach
26 Apr 2011, 8:54 AM
no not a tooltip, i want a window to pop up.

mitchellsimoens
27 Apr 2011, 4:27 AM
cmp.mon(el, {
delay: 200, //in miliseconds
mouseover: someFunc
});

If you look at the addListener method you will see the different options you can add in the object. You can use things like delegate that allow you to have one listener but for multiple targets in the el. I think delay is the one you want, either that or buffer.

varunach
27 Apr 2011, 4:35 AM
yup.. that's what i needed.. thanks..

varunach
27 Apr 2011, 9:15 AM
this doesn't seem to work for me.. the event fires after a delay. I want the window to open only if i have hovered over the link for over 500 ms. It shouldn't open otherwise. I tried doing this but the mouseout event is inconsistent. It fires when I bring the mouse over the link AND when I move out of the link.

This is what i tried to do:
appointmentIcon is a <li> element in the html file.


var appointmentIcon = Ext.get('appointmentIcon');
appointmentIcon.on({
'mouseover' : {
fn : function() {
Ext.Msg.alert('MouseOver!', 'Fired!');
},
buffer : 500
},
'mouseout' : {
fn : function() {
appointmentIcon.swallowEvent('mouseover', true);
}
}
});

mitchellsimoens
27 Apr 2011, 9:18 AM
That gets a little tricky and something that an option to a listener is not going to be able to handle.

varunach
27 Apr 2011, 9:25 AM
could you point me in the right direction? I'll check out how the tooltip is designed.. that does what I want to achieve here.

mitchellsimoens
27 Apr 2011, 9:27 AM
On mouseover I would set a time when the event happened so you can reference it with the mouseout event and then do a calculation to see if it has been 500ms. Make sure to test it with the mindset of trying to break it. It should work no problem but test it never the less.

mitchellsimoens
27 Apr 2011, 9:29 AM
Wait, you are using a ToolTip or QuickTip? If you are, there is a showDelay config that should do what you want I think. If you aren't then do what I said before.

varunach
27 Apr 2011, 9:42 AM
nope.. not using tooltip.. using window.. :) thanks for the help..

varunach
27 Apr 2011, 10:05 AM
It was quite simple actually.. all I had to do is this:


var startTime;
appointmentIcon.on({
'mouseenter' : {
fn : function() {
startTime = setTimeout("Ext.Msg.alert('Alert','After 500ms')", 500);
}
},
'mouseleave' : {
fn : function() {
clearTimeout(startTime);
}
}
});