Javascript drag page?

**davelf** · 01-17-2011, 06:58 AM

I'm searching JS like this one:

http://www.pocarisweat.co.id/#/home

where you can drag the page.

Thx in advanced...

**djr33** · 01-17-2011, 08:23 AM

That page is incredibly complex and hard to analyze. However, I believe it is using flash and there are references to flash and swfs i the source code.
Doing that in Javascript would be very difficult.

**vwphillips** · 01-17-2011, 11:10 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[*/
.container {
  position:absolute;overflow:hidden;left:0px;top:0px;width:100%;height:750px;
}

#drag {
  position:absolute;left:0px;top:0px;width:1650px;height:2250px;background-Color:#FFFFCC;cursor:move;
}

#drag IMG {

 position:relative;top:300px;
}

.header {

 position:relative;z-Index:2;font-Size:50px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (19-August-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// To Drag and drop an element.
// The drag may be executed from the draggable object or a nested element(drag panel)
// Minimum and maximum drag limits may be specified for both 'X' and 'Y' coordinates.
// Specified functions may be called on mousedown, move or mouse up of the object.
//
// There may be as many applications as required on a page.

// ****** Application Notes

// ***** The HTML and CSS Code
//
//  The drag objects position must assigned as 'relative' or absolute'
//  and the 'left', top' and 'z-Index' assigned by the drag objects style class or inline style.
//  Options allow the use of 'right' and 'bottom' in place of 'left' and top' respectively.

// ***** Initialising the Script
//
// The script would normally initialised by a BODY or window event call assign the instance of the script to a variable.
// e.g.
// var oop=new zxcDrag(document.getElementById('tst'),false,'xy',[0,300,0,250])
// where:
//  parameter 1 = the object to activate drag on mousedown.                                (object)
//  parameter 2 = (optional) the object to dragged on mousemove.                           (object, default to parameter 1 object)
//  parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y.       (string, default 'xy')
//                 the default style positions are 'left' and 'top'
//                 to use 'right' include 'r', to use 'bottom' include 'b'.
//  parameter 4 = (optional) an array defining the minimum and maximum x and y coordinates (array, default [])
//                 where:
//                 field 0 = the minimum x cordinate. (digits, null = not set)
//                 field 1 = the maximum x cordinate. (digits, null = not set)
//                 field 2 = the minimum y cordinate. (digits, null = not set)
//                 field 3 = the maximum y cordinate. (digits, null = not set)
//  parameter 4 = (optional) a function name to be called on mouseup(see Note 2).          (function object)
//  parameter 5 = (optional) a function name to be called on mousemove(see Note 2).        (function object)
//  parameter 6 = (optional) a function name to be called on mousedown(see Note 2).        (function object)

// Note 1:
//  On mousedown of the object the object z_index is increased by 10.
//  On the mouseup the z-Index is restored to the original z-Index.

// Note 2:
//  When a function is called the zxcDrag function is passed to the function.
//  The drag object may be access by argument[0].dobj, and the event as argument[1].
//  e.g.
//   function Test(obj,evt){
//    alert(obj.dobj);
//    alert(evt.type);
//   }


// Functional Code Size 2.38K

// ****** Functional Code - NO NEED to Change

function zxcDrag(obj,root,dxy,mm,uf,mf,df){
 this.dobj=root?root:obj;
 mm=mm||['x','x','y','y'];
 dxy=(dxy||'xy').toLowerCase();
 this.dx=dxy.indexOf('x')>-1;
 this.dy=dxy.indexOf('y')>-1;
 this.xmde=dxy.indexOf('r')<0?'left':'right';
 this.ymde=dxy.indexOf('b')<0?'top':'bottom';
 this.mm=[typeof mm[0]=='number'?mm[0]:-100000,typeof mm[1]=='number'?mm[1]:100000,typeof mm[2]=='number'?mm[2]:-100000,typeof mm[3]=='number'?mm[3]:100000];
 this.df=df||false; this.mf=mf||false; this.uf=uf||false;
 this.addevt(obj||root,'mousedown','down');
 this.addevt(document,'mousemove','move');
 this.addevt(document,'mouseup','up');
 return this;
}

zxcDrag.prototype.down=function(ev){
 if (!this.drag){
  document.onselectstart=function(event){ window.event.returnValue=false; };
  this.lastX=ev.clientX;
  this.lastY=ev.clientY;
  this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
  this.pos=[zxcLTZ(this.dobj,this.xmde),zxcLTZ(this.dobj,this.ymde)];
  this.drag=true;
  if (this.df) this.df(this,ev);
 }
 if (ev.target) ev.preventDefault();
 return false;
}

zxcDrag.prototype.move=function(ev){
 if (this.drag){
  var mx=ev.clientX,my=ev.clientY,x=this.pos[0]+(mx-this.lastX),y=this.pos[1]+(my-this.lastY);
  if (this.dx&&x>=this.mm[0]&&x<=this.mm[1]){
   this.pos[0]=x*(this.xmde=='left'?1:-1);
   this.dobj.style[this.xmde]=this.pos[0]+'px';
   this.lastX=mx;
  }
  if (this.dy&&y>=this.mm[2]&&y<=this.mm[3]){
   this.pos[1]=y*(this.ymde=='top'?1:-1);
   this.dobj.style[this.ymde]=this.pos[1]+'px';
   this.lastY=my;
  }
  if (this.mf) this.mf(this,ev);
 }
 if (ev.target) ev.preventDefault();
 return false;
}

zxcDrag.prototype.up=function(ev){
 if (this.drag){
  this.drag=false;
  this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')-10+'';
  if (this.uf) this.uf(this,ev);
  document.onselectstart=null;
 }
}

zxcDrag.prototype.addevt=function(o,t,f){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](e); };
  else o['on'+t]=o[f];
 }
}

function zxcLTZ(obj,p){
 if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')],10);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}

/*]]>*/
</script>



</head>

<body>
<div class="header" >HEADER text</div>
<div class="container">
 <div id="drag" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" width="400" height="300" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" width="400" height="300" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" width="400" height="300" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" width="400" height="300" />
  </div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

new zxcDrag(document.getElementById('drag'),null,'xy',[-400,0,-600,0]);
/*]]>*/
</script></body>

</html>

**davelf** · 01-19-2011, 02:20 AM

Originally Posted by djr33

That page is incredibly complex and hard to analyze. However, I believe it is using flash and there are references to flash and swfs i the source code.
Doing that in Javascript would be very difficult.

already check this page before and it's definitely in javascript not flash.
But i just don't have any idea what that scripts name.
But Thanks anyway djr33

Originally Posted by vwphillips

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[*/
.container {
  position:absolute;overflow:hidden;left:0px;top:0px;width:100%;height:750px;
}

#drag {
  position:absolute;left:0px;top:0px;width:1650px;height:2250px;background-Color:#FFFFCC;cursor:move;
}

#drag IMG {

 position:relative;top:300px;
}

.header {

 position:relative;z-Index:2;font-Size:50px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (19-August-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// To Drag and drop an element.
// The drag may be executed from the draggable object or a nested element(drag panel)
// Minimum and maximum drag limits may be specified for both 'X' and 'Y' coordinates.
// Specified functions may be called on mousedown, move or mouse up of the object.
//
// There may be as many applications as required on a page.

// ****** Application Notes

// ***** The HTML and CSS Code
//
//  The drag objects position must assigned as 'relative' or absolute'
//  and the 'left', top' and 'z-Index' assigned by the drag objects style class or inline style.
//  Options allow the use of 'right' and 'bottom' in place of 'left' and top' respectively.

// ***** Initialising the Script
//
// The script would normally initialised by a BODY or window event call assign the instance of the script to a variable.
// e.g.
// var oop=new zxcDrag(document.getElementById('tst'),false,'xy',[0,300,0,250])
// where:
//  parameter 1 = the object to activate drag on mousedown.                                (object)
//  parameter 2 = (optional) the object to dragged on mousemove.                           (object, default to parameter 1 object)
//  parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y.       (string, default 'xy')
//                 the default style positions are 'left' and 'top'
//                 to use 'right' include 'r', to use 'bottom' include 'b'.
//  parameter 4 = (optional) an array defining the minimum and maximum x and y coordinates (array, default [])
//                 where:
//                 field 0 = the minimum x cordinate. (digits, null = not set)
//                 field 1 = the maximum x cordinate. (digits, null = not set)
//                 field 2 = the minimum y cordinate. (digits, null = not set)
//                 field 3 = the maximum y cordinate. (digits, null = not set)
//  parameter 4 = (optional) a function name to be called on mouseup(see Note 2).          (function object)
//  parameter 5 = (optional) a function name to be called on mousemove(see Note 2).        (function object)
//  parameter 6 = (optional) a function name to be called on mousedown(see Note 2).        (function object)

// Note 1:
//  On mousedown of the object the object z_index is increased by 10.
//  On the mouseup the z-Index is restored to the original z-Index.

// Note 2:
//  When a function is called the zxcDrag function is passed to the function.
//  The drag object may be access by argument[0].dobj, and the event as argument[1].
//  e.g.
//   function Test(obj,evt){
//    alert(obj.dobj);
//    alert(evt.type);
//   }


// Functional Code Size 2.38K

// ****** Functional Code - NO NEED to Change

function zxcDrag(obj,root,dxy,mm,uf,mf,df){
 this.dobj=root?root:obj;
 mm=mm||['x','x','y','y'];
 dxy=(dxy||'xy').toLowerCase();
 this.dx=dxy.indexOf('x')>-1;
 this.dy=dxy.indexOf('y')>-1;
 this.xmde=dxy.indexOf('r')<0?'left':'right';
 this.ymde=dxy.indexOf('b')<0?'top':'bottom';
 this.mm=[typeof mm[0]=='number'?mm[0]:-100000,typeof mm[1]=='number'?mm[1]:100000,typeof mm[2]=='number'?mm[2]:-100000,typeof mm[3]=='number'?mm[3]:100000];
 this.df=df||false; this.mf=mf||false; this.uf=uf||false;
 this.addevt(obj||root,'mousedown','down');
 this.addevt(document,'mousemove','move');
 this.addevt(document,'mouseup','up');
 return this;
}

zxcDrag.prototype.down=function(ev){
 if (!this.drag){
  document.onselectstart=function(event){ window.event.returnValue=false; };
  this.lastX=ev.clientX;
  this.lastY=ev.clientY;
  this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
  this.pos=[zxcLTZ(this.dobj,this.xmde),zxcLTZ(this.dobj,this.ymde)];
  this.drag=true;
  if (this.df) this.df(this,ev);
 }
 if (ev.target) ev.preventDefault();
 return false;
}

zxcDrag.prototype.move=function(ev){
 if (this.drag){
  var mx=ev.clientX,my=ev.clientY,x=this.pos[0]+(mx-this.lastX),y=this.pos[1]+(my-this.lastY);
  if (this.dx&&x>=this.mm[0]&&x<=this.mm[1]){
   this.pos[0]=x*(this.xmde=='left'?1:-1);
   this.dobj.style[this.xmde]=this.pos[0]+'px';
   this.lastX=mx;
  }
  if (this.dy&&y>=this.mm[2]&&y<=this.mm[3]){
   this.pos[1]=y*(this.ymde=='top'?1:-1);
   this.dobj.style[this.ymde]=this.pos[1]+'px';
   this.lastY=my;
  }
  if (this.mf) this.mf(this,ev);
 }
 if (ev.target) ev.preventDefault();
 return false;
}

zxcDrag.prototype.up=function(ev){
 if (this.drag){
  this.drag=false;
  this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')-10+'';
  if (this.uf) this.uf(this,ev);
  document.onselectstart=null;
 }
}

zxcDrag.prototype.addevt=function(o,t,f){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](e); };
  else o['on'+t]=o[f];
 }
}

function zxcLTZ(obj,p){
 if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')],10);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}

/*]]>*/
</script>



</head>

<body>
<div class="header" >HEADER text</div>
<div class="container">
 <div id="drag" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" width="400" height="300" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" width="400" height="300" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" width="400" height="300" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" width="400" height="300" />
  </div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

new zxcDrag(document.getElementById('drag'),null,'xy',[-400,0,-600,0]);
/*]]>*/
</script></body>

</html>

Thanks a lot Phil this is exactly what i need.

Another question, do you see the URL when you move / drag the page into one section.
Articles for example, how to make the URL write #articles, even there no triggering effect like click to make that URL write the new URL. That's totally awesome if we can make a direct URL even in a single page, hehehe

.

**djr33** · 01-19-2011, 04:18 AM

It's using both Javascript and Flash. Because it's very hard to take apart the pieces of the page without a full analysis/deconstruction, I still think flash may be involved. What else would flash be doing on the page? There are flash objects, loaded via Javascript, doing something, anyway.

Glad the solution works though.

A url like #name is not meant to reload the page. It's for an anchor and you can do that without disrupting the current page. It allows for bookmarking and for using the forward and back arrows. So just "load" the page.htm#name, and that's it.

**davelf** · 01-19-2011, 12:01 PM

hi djr, like you said before. That website is combination of javascript and flash, and it's true that's really complex.

But i have another example here, may be you've ever see what kind of javascript they use here.

http://www.visuall.be/

I think this time, the example is more simple, but again i just have one clue how to make it.

We can use anchor, but the other problem thing is with anchor we can not have the sliding effect. Anchor can move vertical or horizontal, but in this website you can see it move diagonal.

So any advise for me, hehehe

**davelf** · 01-19-2011, 02:05 PM

ah found it, may be i can use this one:
http://scripterlative.com/files/softscroll.htm

**vwphillips** · 01-20-2011, 11:09 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[*/

.content {
  position:absolute;left:0px;top:100px;width:99%;height:200px;
}

#slide {
  position:absolute;left:0px;top:0px;width:1000000px;height:200px;
}

.page {
  position:relative;left:0px;top:0px;width:600px;height:200px;float:left;background-Color:#FFFFCC;
}

.page IMG {
  margin-Left:200px;
}

#menu {
  position:absolute;left:0px;top:20px;width:100px;height:200px;

}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body >
<div class="content" >

 <div id="slide" >
  <div class="page" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Img" />
  </div>
  <div class="page" style="background-Color:#FFCC66;" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Img" />
  </div>
  <div class="page" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Img" />
  </div>
  <div class="page" style="background-Color:#FFCC66;" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Img" />
  </div>
  <div class="page" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Img" />
  </div>
 </div>
<ul id="menu" >
  <li>Page 1</li>
  <li>page 2</li>
  <li>Page 3</li>
  <li>page 4</li>
  <li>Page 5</li>
</ul>
</div>
<script type="text/javascript">
/*<![CDATA[*/

function Slider(o){
 var oop=this,slide=document.getElementById(o.SlideID),pages=this.bycls(o.PageClassName,slide),menu=document.getElementById(o.MenuID),lis=menu.getElementsByTagName('LI');
 this.obj=slide.parentNode;
 this.obj.style.overflow='hidden';
 for (var z0=0;z0<pages.length;z0++){
  if (lis[z0]){
   this.addevt(lis[z0],'mouseup','animate',z0);
  }
 }
 this.slide=new zxcAnimate('left',slide,0);
 this.pages=pages;
 this.ms=o.AnimationSpeed||1000;
 if (o.ReSize){
  this.resize();
  this.addevt(window,'resize','resize');
 }
}

Slider.prototype={

 animate:function(nu){
  var lft=-this.pages[nu].offsetLeft;
  this.slide.animate(this.slide.data[0],lft,this.ms,[0,this.pages[nu].offsetWidth],'s');
 },

 resize:function(nu){
  for (var z0=0;z0<this.pages.length;z0++){
   this.pages[z0].style.width=this.obj.offsetWidth+'px';
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
 },

 bycls:function (nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }



}

new Slider({
 SlideID:'slide',
 PageClassName:'page',
 AnimationSpeed:1000,
 MenuID:'menu',
 ReSize:true
});

/*]]>*/
</script>
</body>

</html>

**davelf** · 01-21-2011, 03:05 AM

thank you very much Phil. But it's just horizontal, just for share. You can use the diagonal, horizontal, and vertical with this example

**vwphillips** · 01-21-2011, 08:39 AM

Code:

<html>
<head>
<style type="text/css">
body {
	margin:15px;
}
td {
	text-align:center;
	vertical-align:middle;
}
a:link {
	text-decoration:none;
	color:#000;
}
a:visited {
	text-decoration:none;
	color:#000;
}
a:hover {
	text-decoration:none;
	color:#FFF;
	background:#000;
}

</style>
<script type="text/javascript">
// Progressive Scroll To (11-November-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk



// Functional Code(1.33K) - NO NEED to Change

// parameter 0 = the scroll duration in milli seconds. (default = 2000)
// parameter 1 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
function zxcScrollTo(ms,c){
 this.mS=ms||2000;
 this.to=null;
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
}

zxcScrollTo.prototype={

// parameter 0 = number = the new scroll x position or string = ID name of the anchor element.
// parameter 1 = number = the new scroll y position or string = ID name of the anchor element. (default = parameter 0)
 ScrollTo:function(x,y){
  y=typeof(y)=='undefined'?x:y;
  x=typeof(x)=='number'?x:this.pos(document.getElementById(x))[0];
  y=typeof(y)=='number'?y:this.pos(document.getElementById(y||x))[1];
  if (typeof(x)=='number'&&typeof(y)=='number'){
   clearTimeout(this.to);
   this.srttime=new Date().getTime();
   var scroll=this.scroll();
   this.data=[[scroll[0],x],[scroll[1],y]];
   this.inc=Math.PI/(2*this.mS);
   this.cng();
  }
 },

 cng:function(){
  var ms=new Date().getTime()-this.srttime,scroll=[],z0,d;
  for (z0=0;z0<2;z0++){
   d=this.data[z0][1]-this.data[z0][0];
   scroll[z0]=Math.floor(d/this.mS*ms+this.data[z0][0]);
  scroll[z0]=Math.floor(this.c=='s'?d*Math.sin(this.inc*ms)+this.data[z0][0]:this.c=='c'?this.data[z0][1]-d*Math.cos(this.inc*ms):d/this.mS*ms+this.data[z0][0])

  }
  window.scrollTo(scroll[0],scroll[1]);
  if (ms<this.mS){
   this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
  }
  else {
   window.scrollTo(this.data[0][1],this.data[1][1]);
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },


 scroll:function(){
  if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
  else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
  return [document.body.scrollLeft,document.body.scrollTop];
 }

}

var S=new zxcScrollTo(1000);
</script>

</head>

<body>
<table width="2400px" height="1200px" border="5">
  <tr>
    <td width="200px" height="100px" id="TL">
     <a href="javascript:S.ScrollTo('TR');">Right</a>
     <a href="javascript:S.ScrollTo('BL');">Down</a>
    </td>
    <td width="2000px" rowspan="3">
    <img src="http://nelsoncollective.com/img/skyrepeat1.gif" width="100%" height="100%">
    </td>
    <td width="200px" id="TR">
     <a href="javascript:S.ScrollTo('TL')">Left</a>
     <a href="javascript:S.ScrollTo('BR');">Down</a>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td width="200px">&nbsp;</td>

  </tr>
  <tr>
    <td height="100px" id="BL">
     <a href="javascript:S.ScrollTo('TL');">Up</a>
     <a href="javascript:S.ScrollTo('BR');">Right</a>
    </td>
    <td width="200px" id="BR">
     <a href="javascript:S.ScrollTo('BL');">Left</a>
     <a href="javascript:S.ScrollTo('TR');">Up</a>
    </td>
  </tr>
</table>

<div style="position:absolute; top:1200px; left:2300px; border:thick"></div>
</body>
<html>

Thread: Javascript drag page?

Thread Tools

Search Thread

Javascript drag page?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions