Question

I am trying to integrate iScroll in my application using javascript-jquery.mobile.iscroll plugin. I want to use it for scrolling a listview component of a certain page. I would like that the filter of this listview would stay fixed just after the header, scrolling only the listview items.

By the way I have tried to programatically move the filter form before the div marked with id="scroller" (to avoid scrolling for it) like this:

$('#testPage').live('pageinit', function() {
    $('form.ui-listview-filter').insertBefore($('div.scroller'));
});

However, the form does not move and stays in the scrollable area. Anyone knows if it is possible to move it or is there another way to prevent the scrolling of the filter?

My html code is something like this:

<div id="testPage" data-role="page" data-iscroll="enable">
    <div data-role="header" data-position="inline">
    <h1>Test</h1>
    </div>
    <div data-role="content" data-iscroll="scroller">
      <div id="scroller">
      <ul data-role="listview" data-filter="true">
            <li><h3>Test1</h3></li>
            <li><h3>Test2</h3></li>
            <li><h3>Test3</h3></li>
            ...
            <li><h3>Test60</h3></li>
        </ul>         
     </div> 
</div>

The full example is here: http://jsfiddle.net/emFbM/11/

Thank you in advance for your help!

Answer 1

I finally solved it moving the filter before the div with data-role="content" like this $('.ui-content').before($('form.ui-listview-filter'));.

Final code is here in case anyone is interested.