Search code examples
javascriptjquerycssjquery-mobilejquery-events

Deselect all listview items on scrollstart

When you scroll the page, and start that scroll by pressing on a listview button, the button remains highlighted for the scroll and stays highlighted after the scroll has finished. How can I deselect this when the scroll starts?

It works if I do this:

$(document).bind('scrollstart', function(ev) {
    $('*').blur();
});

But this is inefficient and causes the page to lag before scrolling starts, I've tried bluring just a, li, ui-btn and ui-li, but this doesn't unhighlight it.

Solution

  • When you click on a list-item on a jQuery Mobile pseudo-page, you're basically adding the ui-btn-down-* class to the list-item (the * denotes one of the theme letters).

    You can remove this class once the user starts scrolling, here is an example:

    $(document).on("scrollstart", function () {
    setTimeout(function () {
        $.mobile.activePage.find('.ui-li').removeClass('ui-btn-down-a ui-btn-down-b ui-btn-down-c ui-btn-down-d ui-btn-down-e');
    }, 100);
});​

    UPDATE

    Testing on my Droid X I found that a timeout helped take-away the highlighted state more consistently. You can mess with the duration of the timeout for your own purpose.

    Here is a demo: http://jsfiddle.net/WrqbG/7/

    UPDATE

    I also realized that the .ui-btn-hover-* class is applied, so to return to an un-highlighted list you've got to remove those classes as well.

    .removeClass('ui-btn-down-a ui-btn-down-b ui-btn-down-c ui-btn-down-d ui-btn-down-e')

    Just changes to:

    .removeClass('ui-btn-down-a ui-btn-down-b ui-btn-down-c ui-btn-down-d ui-btn-down-e ui-btn-hover-a  ui-btn-hover-b  ui-btn-hover-c  ui-btn-hover-d  ui-btn-hover-e')