Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Macintosh Using scrollBy with Safari for iPad

    Ok, so I have multiple issues, but this is the one I have not been able to work around. I'm building a simple website for personal use, so I know it only has to work on Safari for the iPad, a simple catalog of song charts for use on stage in my piano bar. Everything works GREAT in Safari/Chrome for Windows 7, but doesn't seem to quite work on Safari for iPad.

    The issue I'm having is I've set up a DIV with two image buttons on it to execute a ScrollBy command to scroll the page up or down depending on the button. Everything works great on Safari for Windows 7, as in I can keep scrolling down the page by pressing the scroll down button multiple times. On iPad, it only works once, and will not continue to scroll. I've also tried it in Atomic Lite for iPad, with the same effect. I've mocked up a simple page, to take all the other variables out.

    http://www.duelingpianopiano.com/jef...testscroll.htm

    Eventually, I will be installing it here:
    http://www.duelingpianopiano.com/jef...testscroll.htm


    The code in the head tag is below:
    <code>
    <script language="JavaScript" type="text/javascript">
    <!-- Copyright 2003, Sandeep Gangadharan -->
    <!-- For more free scripts go to http://sivamdesign.com/scripts/ -->
    <!--
    var y1 = 510; // change the # on the left to adjuct the Y co-ordinate
    (document.getElementById) ? dom = true : dom = false;

    function hideIt() {
    if (dom) {document.getElementById("layer1").style.visibility='hidden';}
    }

    function showIt() {
    if (dom) {document.getElementById("layer1").style.visibility='visible';}
    }

    function placeIt() {
    if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";}
    if (document.all) {document.all["layer1"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";}
    window.setTimeout("placeIt()", 10); }
    // -->
    </script>

    <script language="JavaScript">
    function scrollup(){
    parent.scrollBy(0,-window.innerHeight-50);
    }
    function scrolldown(){
    parent.scrollBy(0,window.innerHeight-50);
    }
    </script>
    </code>

    The code from the body tag:
    <code>
    <body topmargin="00" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFF00" bgcolor="#FFFFFF" "overflow: visible" onLoad="placeIt(); showIt()">

    INSERT CONTENT HERE

    <div id="layer1" style="position:absolute; right:0; width:50px; height:150px; visibility:hidden">
    <font face="verdana, arial, helvetica, sans-serif" size="2">
    <div style="float:left; background-color: ; padding:0px; border:0px solid black">

    <img src="upbutton.png" width=50 height=75 border="0" align="left" onClick="scrollup();">
    <img src="downbutton.png" width=50 height=75 border="0" align="left" onClick="scrolldown();">
    </div>
    </code>

    Like I said, it works just as needed in Safari/Chrome for Windows 7, but not on iPad. Doesn't seem to work in IE 8, but that doesn't bother me. I have not tested in FireFox.

    Your ideas are much appreciated. I'm not an Apple person, so maybe there is a well known issue with scrollBy and Safari for iPad, that I'm not aware of. If that is the case, if anyone has an idea for a direction for a workaround that would be great as well. Eventually, I would like to use the smooth scrolling scripts that I've seen out there, but that is way down the road. I'm more worried about the functionality as is.
    Last edited by clarkj03; 09-04-2010 at 01:59 AM. Reason: Looks like I didn't do the <code> tags correctly...


 

Tags for this Thread

Posting Permissions

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