Search jQuery

jQuery Forum

iScroll example?

in jQuery Mobile • 11 years ago

Does anybody have a working iScroll implementation with jQuery Mobile that they could share? I tried to get it to work on my page, but could not succeed, and am now revisiting it because my current implementation isn't optimal from the UX standpoint.

Specifically what I'm trying to do is the following. I have a fixed header and footer on one of my pages. The content part of the page will (in most cases) have more content than can be displayed. The newest content appears at the bottom, so I would like to scroll the page down all the way to the bottom after the user opens the page, after it dynamically loads the content. I only need it to work in iOS right now (although Android too in the near future), and I'm currently using jQM 1.0.1 with plans to upgrade to 1.1.0 once the final is released.

Unfortunately, the last time I tried this was ~3 weeks ago, and I don't have sample code from my failure to post. I was using iScroll, jquery.actual to get the real size of the content pane (although I couldn't find a way to use that), and jquery.mobile.iscroll.js, which I understood was needed (although honestly not entirely sure why). Part of my problem was that I couldn't really find a command that would scroll to the bottom easily, and using it in the way that I was, I couldn't seem to configure it appropriately either, so the content pane wouldn't scroll at all. Basically looking for some working samples, hopefully for the scenario that I have.

Replies(11)

raykreisel

Re: iScroll example?

11 years ago

Take a look at SplitView

http://asyraf9.github.com/jquery-mobile/

-ray

drmike01

Re: iScroll example?

11 years ago

Thanks for the suggestion, but split view doesn't really do what I'm trying to accomplish, which is just to be able to scroll reliably.

I tried to make this work again, this time more systematically than before. In all cases described, the net result was a content pane that was not scrollable and just bounced when I tried to scroll it.

My page's HTML looks like this:

<div data-role="page" id="page1" data-title="Page 1">
<div data-role="header" data-position="fixed">
<h1 id="name_header">Name</h1>
</div>
<div id="wrapper">
<div data-role="content" id="scroller">
<div name="msg_holder" id="msg_holder" >
<p>Data</p>
<p>Data</p>
// etc. - numerous rows of data
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="fieldcontainer" class="ui-hide-label ui-body-c msg_text_input_contain">
<form id="new_msg_form" action="" method="">
<div>
<fieldset class="ui-grid-a">
<div class="ui-block-a msg_text_field">
<label for="new_msg_text">New Message:</label>
<textarea id="new_msg_text" name="new_msg_text" class="msg_text_input" placeholder="Enter message"></textarea>
</div>
<div class="ui-block-b msg_send_btn">
<span class="msg_text_send_btn" id="sendBtn">
<input id="msgSubmitBtn" type="button" value="Send" data-role="button" data-inline="true" data-theme="b" />
</span> </div>
</fieldset>
</div>
</form>
</div>
</div>
<script type="text/javascript">
var myScroll = new iScroll('scroller');
</script>
</div>

I have a JS that runs on the pagebeforeshow of the above page, creates all the dynamic data, calls a trigger('create') after that, and then followed by the below:

setTimeout(function () {
myScroll.refresh();
console.log("Refreshing iScroll");
}, 10000);

I've played with all sorts of variations of this. I increased the setTimeout to 10000 to make ridiculously sure everything was loaded first, no help. I moved the "wrapper" and "scroller" ids up and down in the DOM. In this version the separate div scroller is commented out and the div below it is assigned that id, and I create the new iScroll on scroller, but I tried every combo I could think of, setting iScroll on wrapper and scroller, and moving each up and down, and still the same result. According to the instructions, this should work because I'm creating iScroll one level above the element that needs to scroll (msg_holder).

Any thoughts? It's as if iScroll thinks that the content panel is only the size of the screen, and when I go to scroll it rubber bands me back to the center of the page, so I thought it was a refresh() issue, but extending that timeframe doesn't seem to help.

sandy.pla..

Re: iScroll example?

11 years ago

never used iScroll but I believe you need to call new iScroll("wrapper")

drmike01

Re: iScroll example?

11 years ago

I solved it, thank god. Only about 20 hrs spent on this, but at least it works now...

The instructions on the iScroll site are incomplete, and don't truly work with jQM, so here's what I had to do.

First, the HTML for the scrollable section needed to look like the below, which is as it's described in the documentation:

<div data-role="content" id="wrapper" class="scrollable">
<div name="msg_holder" id="msg_holder">
</div>
</div>

I also added the iScroll stuff inline within the <div> at the bottom (below the HTML), also described in the documentation (the other event-based triggering looked like it was going to be difficult with jQM):

<script type="text/javascript">
var myScroll = new iScroll('wrapper');
</script>

Second, I needed to have a CSS class definition that matched the scrollable class, like the below. This is not clearly specified anywhere that I could find, found it on digging around in forums, so YMMV.

.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
}

Next, since I'm dynamically creating the content, I had to do some tricks. It's basically a list of elements that I iterate over when I get it back as JSON and then put it into the HTML. To this, I added at the very bottom an empty <div> that acted as my "last" element below the list, all within the pagebeforeshow event of that page:

<div id="scroll_place_holder"></div>

JS to make it work:

$('#message_page').live("pageshow",function(event, data) {
setTimeout(function () {
myScroll.refresh();
myScroll.scrollToElement("#scroll_place_holder", 0);
}, 0);
});

Important note on this structure: I originally had the myScroll.refresh() within the pagebeforeshow, but what wound up happening is that I had to set the setTimeout to times greater than 0 (500 seemed the minimum), or else it wouldn't work, presumably because jQM wasn't done adding the elements when it was called. I was also concerned that this would get worse as the number of items went up. Therefore I put the refresh in a later event (pageshow) to be sure that everything was done, and there it was fine with a 0. Unfortunately this creates a small amount of jumpiness, but it's minor in my opinion.

Lastly, since I have a fixed footer that was taking up space, I had to give this <div> some height so that the content would actually appear above the footer. This is variable based on what your footer is, but mine turned out like below:

#scroll_place_holder {
height:70px;
}

After all the hassle of getting this to work, I can say that the result is actually rather nice - truly fixed headers/footers on my page, and it resolved an issue I had reported where my footer was floating above the keyboard.

Probably worth noting too that all of this was running jQM 1.0.1, jQuery 1.6.4, iScroll 4, PhoneGap 1.4 on iOS 5.1 (iPhone 4S).

raykreisel

Re: iScroll example?

11 years ago

Thanks for posting the solution...

-ray

dennisleu..

Re: iScroll example?

11 years ago

mike can you add your full code.

i cant get it working right now :o

zSprawl

Re: Re: iScroll example?

11 years ago

Mike: Mind if I repost your writeup for a few friends?

---
http://zsprawl.com

dennisleu..

Re: iScroll example?

11 years ago

that would be nice i got the same problem as mike, was also figuring out 10 hours and i want a fixed footer menu in my native app but it wont work :(

drmike01

Re: iScroll example?

11 years ago

@zSprawl - sure, I posted here so that others could benefit from my pain. :)

@dennisleussink - I can't post everything, but I can put a bit more. Is there any particular area that is failing for you? With PhoneGap in particular, this was really hard to debug because everything was just not working, and doing that silently. The problem with me posting it is that the total app is rather large, with a bunch of stuff that I extracted for the above, but extracting those things also would make it not work, so I only showed the highlights up above.

My whole HTML page, though, looks something like the below. The footer is a bit complex, sorry about that, but I didn't want to change too much of it.

<div data-role="page" id="page1" data-title="Title">
<div data-role="header" data-position="fixed">
<a href="home.html" data-icon="arrow-l" data-theme="c" class="ui-btn-left" data-direction="reverse">  </a>
<h1 id="name_header">Name</h1>
</div>
<div data-role="content" id="wrapper" class="scrollable">
<div name="msg_holder" id="msg_holder">
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="page1_footer">
<div data-role="fieldcontainer" class="ui-hide-label ui-body-c input_contain">
<form id="new_msg_form" action="" method="">
<div>
<fieldset class="ui-grid-a">
<div class="ui-block-a msg_text_field">
<label for="new_msg_text">New Message:</label>
<textarea id="new_msg_text" name="new_msg_text" class="msg_text_input" placeholder="Enter message"></textarea>
</div>
<div class="ui-block-b msg_send_btn">
<span class="msg_text_send_btn" id="sendBtn">
<input id="msgSubmitBtn" type="button" value="Send" data-role="button" data-inline="true" data-theme="b" />
</span>
</div>
</fieldset>
</div>
</form>
</div>
</div>
<script type="text/javascript">
var myScroll = new iScroll('wrapper');
</script>
</div>

Note that I add the scroll_place_header div dynamically in the section that has , and that section looks like a bunch of <p> elements, followed at the bottom by the scroll_place_header <div>. My full JS looks like this (with edits for clarity):

$('#page1').live("pagebeforeshow",function(event, data) {
<bunch of stuff where I'm getting and checking on local variables, really only relevant
< to my app, so I deleted
$.ajaxSetup({cache:false});
$.getJSON(deployDir + 'message', queryParamString, function(json) {
var meta;
var thread;
if (json.length > 0) {
< here's some code pulling out data pieces from json[0], only relevant to my app
thread = json[1]; // json[1] holds the array of info to be displayed
var items = [];
var d;
$.each(thread, function() {
d = new Date(); // NOTE: this is not the normal JS date stuff, separate library
d.setTime(this.dt);
items.push('<p class="msg_time">' + dateFormat(d,"mmm d, yyyy HH:MM") + '</p><p class="msg">' + this.msg + '</p>');
});
items.push('<div id="scroll_place_holder"></div>');
$("#msg_holder").html(items.join(''));
$("#message_page").trigger('create');
} else { // returned empty JSON, which means error that shouldn't occur
alert("Error in returned info from server");
}
});
});
$('#message_page').live("pageshow",function(event, data) {
setTimeout(function () {
myScroll.refresh();
console.log("Refreshing iScroll");
myScroll.scrollToElement("#scroll_place_holder", 0); // this scrolls down to bottom <div>, dynamically added above
}, 100);
});

dennisleu..

Re: Re: iScroll example?

11 years ago

Thanks for the code.

I also got a RSS Reader JS and if I implement your JS with the RSS Reader JS the RSS Reader wont work :(

I put everything in main.js

Or do you load another JS file for iscroll??

Can you show also your head???

This is my RSS Reader JS:

//EDIT THESE LINES
//Title of the blog
var TITLE = "ColdFusion Jedi";
//RSS url
var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusionBlog";
//Stores entries
var entries = [];
var selectedEntry = "";
//listen for detail links
$(".contentLink").live("click", function() {
selectedEntry = $(this).data("entryid");
});
function renderEntries(entries) {
var s = '';
$.each(entries, function(i, v) {
s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
});
$("#linksList").html(s);
$("#linksList").listview("refresh");
}
//Listen for main page
$("#mainPage").live("pageinit", function() {
//Set the title
$("h1", this).text(TITLE);
$.ajax({
url:RSS,
success:function(res,code) {
entries = [];
var xml = $(res);
var items = xml.find("item");
$.each(items, function(i, v) {
entry = {
title:$(v).find("title").text(),
link:$(v).find("link").text(),
description:$.trim($(v).find("description").text())
};
entries.push(entry);
});
//store entries
localStorage["entries"] = JSON.stringify(entries);
renderEntries(entries);
},
error:function(jqXHR,status,error) {
//try to use cache
if(localStorage["entries"]) {
$("#status").html("Using cached version...");
entries = JSON.parse(localStorage["entries"])
renderEntries(entries);
} else {
$("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
}
}
});
});
$("#mainPage").live("pagebeforeshow", function(event,data) {
if(data.prevPage.length) {
$("h1", data.prevPage).text("");
$("#entryText", data.prevPage).html("");
};
});
//Listen for the content page to load
$("#contentPage").live("pageshow", function(prepage) {
//Set the title
$("h1", this).text(entries[selectedEntry].title);
var contentHTML = "";
contentHTML += entries[selectedEntry].description;
contentHTML += '<p/><a href="'+entries[selectedEntry].link + '">Read Entry on Site</a>';
$("#entryText",this).html(contentHTML);
});

drmike01

Re: iScroll example?

11 years ago

I think you'd have to merge the pagebeforeshow and pageshow code from yours and mine into the same (although not 100% positive on that, but it makes sense; I don't know how conflicts between multiple event handlers on the same event is handled).

Sure, I meant to include the <head> and forgot.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Title</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/mystylesheet.css" rel="stylesheet" type="text/css"/>
<script src="scripts/phonegap-1.4.1.js" type="text/javascript"></script>
<script src="scripts/json2.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/my_init.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<script src="scripts/PushNotification.js" type="text/javascript"></script>
<script src="scripts/UAPhoneGapWrapper.js" type="text/javascript"></script>
<script src="scripts/my_core.js" type="text/javascript"></script>
<script src="scripts/my_messages.js" type="text/javascript"></script>
<script src="scripts/my_connections.js" type="text/javascript"></script>

<script src="scripts/iscroll.js" type="text/javascript"></script>
</head>

There's some stuff in there that you won't need, but I left it in regardless.

Top Reply

Response title

Attachments

jQuery Forum

iScroll example?

Replies(11)

Re: iScroll example?

Re: iScroll example?

Re: iScroll example?

Re: iScroll example?

Re: iScroll example?

Re: iScroll example?

Re: Re: iScroll example?

Re: iScroll example?

Re: iScroll example?

Re: Re: iScroll example?

Re: iScroll example?

Statistics

Tags

Actions