gthelp.com

Domain for sale - best offer

Welcome Guest, our newest member is: maxxxmodels2009  
User Name Password Save?
 DHTML Scroller with scrollbars

Post New Content Post New Content  

The help rating is: Thread Rating: 1 votes, 5.00 average. (more info)
Default 

DHTML Scroller with scrollbars

  #1  
Old August 11th, 2004, 02:27 PM
ranjan's Avatar
ranjan Offline
Editor
 
Join Date: Jul 2004
Location: Azusa
Posts: 243 12
Send a message via MSN to ranjan

Please take a look at CSS Scroller before you decide to use this script. A CSS Scroller is a better solution in terms of accessibility and code weight.

Example of DHTML Scroller

Within your script tags add the following:

Script Code:

 // dreamlettes.net
   
var dom document.getElementById; var ie document.all;
 function 
capEv(event,method){this[event] = method;};function relEv(event){ this[event] = null;};function getYs(e){ return ie event.clientY e.pageY;}
 function 
getEl(nm){var el dom document.getElementById(nm) : ie document.all[nm] : false;el.getTop = function(){return parseInt(el.offsetTop) || 0}; el.setTop = function(y){el.style.top y+"px"};el.getHeight = function(){return el.offsetHeight}; el.getClipHeight = function(){return el.offsetHeight}; el.capEv capEvel.relEv relEv; return el;}
   
document.capEv capEvdocument.relEv relEv;
   
sObj = function(stObjuObjdObjdgObjhObjcObj){
 
this.s; var self thisthis.tObj getEl(tObj); this.uObj getEl(uObj); this.dObj getEl(dObj); this.dgObj getEl(dgObj); this.hObj getEl(hObj); this.cObj getEl(cObj,hObj);
 
this.dH this.dgObj.getHeight(); this.tH this.tObj.getHeight(); this.obj cObj+"Object"; eval(this.obj+"=this"); this.tT this.dgObj.getTop(); this.tL this.tH-this.dHthis.tB this.tT+this.tLthis.hH this.hObj.getClipHeight(); this.cH this.cObj.getHeight(); this.cL this.cH-this.hHthis.sL this.tL/this.cLthis.sT null;
 
this.tObj.capEv("onmousedown", function(e){self.sJmp(e);return false}); this.uObj.capEv("onmousedown", function(){self.scroll(self.s);return false});
 
this.uObj.capEv("onmouseup", function(){self.stSc()}); this.uObj.capEv("onmouseout", function(){self.stSc()}); this.dObj.capEv("onmousedown", function(){self.scroll(-self.s);return false}); this.dObj.capEv("onmouseup", function(){self.stSc()});
 
this.dObj.capEv("onmouseout", function(){self.stSc()}); this.dgObj.capEv("onmousedown", function(e){self.sDg(e);return false}); if(iethis.dgObj.capEv("ondragstart", function(){return false});
   }
 
sObj.prototype.sDg = function(e){this.dSM getYs(e); this.dSO this.dgObj.getTop(); var self thisdocument.capEv("onmousemove", function(e){self.drag(e)}); document.capEv("onmouseup", function(){self.stD()});}
   
sObj.prototype.stD = function(){document.relEv("onmousemove"); document.relEv("onmouseup");}
 
sObj.prototype.drag = function(e){var curM getYs(e); var mDiff curM-this.dSM;var dD this.dSO+mDiff; var dM = (dD<this.tT) ? this.tT : (dD>this.tB) ? this.tB dD;this.dgObj.setTop(dM); var cM = -(dM-this.tT)*(1/this.sL);this.cObj.setTop(cM);}
 
sObj.prototype.scroll = function(s){var cM this.cObj.getTop()+s; var dM this.tT-Math.round(this.cObj.getTop()*(this.tL/this.cL)); if(cM 0cM 0; else if(cM < -this.cLcM = -this.cL;if(dM this.tTdM this.tT; else if(dM this.tBdM this.tB;this.cObj.setTop(cM); this.dgObj.setTop(dM); this.sT window.setTimeout(this.obj+".scroll("+s+")",25);}
   
sObj.prototype.stSc = function(){if(this.sTwindow.clearTimeout(this.sT); this.sT null;}
 
sObj.prototype.sJmp = function(e){ var curM getYs(e); var dD curM-(this.dH/2);var dM = (dD<this.tT) ? this.tT : (dD>this.tB) ? this.tB dD;this.dgObj.setTop(dM); var cM = -(dM-this.tT)*(1/this.sL); this.cObj.setTop(cM);}
   
window.onload = function(){scroller = new sObj(15,"track","up","down","drag","container","content");}; 


Within your body tag :
HTML Code:
<div id="up" style="position:absolute; left:310px; top:100px; background:#666699; width:18px; height:18px;"><img src="images/up.gif" alt="up" width="18" height="18"></div>
 <div id="track" style="position:absolute; left:310px; top:118px; background:#BFBFEA; width:18px; height:164px;"></div>
 <div id="drag" style="position:absolute; left:310px; top:118px; background:#666699; width:18px; height:36px;"><img src="images/drag.gif" alt="drag" width="18" height="36"></div>
 <div id="down" style="position:absolute; left:310px; top:282px; background:#666699; width:18px; height:18px;"><img src="images/down.gif" alt="down" width="18" height="18"></div>
 <div id="container" style="position:absolute; left:100px; top:100px; width:200px; height:200px; clip:rect(0,200px,200px,0); overflow:hidden; background:#BFBFEA">
     <div id="content" style="position:absolute; left:0px; top:0px; width:200px">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
     </div>
   </div>


Notes:


  1. Script doesnot work in older browsers like NS4
  2. Use images if required for arrows and drag bar
  3. The embedded styles for the divs can be converted into styles that go in your head section or external style sheets


__________________
ranjan || macromedia certified professional
http://www.dreamlettes.net || http://www.ranjan.ws
/(bb|[^b]{2})/ - That is the question...
 

Post New Content Post New Content  

Display Modes
Similar Titles
Dreamweaver: scroller (replies 1)
Dreamweaver: dhtml text scroller (replies 4)
Dreamweaver: more scrollbars (replies 4)


Staff - Contact Us - Main - Archive - Technorati Profile - Top  
vBulletin Software: Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Page generated in 1.53710 seconds with 11 queries