[thelist] Scrollable text area

Mon Apr 1 12:40:01 CST 2002

Hello Rob,
>From an original scrollable script originally developed by Thomas Brattli.
I like this script a lot and I hope it helps you out.

Good Luck,
Philip Warbasse
www.warabssedesign.com

-----------------------------------------
<HTML>
<HEAD>
<TITLE>Scrolling text</TITLE>

function verifyCompatibleBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    return this
}
bw=new verifyCompatibleBrowser()

var speed=50

var loop, timer

function ConstructObject(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'

this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?
eval(nest+'document.'+obj):0;

this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].
style:bw.ns4?eval(nest+'document.'+obj):0;
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
    this.up=MoveAreaUp;this.down=MoveAreaDown;
    this.MoveArea=MoveArea; this.x; this.y;
    this.obj = obj + "Object"
    eval(this.obj + "=this")
    return this
}
function MoveArea(x,y){
    this.x=x;this.y=y
    this.css.left=this.x
    this.css.top=this.y
}

function MoveAreaDown(move){
 if(this.y>-this.scrollHeight+objContainer.clipHeight){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+".down("+move+")",speed)
 }
}
function MoveAreaUp(move){
 if(this.y<0){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+".up("+move+")",speed)
 }
}

function PerformScroll(speed){
 if(initialised){
  loop=true;
  if(speed>0) objScroller.down(speed)
  else objScroller.up(speed)
 }
}

function CeaseScroll(){
    loop=false
    if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
    objContainer=new ConstructObject('divContainer')
    objScroller=new ConstructObject('divContent','divContainer')
    objScroller.MoveArea(0,0)
    objContainer.css.visibility='visible'
    initialised=true;
}
// end absolutely positioned scrollable area object scripts

</script>
</HEAD>

<body bgcolor="999999" onLoad="InitialiseScrollableArea()">

<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="javascript:;"
onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">[scroll
  up]</a> </div>
<div id="divDownControl"> <a href="javascript:;"
onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">[scroll
  down]</a> </div>
<div id="divContainer">
  <div id="divContent"> <b>Scroll Area Content Start</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam
nonnumy
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat
volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
cum
      soluta nobis eligend optio comque nihil quod a impedit anim id quod
maxim
      placeat facer possim omnis es voluptas assumenda est, omnis dolor
repellend.
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib
saepe
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam
nonnumy
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat
volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
cum
      soluta nobis eligend optio comque nihil quod a impedit anim id quod
maxim
      placeat facer possim omnis es voluptas assumenda est, omnis dolor
repellend.
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib
saepe
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <b>Scroll Area Content End</b> </div>
</div>
<!-- end absolutely positioned scrollable area object -->

</BODY>
</HTML>
--------------------------------------------------------
----- Original Message -----
From: "Rob Oviatt" <rgoviatt at nbnet.nb.ca>
To: "theList at evolt.org" <thelist at lists.evolt.org>
Sent: Monday, April 01, 2002 6:51 AM
Subject: [thelist] Scrollable text area

> I've been asked to build a small web site, in which most of the content
> will be located in a central text area.  The designer of the site doesn't
> want to use a frame set up, and insists on using graphic buttons to scroll
> up and down in this area (meaning no scroll bar).  Compatibility with
IE/NS
> 4.x browsers is a concern, which makes me wonder how to go about
> implementing this.  Iframe?  Textbox? Suggestions?
>
> I've done a bit of browsing through some javascript archives, but haven't
> found anything yet to do what I'm looking for.  Anyone know of a script
> that could do this?
>
> Any help or leads are appreciated.
>
> Rob Oviatt
>
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !
>