#1
  1. No Profile Picture
    PHP Newbie!
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    U.S.A.
    Posts
    11
    Rep Power
    0

    Question Remove absolute positioning from DHTML Script?


    How can I remove the absolute positioning in this script so that I can position it using tables instead of pixel values? I was able to remove it from the scroll up/down links but I can't get it removed from the main scrolling window.

    PHP Code:
    <html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    style type="text/css">  
    #divUpControl{position:absolute; width:320; left:10; top:10; z-index:1; text-align: right} 
    #divDownControl{position:absolute; width:320; left:10; top:270; z-index:1; text-align: right} 
    #divContainer{position:absolute; width:320; height:240; overflow:hidden; top:30; left:10; clip:rect(0,320,240,0); visibility:hidden} 
    #divContent{position:absolute; top:0; left:0} 
    </style>
    <
    script language="JavaScript">// begin absolutely positioned scrollable area object scripts 
    // Extension developed by David G. Miles 
    // Original Scrollable Area code developed by Thomas Brattli 
    function verifyCompatibleBrowser(){ 
        
    this.ver=navigator.appVersion 
        this
    .dom=document.getElementById?1:
        this
    .ie5=(this.ver.indexOf("MSIE 5")>-&& 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 looptimer 
     
    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=MoveAreathis.xthis.y
        
    this.obj obj "Object" 
        
    eval(this.obj "=this"
        return 
    this 

    function 
    MoveArea(x,y){ 
        
    this.x=x;this.y=
        this
    .css.left=this.
        this
    .css.top=this.

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

    function 
    MoveAreaUp(move){ 
        if(
    this.y<0){ 
        
    this.MoveArea(0,this.y-move
        if(
    loopsetTimeout(this.obj+".up("+move+")",speed
        } 

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

     
    function 
    CeaseScroll(){ 
        
    loop=false 
        
    if(timerclearTimeout(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 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>
     Content    Content    Content 
     Content    Content    Content 
     Content    Content    Content 
     Content    Content    Content 
     Content    Content    Content 
            <b>Scroll Area Content End</b> </div>
    </div>
    <!-- end absolutely positioned scrollable area object -->
    </body>
    </html> 
    Thanks,
    John
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #divContainer{position:relative; width:320; height:100; overflow:hidden; clip:rect(0,320,240,0); visibility:hidden}
    #divContent{position:absolute; top:0; left:0;}
    </style>
    <script language="JavaScript">// begin absolutely positioned scrollable area object scripts
    // Extension developed by David G. Miles
    // Original Scrollable Area code developed by Thomas Brattli
    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 onLoad="InitialiseScrollableArea()">
    <div align="center">
    <table width="90%" cellpadding="6" border="1">
    <tr>
    <td height="200" colspan="3" bgcolor="darkgreen"><br></td></tr>
    <tr>
    <td bgcolor="skyblue"><br></td>
    <td width="80" align="center" bgcolor="pink">
    <a href="javascript&#58;;" style="font:600 12px arial;text-decoration:none;color:crimson;"
    onMouseOver="PerformScroll(-7)"
    onMouseOut="CeaseScroll()">
    &amp;#149;<br>scroll up<br>&amp;#149;</a><br><br>
    <a href="javascript&#58;;" style="font:600 12px arial;text-decoration:none;color:crimson;"
    onMouseOver="PerformScroll(7)"
    onMouseOut="CeaseScroll()">
    &amp;#149;<br>scroll down<br>&amp;#149;</a>
    </td><td width="332">
    <!-- begin absolutely positioned scrollable area object-->
    <div id="divContainer">
    <div id="divContent">
    <h4>Scroll Area Content Start</h4>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    Content Content Content Content Content Content<br>
    <h4>Scroll Area Content End</h4>
    </div>
    </div>
    <!-- end absolutely positioned scrollable area object -->
    </td></tr></table>
    </div>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    PHP Newbie!
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    U.S.A.
    Posts
    11
    Rep Power
    0
    Thanks alot! Worked perfectly!

IMN logo majestic logo threadwatch logo seochat tools logo