move Scrolling HTML Bookmarks horizontally

**castanets** · 11-11-2010, 07:07 AM

-------------

Script: Scrolling HTML bookmarks
http://www.dynamicdrive.com/dynamici...markscroll.htm

hello and thanks
i was wondering how to make this script scroll horizontally to
elements - it does up and down swell but moves awkwardly if at
all across the page. it ends up in the right place if you use anchors
instead of object ids but moves strangely and then you're stuck using anchors.
i tried telling it to scroll to coordinates - i wonder if its functionality
can be extended to the window.scrollTo command?
i don't know javascript barely at all but i
i tested out this cube with some variations

http://nelsoncollective.com/-scrolltest.html

-------------

**vwphillips** · 11-11-2010, 12:21 PM

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">
// Scroll To (11-November-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk


function zxcScrollTo(ms){
 this.mS=ms||2000;
 this.to=null;
}

zxcScrollTo.prototype={

// parameter 0 = number = the new scroll x position or ID name of the anchor element
// parameter 1 = number = the new scroll y position or ID name of the anchor element
 ScrollTo:function(x,y){
  x=typeof(x)=='number'?x:this.pos(document.getElementById(x))[0];
  y=typeof(y)=='number'?y:this.pos(document.getElementById(y))[1];
  clearTimeout(this.to);
  this.srttime=new Date().getTime();
  var scroll=this.scroll();
  this.data=[[scroll[0],x],[scroll[1],y]];
  this.cng();
 },

 cng:function(){
  var ms=new Date().getTime()-this.srttime;
  for (var data=[],z0=0;z0<2;z0++){
   data[z0]=Math.floor((this.data[z0][1]-this.data[z0][0])/this.mS*ms+this.data[z0][0]);
  }
  window.scrollTo(data[0],data[1]);
  if (ms<this.mS){
   this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
  }
  else {
   this.data[0]=this.data[2];
  }
 },

 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(1500,0);">Right</a>
     <a href="javascript:S.ScrollTo(0,1000);">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(0,0)">Left</a>
     <a href="javascript:S.ScrollTo(1500,1000);">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(0,0);">Up</a>
     <a href="javascript:S.ScrollTo(1500,1500);">Right</a>
    </td>
    <td width="200px" id="BR">
     <a href="javascript:S.ScrollTo(0,1500);">Left</a>
     <a href="javascript:S.ScrollTo(1500,0);">Up</a>
    </td>
  </tr>
</table>

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

**castanets** · 11-11-2010, 11:05 PM

thanks vic!
that works really well! the only strange thing is that if the browser window is resized it doesn't end up at the same coordinates. could you clarify the syntax for scrolling to an id? replacing the x,y with a name doesn't seem the trick.

thanks again

**vwphillips** · 11-12-2010, 09:57 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: move Scrolling HTML Bookmarks horizontally

Thread Tools

Search Thread

move Scrolling HTML Bookmarks horizontally

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

Bookmarks

Bookmarks

Posting Permissions