PDA

View Full Version : absolutely positioned scrollable area

judy25
10-01-2002, 01:22 PM
hi guys,
does anyone know if it is possible to change the script to have an absolutly positioned scrollable from the left to the right side ?
thanks for your help
judy


<script language="JavaScript">

// begin absolutely positioned scrollable area object scripts
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>

<style type="text/css">
#divUpControl{position:absolute; width:20; left:108; top:80; z-index:1; text-align: right; clip: rect( )}
#divDownControl{position:absolute; width:20; left:108; top:250; z-index:1; text-align: right; clip: rect( )}
#divContainer{position:absolute; width:200; height:270; overflow:hidden; top:25; left:0; clip: rect(0 200 295 0); visibility:hidden}
#divContent{position:absolute; top:0; left:0}
</style>
adios
10-01-2002, 05:17 PM
Looks like Brattli. I modified a script a while back to do just that conversion.


<html>
<head>
<title>ASM Scroller 2.0</title>
<style type="text/css">

#news {
position: absolute;
left: 0px;
top: 0px;
width: 570px;
height: 228px;
z-index: 1;
background-color: sienna;
layer-background-color: sienna;
}

#newsClipping {
position: absolute;
left: 240px;
top: 100px;
width: 332px;
height: 228px;
z-index: 2;
clip: rect(0px,332px,228px,0px);
}

.text {
font: 200 10px verdana, helvetica, arial, sans-serif;
color: #ffffff;
padding: 3px 0px 0px 6px;
}

</style>
<script type="text/javascript" language="javascript" src="ASM_Scroller2.js"></script>
</head>
<body bgcolor="#1b1b1b" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onload="init()">

<div id="scrollMeLeft" style="position:absolute;left:382px;top:333px;">
<a href="javascript:;" onmouseover="scrollIt('Scroll Left',2);return true"
onmouseout="scrollIt('',0);return true" onfocus="this.blur()"><img src="http://www.nzwwa.com/mirror/clipart/graphics/buttons/arrows/blueleft.gif" width="15" height="15" border="0"></a></div>

<div id="scrollMeRight" style="position:absolute;left:402px;top:333px;">
<a href="javascript:;" onmouseover="scrollIt('Scroll Right',1);return true"
onmouseout="scrollIt('',0);return true" onfocus="this.blur()"><img src="http://www.nzwwa.com/mirror/clipart/graphics/buttons/arrows/bluerigh.gif" width="15" height="15" border="0"></a></div>

<div id="newsClipping">
<div id="news">
<table width="570" cellspacing="0" cellpadding="0" border="0"><tr>
<td><img src="http://www.codingforums.com/ubb/board_logo.gif"></td>
<td><img src="http://www.codingforums.com/ubb/board_logo.gif"></td>
<td><img src="http://www.codingforums.com/ubb/board_logo.gif"></td>
<td><img src="http://www.codingforums.com/ubb/board_logo.gif"></td>
<td><img src="http://www.codingforums.com/ubb/board_logo.gif"></td>
<td><img src="http://www.codingforums.com/ubb/board_logo.gif"></td>
</tr>
<tr><td class="text" colspan="6">merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde merde </td></tr></table>
</div>
</div>
</body>
</html>

[ASM_Scroller2.js]

var w3c = (document.getElementById) ? 1:0
var ns4 = (document.layers) ? 1:0 ;
var ie4 = (document.all) ? 1:0

var range = "";
var cap = "";
var mutex = 0;
var xplace = 0;
var yplace = 0;
var xmax = 0;
var xmin = 0;
var newsWidth = 0;

/** The only code you should ever need to change here are the following 3 vars **/
var speed = 2; //speed at which the news scrolls
var newsId = "news"; //name of the overall news div
var newsClipId = "newsClipping"; //name of the news clipping div

function redrawScreen() {
location.reload();
return false
}

function shiftTo(obj, x, y) {
if (w3c) {
obj.style.left = x + "px";
obj.style.top = y + "px";
}
else if (ns4) {
obj.moveTo(x,y);
}
else if (ie4) {
obj.style.pixelLeft = x;
obj.style.pixelTop = y;
}
}

function getObject(obj) {
var theObj = eval("document." + range + obj + cap);
return theObj;
}

function scrollRight() {
if (mutex == 1){
var theObj = getObject(newsId);
if (xplace < xmax) {
xplace = xplace + speed;
if (xplace > xmax) {
xplace = xmax;
}
shiftTo(theObj, xplace, yplace);
setTimeout("scrollRight()",25);
}
}
}

function scrollLeft() {
if (mutex == 2){
var theObj = getObject(newsId);
if (xplace > xmin) {
xplace = xplace - speed;
if (xplace < xmin) {
xplace = xmin;
}
shiftTo(theObj, xplace, yplace);
setTimeout("scrollLeft()",25);
}
}
}

function scrollIt(msg, dir) {
window.status = msg;
mutex = dir;
if (mutex == 1) scrollRight();
else if (mutex == 2) scrollLeft();
}

function init() {
if (w3c) {
range = "getElementById(\"";
cap = "\")";
theObj = getObject(newsClipId);
newsWidth = theObj.offsetWidth;
theObj = getObject(newsId);
xmin = (theObj.offsetWidth - newsWidth) * -1;
}
else if (ns4) {
window.captureEvents(Event.RESIZE);
window.onresize = redrawScreen;
theObj = getObject(newsClipId);
newsWidth = theObj.clip.width;
newsId = newsClipId + ".document." + newsId;
theObj = getObject(newsId);
xmin = (theObj.clip.width - newsWidth) * -1;
}
else if (ie4) {
range = "all.";
theObj = getObject(newsClipId);
newsWidth = theObj.offsetWidth;
theObj = getObject(newsId);
xmin = (theObj.offsetWidth - newsWidth) * -1;
}
}
Mr J
10-01-2002, 05:20 PM
See if this is something like what you are after;
Sizes and positioning will have to be change to suit your needs.





<script language="JavaScript">
<!--
var startpos= 0 //
var stoppos=100 // left stop position
var Last=""
var previous="yourID_One"
var scrolling=0
var L_Timer=""

function Init(layernum){
if(scrolling==1){return} // prevent 2 layers scrolling
if(previous==layernum){return}
else{
scrollRight(layernum)
Sim_Return() // simultaneous scrollback
}
}

function scrollRight(layernum){
scrolling=1 // running
Last=previous // previous layernum
posnow=parseInt(eval("document.all."+layernum+".style.left")) // current left position
if(posnow>stoppos-30){
posnow+=3;}
else{
if(stoppos>posnow){
posnow+=5;}
}
document.all[layernum].style.pixelLeft=posnow //new left position

document.all[layernum].style.zIndex="1" // make active layer top
document.all[Last].style.zIndex="" // make previous layer bottom

L_Timer=setTimeout("scrollRight('"+layernum+"')",50);

if(posnow>=stoppos){
posnow==stoppos
scrolling=0
clearTimeout(L_Timer);
previous=layernum //
}
}

posnow2=stoppos
function Sim_Return(){
scrolling=1
startpos2=parseInt(document.all[Last].style.width)+parseInt(document.all["oDIV"].style.width)
//if(Last==0){scrolling=0;return}
if(document.all[Last].style.pixelLeft==startpos){return}
if(posnow2>=startpos2-30){
posnow2+=3}
else{
posnow2+=5;}

document.all[Last].style.pixelLeft=posnow2 // current right position
R_Timer=setTimeout("Sim_Return('"+Last+"')",50);

if(posnow2>=startpos2){
scrolling=0
clearTimeout(R_Timer);
document.all[Last].style.pixelLeft=startpos // prevent overshoot and ensure return to original position
posnow2=stoppos
}
}
// -->
</script>

<DIV id="oDIV" style="position:absolute;left:0; top:100;width:100;height:400;clip:rect(0,210,400,100)">

<DIV id="yourID_One" style="position:absolute; left:100; top:0;z-index:2;width:100;background-color:green;border:2 inset black">
Layer 1<BR>
<a href="javascript:Init('yourID_One')">Layer 1</a><BR>
<a href="javascript:Init('yourID_Two')">Layer 2</a><BR>
<a href="javascript:Init('yourID_Three')">Layer 3</a><BR>
<a href="javascript:Init('yourID_Four')">Layer 4</a><BR>
<a href="javascript:Init('yourID_Five')">Layer 5</a></DIV>


<DIV id="yourID_Two" style="position:absolute; left:0; top:0;z-index:2;width:100;background-color:gold;border:2 inset black">
Layer 2<BR>
<a href="javascript:Init('yourID_One')">Layer 1</a><BR>
<a href="javascript:Init('yourID_Two')">Layer 2</a><BR>
<a href="javascript:Init('yourID_Three')">Layer 3</a><BR>
<a href="javascript:Init('yourID_Four')">Layer 4</a><BR>
<a href="javascript:Init('yourID_Five')">Layer 5</a></DIV>


<DIV id="yourID_Three" style="position:absolute; left:0; top:0;z-index:2;width:100;background-color:red;border:2 inset black">
Layer 3<BR>
<a href="javascript:Init('yourID_One')">Layer 1</a><BR>
<a href="javascript:Init('yourID_Two')">Layer 2</a><BR>
<a href="javascript:Init('yourID_Three')">Layer 3</a><BR>
<a href="javascript:Init('yourID_Four')">Layer 4</a><BR>
<a href="javascript:Init('yourID_Five')">Layer 5</a></DIV>


<DIV id="yourID_Four" style="position:absolute; left:0; top:0;z-index:2;width:100;background-color:cyan;border:2 inset black">
Layer 4<BR>
<a href="javascript:Init('yourID_One')">Layer 1</a><BR>
<a href="javascript:Init('yourID_Two')">Layer 2</a><BR>
<a href="javascript:Init('yourID_Three')">Layer 3</a><BR>
<a href="javascript:Init('yourID_Four')">Layer 4</a><BR>
<a href="javascript:Init('yourID_Five')">Layer 5</a></DIV>


<DIV id="yourID_Five" style="position:absolute; left:0; top:0;z-index:2;width:100;background-color:silver;border:2 inset black">
Layer 5<BR>
<a href="javascript:Init('yourID_One')">Layer 1</a><BR>
<a href="javascript:Init('yourID_Two')">Layer 2</a><BR>
<a href="javascript:Init('yourID_Three')">Layer 3</a><BR>
<a href="javascript:Init('yourID_Four')">Layer 4</a><BR>
<a href="javascript:Init('yourID_Five')">Layer 5</a></DIV>


</DIV>