[Yann]

Hello ,
i try to adapt a script of Octavio to a HTML widget to call a remote page when i scroll down.
it works but I need help to solve some problems
how can i change height dynamicly height of html widget

phoneui.documentReadyHandler = function() {

  DefilementInfini();
}


function DefilementInfini()
{
var compteur=1;
var offset = $('#m1-test-panel1-scroller').offset();
envoidata('http://mydomain.fr/test.aspx?pg='+compteur,AddInDiv);
myCarousel_up = new iScroll('m1-test-panel1-scroller', {
    
        snap: true,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        desktopCompatibility:true,
        onScrollEnd: function () {
        if($('#m1-test-panel1-scroller').hasClass('scrolling')) {
            $('#m1-test-panel1-scroller').removeClass('scrolling');
        } 
        if (this.dirY == 1) { 
        charge = "oui";
        compteur++;
        envoidata('http://mydomain.fr/test.aspx?pg='+compteur,AddInDiv);
        updateListHeight(compteur,offset);
        }
    }
});
}

function updateListHeight(compteur,offset) {
  var $scroller = $('#m1-test-panel1-scroller');
  var $htmobjet = $('#contenu');
  var panelHt = 300 + (compteur * 200);
  $scroller.css("height", panelHt + "px");
  $htmobjet.css("height", panelHt + "px");
  $scroller[0].myScroll.refresh();
  $('#m1-test-html1') .css({'height': (($(window).height()) + panelHt)+'px'});
}
function AddInDiv(data)
{
    $('#contenu').append(data);
}

function envoidata(url,callback)
{

var objHTTP, strResult;
  if(window.XMLHttpRequest)
        { 
            objHTTP = new XMLHttpRequest();
        }
    else if(window.ActiveXObject)
        { 
            objHTTP = new ActiveXObject('Microsoft.XMLHTTP');
        }
  objHTTP.open('POST',url,false);
  objHTTP.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  objHTTP.send();
  
  strResult=objHTTP.responseText;
  callback(strResult);
}

Dynamic resize of panel run as well but , not html widget with $htmobjet.css(“height”, panelHt + “px”);
Updated: i added this line $(‘#m1-test-html1’) .css({‘height’: (($(window).height()) + panelHt)+’px’}); and now Html widget object appears to be resized
but I’d find a way to detect the bottom of the div rather than scrollend
HTML Code:

 <div id="m1-test-panel1" class="m1-iscroll-wrapper m1-border-1 m1-background-2">
          <div id="m1-test-panel1-scroller" class="m1-iscroll-scroller" data-bounce="true">
            <div id="m1-test-html1" class="m1-custom-html m1-border-1 m1-background-3"
              ><div id="contenu"> 
                </div>
            </div>
          </div>
        </div>

your help will be very appreciated
thanks a lot
Yann

[support-octavio]

Hi Yann,

Could you try move the scroll refresh to the end of function?

function updateListHeight(compteur,offset) {
  var $scroller = $('#m1-test-panel1-scroller');
  var $htmobjet = $('#contenu');
  var panelHt = 300 + (compteur * 200);
  $scroller.css("height", panelHt + "px");
  $htmobjet.css("height", panelHt + "px");
-->>>  $scroller[0].myScroll.refresh();
  $('#m1-test-html1') .css({'height': (($(window).height()) + panelHt)+'px'});
}

function updateListHeight(compteur,offset) {
var $scroller = $(‘#m1-test-panel1-scroller’);
var $htmobjet = $(‘#contenu’);
var panelHt = 300 + (compteur * 200);
$scroller.css(“height”, panelHt + “px”);
$htmobjet.css(“height”, panelHt + “px”);
$(‘#m1-test-html1’) .css({‘height’: (($(window).height()) + panelHt)+’px’});
$scroller[0].myScroll.refresh();
}

[Yann]

Hello,
thanks Octavio,
now i try to detect bottom of scroller div to call ajax function
i tried this :

onScrollMove: function () {
        console.log($("#m1-test-panel1-scroller").scrollTop());
    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) 
    {
        console.log($(document).height());
        console.log($(window).scrollTop());    }
});

but $(window).scrollTop() return 0 , i tried too $(“#m1-test-panel1-scroller'”scrollTop() and i have also 0
thanks for your help
Yann

[Yann]

Hello
i found a solution to get position but only of parent div scroller : m1-test-panel1

 if (this.y==this.maxScrollY) 
         { call funtion()
}

if i get position of m1-test-panel1-scroller this.y return 0
i try to resize m1-test-panel1, m1-test-panel1-scroller to have a longer scroller bar without succes at this time.
thanks for your help
Yann

[Yann]

Hello
i don’t understand why i can get y position of div panel1 and not panel1-scroller
if i put

MyScroller = new iScroll('m1-test-panel1 {

this.y return a good value.
if i put

MyScroller = new iScroll('m1-test-panel1-scroller {

this.y return always 0
My problem : I can not resize the scroller with thenew height after a call from the remote page
someone can help me?
thanks
Yann

[support-michael]

Yann,

I hate to be dense on this topic but I’m having trouble following it and working through the question(s). Is there anyway to you can setup a small example project that we can work together to understand exactly what the requirements and implementation details?

[Brandon]

Just a guess, but if the scroller is inside the panel it could be reflecting the y position in relation to the panel, and not the app.

[Yann]

Hello Wayne
in attached zip file an example of my problem.
Thanks
Yann

Attachments:

You must be logged in to view attached files.

[support-octavio]

@Yann,

Thanks for shared the example, we have it in queue for review later today or tomorrow, will follow up asap.

[Yann]

Hello Octavio
some news about my problem?
thanks
Yann

[Yann]

Hello Octavio
you can close this post, i found a solution.
i adapted this script whith remote data called by ajax
http://davidwalsh.name/demo/iscroll/examples/pull-to-refresh/
Yann

[support-octavio]

@Yann,

Thanks for sharing your solution with us. It seems to work very well.

[Author]

Posts