Advanced Search

Results 1 to 2 of 2

Thread: script to pan web page

  1. #1
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow script to pan web page

    Hello everyone,

    I hope someone here can help me, I've looked everywhere without finding a solution to my problem.

    I would like to have a web page with buttons and when a button is clicked, the whole 'screen' pans to the left and from the right side comes to content corresponding to that button. There is a "back" link that would pan back to the original screen.

    I made a mockup in Photoshop and uploaded it to youtube, it's much simpler to understand it if you see it.

    http://www.youtube.com/watch?v=ozfQJmpfcbg

    As you can see, the background is wider than the screen. I would like to do this without Flash.

    Do you have any ideas on the subject?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .parent {
      position:fixed;left:0px;top:0px;width:100%;height:500px;background-Color:#FFFFCC;
    }
    
    .frame {
      position:relative;left:0px;top:0px;width:100%;height:500px;background-Color:red;
    }
    
    .red {
      background-Color:red;
    }
    
    .green {
      background-Color:green;
    }
    
    /*]]>*/
    </style>
    </head>
    <body>
    
    <div id="tst" class="parent" >
     <div class="frame">
      <div class="frame red"><input type="button" name="" value="GoTo 1" onmouseup="zxcFrameSlide.GoTo('tst',1);"/></div>
      <div class="frame green"><input type="button" name="" value="GoTo 0" onmouseup="zxcFrameSlide.GoTo('tst',0);"/></div>
     </div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcFrameSlide={
    
     init:function(o){
      var obj=document.getElementById(o.ID),ms=o.SlideDuration,slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,w=0,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        clds[z0].style.position='absolute';
        clds[z0].style.left=w+'px';
        ary.push(-w);
        w+=clds[z0].offsetWidth;
       }
      }
      this['zxc'+o.ID]={
       id:o.ID,
       obj:obj,
       slide:slide,
       ary:ary,
       w:w,
       ms:typeof(ms)=='number'?ms:1000,
       now:0
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&typeof(o.ary[nu])=='number'){
       clearTimeout(o.dly);
       this.animate(o,o.now,o.ary[nu],new Date(),o.ms,Math.PI/(2*o.ms));
      }
     },
    
     animate:function(o,f,t,srt,mS,inc){
      var oop=this,ms=new Date().getTime()-srt,now=Math.floor((t-f)*Math.sin(inc*ms)+f);
      if (isFinite(now)){
       o.slide.style.left=now+'px';
       o.now=now;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,inc); },10);
      }
      else {
       o.now=t;
       o.slide.style.left=t+'px';
      }
     }
    
    }
    
    zxcFrameSlide.init({
     ID:'tst',
     SlideDuration:1000
    });
    
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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
  •