I've been playing around with :hover lately and thought my findings
and workarounds might be of interest to the general public :-)
An important step towards a responsive UI is to have widgets already
prepared when making them visible, since widget creation takes up
quite some time. We're definitely not talking about seconds, but it is
the faint difference between "fast" and "instant", which makes up for
quality and positive user experience. The least wasteful way of doing
that is to reuse widgets by adding and removing them instead of
reinstantiating them.
In combination with IE (all versions) and the CSS :hover class I
noticed a peculiar problem in the following scenario:
1. user moves mouse over a widget with :hover style
2. widget changes appearance
3. user clicks on widget
4. click handler causes widget to be removed from the document
later:
5. widget is added again to the document
After step 5, the widget will still appear with the :hover style even
though the mouse pointer is not hovering over it which might confuse
the user and for sure doesn't look right.
The workaround here consists in first setting the widget's visibility
to hidden and then removing the widget from its parent in a deferred
command which, for simplicity, can reinstate visibility so that no
special logic is required when reattaching the widget:
public void removeWidgetFromParent(final Widget widget) {
widget.setVisible(false);
DeferredCommand.addCommand(new Command() {
@Override
public void execute() {
widget.removeFromParent();
widget.setVisible(true);
}
});
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
