JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > JavaScript Development
Reload this Page

Remove absolute positioning from DHTML Script?

Discuss Remove absolute positioning from DHTML Script? in the JavaScript Development forum on Dev Shed.
Remove absolute positioning from DHTML Script? JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old July 7th, 2002, 06:36 PM
mezz64 mezz64 is offline
PHP Newbie!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2001
Location: U.S.A.
Posts: 11 mezz64 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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: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()">
<!-- 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
Reply With Quote
  #2  
Old July 7th, 2002, 07:40 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10

<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:;" style="font:600 12px arial;text-decoration:none;color:crimson;"
onMouseOver="PerformScroll(-7)"
onMouseOut="CeaseScroll()">
•<br>scroll up<br>•</a><br><br>
<a href="javascript:;" style="font:600 12px arial;text-decoration:none;color:crimson;"
onMouseOver="PerformScroll(7)"
onMouseOut="CeaseScroll()">
•<br>scroll down<br>•</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>
Reply With Quote
  #3  
Old July 7th, 2002, 11:32 PM
mezz64 mezz64 is offline
PHP Newbie!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2001
Location: U.S.A.
Posts: 11 mezz64 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Thanks alot! Worked perfectly!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Remove absolute positioning from DHTML Script?

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.
 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.
 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.
 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.
 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway. 
Stay green...Green IT