{"id":914,"date":"2012-04-22T00:45:19","date_gmt":"2012-04-22T07:45:19","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=914"},"modified":"2012-04-22T00:45:19","modified_gmt":"2012-04-22T07:45:19","slug":"using-jquery-mobile-and-iscroll4","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/04\/using-jquery-mobile-and-iscroll4\/","title":{"rendered":"Using jQuery Mobile and iScroll4"},"content":{"rendered":"<p>Using jQuery Mobile and iScroll4 is actually pretty simple once you figure out how it all works. I implemented iScroll-Lite, which lacks a bunch of the extra features touted on the <a href=\"http:\/\/cubiq.org\/iscroll-4\">developer&#8217;s homepage<\/a>. This works with version 1.1 final of jQuery Mobile!!<\/p>\n<p><a href=\"http:\/\/cubiq.org\/iscroll-4\">Download iScroll<\/a> and find the iscroll-lite.js file.<\/p>\n<p><a href=\"https:\/\/github.com\/yappo\/javascript-jquery.mobile.iscroll\">Download the jQuery iScroll4 Plugin<\/a> from GitHub.<\/p>\n<p>Link these two files in your main index.html like so:<\/p>\n<p>[code]<script type=\"text\/javascript\" src=\"js\/jquery-1.7.1.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"js\/jquery.mobile-1.1.0.min.js\"><\/script><br \/>\n<script type=\"application\/javascript\" src=\"js\/iscroll-lite.js?v4\"><\/script><br \/>\n<script src=\"js\/jquery.mobile.iscroll.js\"><\/script>[\/code]<\/p>\n<p>Now in every page that you want to have fixed headers with a body scrolling in the middle, please the following tag:<\/p>\n<p>[code]<\/p>\n<section data-role=\"page\" id=\"page1\" data-iscroll=\"enable\">[\/code]<\/p>\n<p>or if you aren&#8217;t using HTML5 yet (which you should):<\/p>\n<p>[code]<\/p>\n<div data-role=\"page\" id=\"page1\" data-iscroll=\"enable\">[\/code]<\/p>\n<p>Last but not least, put a data-iscroll tag on the scroll scrolling element.<\/p>\n<p>In the end, it should look something like this:<\/p>\n<p>[code]<\/p>\n<section data-role=\"page\" id=\"page1\" data-iscroll=\"enable\">\n<header data-role=\"header\" data-id=\"persist\" data-position=\"fixed\" data-tap-toggle=\"false\">\n<h1>D&amp;D<\/h1>\n<p>        <a href=\"#\" data-icon=\"gear\" class=\"ui-btn-right\">About<\/a><br \/>\n   \t<\/header>\n<div data-role=\"content\" class=\"content\">\n<div data-iscroll=\"scroller\">\n<ul data-role=\"listview\">\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<li>test<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<footer data-role=\"footer\" data-id=\"persistFooter\" data-position=\"inline\" data-tap-toggle=\"false\">\n<div data-role=\"navbar\">\n<ul>\n<li><a href=\"#page1\" data-transition=\"fade\" class=\"ui-btn-active ui-state-persist\">Character<\/a><\/li>\n<li><a href=\"#page2\" data-transition=\"fade\">Stats<\/a><\/li>\n<li><a href=\"#page3\" data-transition=\"fade\">Gear<\/a><\/li>\n<li><a href=\"#page4\" data-transition=\"fade\">Skills<\/a><\/li>\n<\/ul><\/div>\n<\/footer>\n<\/section>\n<p>[\/code]<\/p>\n<p>Good luck! That took me way longer than it should have&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using jQuery Mobile and iScroll4 is actually pretty simple once you figure out how it all works. I implemented iScroll-Lite, which lacks a bunch of the extra features touted on the developer&#8217;s homepage. This works with version 1.1 final of jQuery Mobile!! Download iScroll and find the iscroll-lite.js file. Download the jQuery iScroll4 Plugin from <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/04\/using-jquery-mobile-and-iscroll4\/#more-'\" class=\"more-link\"><br \/>more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,3,25],"tags":[9,59,120,39],"class_list":["post-914","post","type-post","status-publish","format-standard","hentry","category-blog","category-ios-development","category-jquery-mobile","tag-development","tag-iscroll","tag-jquery-mobile","tag-plugin"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/914"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=914"}],"version-history":[{"count":4,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/914\/revisions"}],"predecessor-version":[{"id":918,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/914\/revisions\/918"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=914"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}