script to pan web page

**pinkish** · 08-08-2012, 09:25 PM

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?

**vwphillips** · 08-09-2012, 10:59 AM

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>

Thread: script to pan web page

Thread Tools

Search Thread

script to pan web page

Bookmarks

Bookmarks

Posting Permissions