-1

I have a small problem with iscroll. I'm building a small app for iphone with phonegap and jquery mobile, with external data taken from json, use iscroll and data-iscroll = "", when I load the contents of the list view, iscroll works great, but if I go out and return in another article, iscroll remember the position, and I wish I could do from the top of the page.

Thi is my example http://www.viaggiosullaluna.it/es.zip

Ty for Help.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Bambo
  • 1
  • 1
  • 1
  • 4

3 Answers3

3

iScroll4 has the .refresh() method.

considering you used something like this to create your iscroll instance:

var myScroll = new iScroll('idOfElement', {/*options*/});

Add the following at the end of the function which calls the new article (and on every function which changes the scrollable content):

setTimeout(function () {
    myScroll.refresh();
}, 100);

This way it will recalculate the height of the scrollable area and redo the scroll. For more info, see MASTERING THE REFRESH() METHOD at http://cubiq.org/iscroll-4

Update

To scroll back to top, use the following:

myScroll.scrollTo(0, 0);

The doc states scrollTo(x, y, time, relative). time in ms (for the 'animation' of scrolling, which probably you don't want) and relative meant for scrolling based on current element (which you don't want also).

For more info, see JAVASCRIPT SCROLLING at http://cubiq.org/iscroll-4

RaphaelDDL
  • 4,452
  • 2
  • 32
  • 56
  • Thanks for the reply, but my problem is different, I try to explain my problem, iscroll works on the inside pages, but if I press back and return to a page under the other, iscroll is placed in the same position you left and I want it to start the beginning of the page – Bambo May 07 '13 at 19:01
0

I'm sorry, I do not understand very well. are not an ace with js unfortunately. I should understand how to insert the function myScroll.scrollTo (0, 0) in my code. You're really kind to help me. I use these three functions:

JAVASCRIPT

$("#malattie_page").live("pageinit", function() {
});
$("#malattie_interno_page").live("pageinit", function() {
});

$("#malattie_page").live("pagebeforeshow", function(event,data) {
$.ajax({
    url: "http://www.viaggiosullaluna.it/ipediatria_admin/json/malattie.php",    
    type: 'post',
    dataType: 'json',
    crossDomain : true,
    async:false,
    success: function(retval, textStatus){              
        var html = "<ul id='lista_malattie' data-role='listview'  data-autodividers='true' data-filter='true' data-filter-placeholder='Search...'>";
        for (var i=0; i<retval.length; i++) {
            html += "<li><a href='#malattie_interno_page'  data-transition='slide' class='contentLink' data-entryid='"+retval[i]['id']+"' >"+retval[i] ['title']+"</a></li>";
        }
        html += "</ul>";
        $("#interno_malattie").html(html);
        $("#lista_malattie").listview();
    }
});
 });
$("#malattie_interno_page").live("pagebeforeshow", function(event,data) {
$.ajax({
    url: "http://www.viaggiosullaluna.it/ipediatria_admin  /json/malattie.php?id="+selectedEntry,
    type: 'post',
    dataType: 'json',
    crossDomain : true,
    async:false,
    success: function(retval, textStatus){    
        var html =""
        for (var i=0; i<retval.length; i++) {
            if(selectedEntry == retval[i]['id']) {
                html += "<h3>"+retval[i]['title']+"</h3>";
                html += "<div class='interno'>"+retval[i]['content']+" </div>";
             }
         }
        $("#interno_malattie_page").html(html);
    }
  });   
  });

  $("#malattie_page").live("pageshow", function(prepage) {
});
$("#malattie_interno_page").live("pageshow", function(prepage) {
setTimeout(function(){$('#malattie_interno_page [data- role="content"]').iscrollview('refresh');}, 0);
 });

AND HTML

<!-- PAGE MALATTIE -->
    <div data-role="page" class="ui-responsive-panel" id="malattie_page">
        <div data-role="header"  data-theme="f" data-position="fixed">
            <h1>MALATTIE</h1>
            <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a></div><!-- /header -->
        <div data-role="content"  data-iscroll="">
            <div id="interno_malattie">

            </div>
        </div><!-- /content -->         

        <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
            <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
                <li data-icon="delete" class="close-button"><a href="#" data-rel="close">MENU INTERNO</a></li>

                <li><a href="#malattie_page" data-transition="fade">PAGE</a></li>
            </ul>
        </div><!-- /panel -->           
    </div><!-- /page -->


    <!-- PAGE MALATTIE INTERNO PAGINA -->
    <div data-role="page" class="ui-responsive-panel" id="malattie_interno_page">
        <div data-role="header" data-theme="f"  data-position="fixed">
            <h1>MALATTIE</h1>
            <a href="#malattie_page" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
        </div><!-- /header -->
        <div data-role="content" data-iscroll="">
            <div id="interno_malattie_page">


            </div>
        </div><!-- /content -->         

        <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
            <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
                <li data-icon="delete" class="close-button"><a href="#" data-rel="close">MENU INTERNO</a></li>

                <li><a href="#malattie_page" data-transition="fade">PAGE</a></li>

            </ul>
        </div><!-- /panel -->           
    </div><!-- /page -->
Bambo
  • 1
  • 1
  • 1
  • 4
0

If you using iscrollview means just try this...

1.refresh

$('#videotagisc').iscrollview("refresh");

2.scrollTo

 $('#videotagisc').iscrollview('scrollTo', 0,0);
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Kathir
  • 4,359
  • 3
  • 17
  • 29