SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need proper order of iScroll5 parts

    I am able to pinch/zoom an image if I have the iScroll5 JavaScript in this order on a plain HTML page, but it doesn't pinch/zoom when wrapped around database results.

    It works in a plain HTML page in this order:

    HEAD

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=0.1, maximum-scale=1.0"> 
    
    <style>] iscroll style stuff goes here ]</style>
    
    <script type="text/javascript" src="js/iscroll-zoom.js"></script>
    
    function loaded() { // http://iscrolljs.com/
    	myScroll = new IScroll('#wrapper', {
    		zoom: true,
    		zoomMin: 0.1,
    		scrollbars: false,
    		scrollX: true,
    		scrollY: true,
    		tap: true,
    		HWCompositing: false
    	});
    }
    
    function returnTo() {
    	window.location="index.html";
    }
    </script>
    BODY

    HTML Code:
    <body onload="loaded()">
    
    <div id='wrapper'><div id='scroller'>
    	<ul><li><a id='output' href='index.html' onclick='returnTo()'></a></li></ul>
    </div></div>
    
    <script>
    var newWP = document.createElement('img');
    newWP.src = '0buggies/buggies/wallpaper.jpg';
    document.getElementById('output').appendChild(newWP);
    </script>
    
    </body>
    In the database version, putting the elements in the same order does not result in pinch/zoom. Somehow the iscroll code is not recognizing the database result (which is one image pulled from the database that the user chose).

    I have, in my latest shuffling of contents:

    HEAD

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=0.1, maximum-scale=1.0"> 
    
    <style>[ iscroll style stuff goes here ]</style>
    
    <script type="text/javascript" src="js/iscroll-zoom.js"></script>
    BODY

    HTML Code:
    <body>
    
    <div id='wrapper'><div id='scroller'>
    	<ul><li><a id='output' href='index.html' onclick='returnTo()'></a></li></ul>
    </div></div>
    
    <script>
    [ database query and results ]
    
    function querySuccess(tx, results) {
    	console.log("~ ~ ~ ~ ~  querySuccess display_pic");
    	var path = results.rows.item.category + 
    		"/" + results.rows.item.subcat + 
    		"/" + results.rows.item.filename_lg;
    	var newWP = document.createElement('img');
    	newWP.src = path;
    	document.getElementById('output').appendChild(newWP);
    	loaded();
    }
    function returnTo() {
    	window.location="index.html";
    }
    
    function loaded() { // http://iscrolljs.com/
    	myScroll = new IScroll('#wrapper', {
    		zoom: true,
    		zoomMin: 0.1,
    		scrollbars: false,
    		scrollX: true,
    		scrollY: true,
    		tap: true,
    		HWCompositing: false
    	});
    }
    
    </script>
    </body>
    Because it works in plain HTML, I think there must be something wrong with the order it appears in the database version. Thoughts?
    Steve Husting

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If I go back to innerHTML like this:

    Code:
    function querySuccess(tx, results) {
    		document.getElementById("output").innerHTML = "<a href='index.html'><img id='rect' src='" + results.rows.item(i).category + 
    		"/" + results.rows.item(i).subcat + 
    		"/" + results.rows.item(i).filename_lg + 
    		"'></a>";
    
    }
    For the body like this:

    Code:
    <div id="wrapper"><div id="scroller">
    	<ul><li id="output">
    	</li></ul>
    </div></div>
    The image shows up, but doesn't zoom or accept the a href tap.
    Steve Husting


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •