Highlight issue in Lists.. about chocolatechip-ui HOT 3 CLOSED

Let me explain how interactions work in ChUI. What you see on the desktop are CSS hover effects using the :hover pseudo element. There is no JavaScript involved, so no mousemove event is bound. On mobile there is a singletap event which is part of ChUI that is used to trigger a temporary touch state for elements. Scrolling is trigger by touchstart events on mobile browser, there I use singletap events for most user interactions. A singletap has a 130 millisecond delay. For widgets such as popups, popovers, navigation list, the action is also being executed on the singletap event. This means that in most cases a widget will get dispelled before the touched state can be display.

In an earlier version of ChUI I had implemented touched states with the touchstart event. However this resulted in visual messiness. For example, if the user tried to scroll, anything interact in the scroller would immediately should its touch state because of the touchstart event, even though it wasn't being executed. This cause a lot of confusion for users, so I drop it and adopted the present approach.

Please be aware that this is a mobile first framework. Desktop support is only there to make it easy for you to immediately see what you are producing for your mobile targets. It is not our intention that ChUI will be used for deployment as a desktop framework. That would require lots of workarounds and hack to make it work consistently across a large number of browsers and browser versions.

That said, if you see something that doesn't look right, please do post some visuals and let us know. There are always odd bugs that slip through our tests and we are eager to push forward improving ChUI to make it a platform for you to make great apps.

from chocolatechip-ui.

The first screenshot is an android emulated one, same in my android device, where the highlights are not shown

Second screenshot is simply desktop browser where the highlights are shown,

What I felt is, the highlights are good to see, but the touchmove event is not triggered even in the emulator. Is there any work around to bring the highlight behaviour on screen.

from chocolatechip-ui.

I see. Let me make this clear. There are no mouse move or touch move events being used to trigger hover states in ChUI. What you see on desktop is purely accomplished using the CSS pseudo-elements :hover. I have this limited though the ChUI detectors module to only be applied on desktop. The reason is this. Originally when the iPhone launched with iOS, there Websites with hover states lost that functionality. Several versions later both Apple and Google for Android updated their mobile browsers to recognize the CSS :hover states. However, The implementation on both platforms is very buggy. Once the user touches something with a CSS hover state, it stays stuck in that state, many times even after the user touches else where on the screen. This can lead to very messy looking states for your app and is very confusing for users.

In the case of the popover, please be aware that the popover is just a container for whatever elements you want to throw in there. That might be a stack of buttons, or an interactive list as in your case. Since you’re putting the content in, you can also write a bit of JavaScript to wire up some interactivity.

If the popup list has and id of “myPopupList”, you could try the following some event delegation:

$(“myPopupList").on($.eventStart, ‘li’, function() {
$(this).addClass('selected');
setTimeout(function() {
$($this).removeClass('selected');
}, 500);
});

Fiddle with the values until you get what works for your target platform. Android may require a longer timeout because it is slower at firing the events.

Also, note if you use the $.eventStart variable, this will translate to touchstart on mobile. This means that in your case, if the popover list is scrollable, as soon as the user tries to scroll, there will also be a selected state display where they touched. That, my friend, is the problem with mobile browsers when trying to convey the equivalent of hover states.

For native operating systems, they have an advantage over us because they can operate in microseconds They can see when the user is starting to scroll or have the grace period to assume the user is about to scroll and cancel touch events on a scrollable content. In contrast we are operating in the world of their mobile browsers, which can be very slow and therefore not offer use enough time to trigger a scroll events and prevent a touch states. :-(

Robert Biggs
Product Director
ChocolateChip-UI
www.sourcebits.com

(415) 288-3697
Sourcebits, Inc.
211 Sutter Street. STE 200
San Francisco, CA 94108

On Apr 19, 2014, at 11:57 PM, Ajmal Sali [email protected] wrote:

The first screenshot is an android emulated one, same in my android device, where the highlights are not shown

Second screenshot is simply desktop browser where the highlights are shown,

What I felt is, the highlights are good to see, but the touchmove event is not triggered even in the emulator. Is there any work around to bring the highlight behaviour on screen.

—
Reply to this email directly or view it on GitHub.

from chocolatechip-ui.