Text Viewer – Scroll Up or Down

[Total: 0    Average: 0/5]

This shows how to have a text box scroll up or down on a mouse over.

Body Code:

<SCRIPT TYPE=text/javascript>

// adjust the position values here, and in the html, to suit your use
var pos=20;     // initial top position
var stp=10;     // step increment size
var spd=150;    // speed of increment
var upr=-450;   // upper limiter
var lwr=20;     // lower limiter
var tim;        // timer variable
var off_l=80;   // left offset
var off_t=80;   // top offset
var off_b=270;  // bottom offset
var slb_w=300;  // slab width
var slb_h=800;  // slab height
var fnt_f="verdana"; // font name
var fnt_h="8pt";    // font size
var bgc_t="white"; // top backgroundcolor
var bgc_b="white"; // bottom backgroundcolor
var bgc_s="white"; // slab backgroundcolor

var slab_content = 'Just alot<BR>of<BR>text<BR>a<BR>b<BR>c<BR>d<BR>e<BR>f<BR>g<BR>h<BR>i';
    slab_content += '<BR>a<BR>b<BR>c<BR>d<BR>e<BR>f<BR>g<BR>h';
    slab_content += '<BR>a<BR>b<BR>c<BR>d<BR>e<BR>f<BR>g<BR>h';
// top slab border 
var divTop_content="";

// bottom slab border
var divBtm_content = '<HR><TABLE BORDER="0" WIDTH="100%"><TR><TD ALIGN="left">';
    divBtm_content += '<A HREF="#" ONMOUSEOVER="scroll_dn()" ONMOUSEOUT="no_scroll()"><B>SCROLL DOWN</B></A></TD>';
    divBtm_content += '<TD ALIGN="right">';
    divBtm_content += '<A HREF="#" ONMOUSEOVER="scroll_up()" ONMOUSEOUT="no_scroll()"><B>SCROLL UP</B></A>';
    divBtm_content += '</TD></TR></TABLE>';

if(window!=top)top.location.href=location.href;  
var msg="You must have version 4+ IE or NS."
var dyn=(document.layers||document.all)?true:alert(msg);
var isNS=(document.layers);
var isIE=(document.all);

function scroll_dn(){
  if(pos>upr)pos-=stp;
  do_scroll(pos);  
  tim=setTimeout("scroll_dn()",spd);
}
function scroll_up(){
  if(pos<lwr)pos+=stp;
  do_scroll(pos);
  tim=setTimeout("scroll_up()",spd);
}
function do_scroll(pos){
  if(isIE) document.all.divTxt.style.top=pos;
  if(isNS) document.divTxt.top=pos;
}
function no_scroll() { clearTimeout(tim); }

if(isIE) {
document.write('<DIV ID="divTop" STYLE="position:absolute; top:0; left:'+off_l+'; width:'+slb_w+'; height:'+off_t+'; background-color:'+bgc_t+'; z-index:2">'+divTop_content+'</DIV>');
document.write('<DIV ID="divBtm" STYLE="position:absolute; top:'+off_b+'; left:'+off_l+'; width:'+slb_w+'; height:'+slb_h+'; background-color:'+bgc_b+';font-size:'+fnt_h+'; z-index:2">'+divBtm_content+'</DIV>');
document.write('<DIV ID="divTxt" STYLE="position:absolute; top:'+off_t+'; left:'+off_l+'; width:'+slb_w+'; font-family:'+fnt_f+'; font-size:'+fnt_h+'; background-color:'+bgc_s+'; z-index:1">'+slab_content+'</DIV>');
}
if(isNS){
document.write('<LAYER ID="divTop" position="absolute" top="0" left="'+off_l+'" width="'+slb_w+'" height="'+off_t+'" bgcolor="'+bgc_t+'" z-index="2">'+divTop_content+'</LAYER>');
document.write('<LAYER ID="divBtm" position="absolute" top="'+off_b+'" left="'+off_l+'" width="'+slb_w+'" height="'+slb_h+'" bgcolor="'+bgc_b+'" font-size="'+fnt_h+'" z-index="2">'+divBtm_content+'</LAYER>');
document.write('<LAYER ID="divTxt" position="absolute" top="'+off_t+'" left="'+off_l+'" width="'+slb_w+'" font-family="'+fnt_h+'" font-size="'+fnt_h+'" bgcolor="'+bgc_s+'" z-index="1">'+slab_content+'</LAYER>');
}

</SCRIPT>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *