title: Prevent iScroll scrolling listview filter
body: <p>I am trying to integrate iScroll in my application using <a href="https://github.com/yappo/javascript-jquery.mobile.iscroll" rel="nofollow">javascript-jquery.mobile.iscroll plugin</a>. 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.</p>
  
  <p>By the way I have tried to programatically move the filter form before the div marked with <code>id="scroller"</code> (to avoid scrolling for it) like this:</p>
  
  <pre><code>$('#testPage').live('pageinit', function() {
      $('form.ui-listview-filter').insertBefore($('div.scroller'));
  });
  </code></pre>
  
  <p>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? </p>
  
  <p>My html code is something like this:</p>
  
  <pre><code>&lt;div id="testPage" data-role="page" data-iscroll="enable"&gt;
      &lt;div data-role="header" data-position="inline"&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content" data-iscroll="scroller"&gt;
        &lt;div id="scroller"&gt;
        &lt;ul data-role="listview" data-filter="true"&gt;
              &lt;li&gt;&lt;h3&gt;Test1&lt;/h3&gt;&lt;/li&gt;
              &lt;li&gt;&lt;h3&gt;Test2&lt;/h3&gt;&lt;/li&gt;
              &lt;li&gt;&lt;h3&gt;Test3&lt;/h3&gt;&lt;/li&gt;
              ...
              &lt;li&gt;&lt;h3&gt;Test60&lt;/h3&gt;&lt;/li&gt;
          &lt;/ul&gt;         
       &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The full example is here: <a href="http://jsfiddle.net/emFbM/11/" rel="nofollow">http://jsfiddle.net/emFbM/11/</a></p>
  
  <p>Thank you in advance for your help!</p>