Okej, ännu än scroll... men... denna är stabil... spec enl. följande:
- crossbrowser
- Stödjer flera scrollers på samma sida
- Om inte upp/ner-knapparna behövs så visas dom inte dvs när all content får plats, bra att detta sker dynamisk om content hämtas från en databas
- olika scrollers kan ha olika hastighet
...okej.. scriptet dårå... här är en färdig html-sida inkl. script... i detta exemplet finns det tre scrollers på sidan... bara att copy-pejsta:
<html>
<head>
<title>:: beikerScroll </title>
<script language="javascript">
<!--
/*
:: copyright Beiker 2001
:: beiker@beiker.net
:: www.beiker.net
:: feel free to send an e-mail
:: Do NOT remove this comment
*/
//browser check lite ------------------------------------->
var ie = (document.all)? truealse
var ns4 = (document.layers)? truealse
var ns6 = (document.addEventListener)? truealse
//init functions ----------------------------------------->
function init(){
initScroll();
}
function initScroll(){
//divObj0 = new createScrollObj(id of scrolldiv,id of scrolldiv's container,speed);
scroll0 = new createScrollObj('scrollText0','scrollCont0',10);
scroll1 = new createScrollObj('scrollText1','scrollCont1',50);
scroll2 = new createScrollObj('scrollText2','scrollCont2',100);
}
//creating the objects ----------------------------------->
function createScrollObj(id,cont,speed){
this.obj = id.replace( new RegExp ("Text",'ig'), "");//the name of the created object
this.id = id
this.idNum = this.obj.substring(6); //string that contains the scroll number
ctrlId = 'scrollCtrl' + this.idNum;
if(ie){
this.css = document.all[id].style;
this.x = this.css.pixelLeft;
this.y = this.css.pixelTop;
this.visible = "visible";
this.hidden = "hidden";
this.dHeight = document.all[id].clientHeight;
this.dWidth = document.all[id].clientWidth;
this.contHeight = document.all[cont].offsetHeight
this.upLimit = - (this.dHeight - this.contHeight);
this.ctrlCss = document.all[ctrlId].style;
}
if(ns4){
this.css = document.layers[cont].document.layers[id]
this.x = this.css.left;
this.y = this.css.top;
this.visible = "show";
this.hidden = "hide";
this.dHeight = this.css.clip.height;
this.dWidth = this.css.clip.width;
this.contHeight = document.layers[cont].clip.height;
this.upLimit = - (this.dHeight - this.contHeight);
this.ctrlCss = document.layers[ctrlId]
}
if(ns6){
this.css = document.getElementById(id).style;
this.x = this.css.left;
this.y = this.css.top;
this.visible = "visible";
this.hidden = "hidden";
this.dHeight = document.getElementById(id).offsetHeight;
this.dWidth = document.getElementById(id).offsetWidth;//this doesn't work in nestled layers
this.contHeight = document.getElementById(cont).offsetHeight
this.upLimit = - (this.dHeight - this.contHeight);
this.ctrlCss = document.getElementById(ctrlId).style;
}
this.show = function(){ this.css.visibility = this.visible; }
this.hide = function(){ this.css.visibility = this.hidden; }
this.timer = eval('"' + id + 'Timer"');
this.speed = speed //update frequency in milliseconds
this.step = 5 //pixels to move each time
this.isMoving = 'no'
this.up = scrollUp;
this.down = scrollDown;
this.stop = stopIt;
//init values
this.css.top = 0;
//show or hides the scroll controls
if(this.dHeight > this.contHeight) this.ctrlCss.visibility = this.visible;
else this.ctrlCss.visibility = this.hidden;
}
//scroll functions ----------------------------------------->
function scrollDown(){
this.y = eval(parseInt(this.css.top) - this.step)
if(this.y + 10 >= this.upLimit){
this.css.top = this.y
this.timer = setTimeout(eval('"' + this.obj + '.down()" '),this.speed)
}
else clearTimeout(this.timer);
}
function scrollUp(){
this.y = eval(parseInt(this.y) + this.step)
if(this.y <= 0){
this.css.top = this.y
this.timer = setTimeout(eval('"' + this.obj + '.up()" '),this.speed)
}
else clearTimeout(this.timer);
}
function stopIt(){
clearTimeout(this.timer);
}
//-->
</script>
<style type="text/css">
<!--
div{font-family:verdana,arial,helvetica;font-size:10px;}
.scrollCtrl{position:absolute;top:100px;left:0px;visibility: visible;}
#scrollCont0{position:absolute;top:100px;left:100px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
#scrollText0{position:absolute;z-index:99;top:0px;}
#scrollCont1{position:absolute;top:100px;left:250px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
#scrollText1{position:absolute;z-index:99;top:0px;background-color:#eeeeee;}
#scrollCont2{position:absolute;top:100px;left:400px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
#scrollText2{position:absolute;z-index:99;top:0px;}
-->
</style>
</head>
<body onload="init();">
<div>Higher number on in the speed varialbe makes the scroll go slower.<br>
If the control buttons aren't needed they will not show(when content fits in the visible area)
</div>
<div id="scrollCtrl0" class="scrollCtrl" style="left:205;">
<a href="javascript://up" onmousedown="scroll0.up();return false" onmouseup="scroll0.stop()">0 up</a><br><br>
<a href="javascript://down" onmousedown="scroll0.down();return false" onmouseup="scroll0.stop()">0 down</a><br>
</div>
<div id="scrollCont0">
<div id="scrollText0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
end
</div>
</div>
<div id="scrollCtrl1" class="scrollCtrl" style="left:355;">
<a href="javascript://up" onmousedown="scroll1.up();return false" onmouseup="scroll1.stop()">0 up</a><br><br>
<a href="javascript://down" onmousedown="scroll1.down();return false" onmouseup="scroll1.stop()">0 down</a><br>
</div>
<div id="scrollCont1">
<div id="scrollText1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
end
</div>
</div>
<div id="scrollCtrl2" class="scrollCtrl" style="left:505;">
<a href="javascript://up" onmousedown="scroll2.up();return false" onmouseup="scroll2.stop()">0 up</a><br><br>
<a href="javascript://down" onmousedown="scroll2.down();return false" onmouseup="scroll2.stop()">0 down</a><br>
</div>
<div id="scrollCont2">
<div id="scrollText2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
end
</div>
</div>
</body>
</html>
[Redigerat av beiker den 26 jul 2001]
[Redigerat av beiker den 05 aug 2001]
- crossbrowser
- Stödjer flera scrollers på samma sida
- Om inte upp/ner-knapparna behövs så visas dom inte dvs när all content får plats, bra att detta sker dynamisk om content hämtas från en databas
- olika scrollers kan ha olika hastighet
...okej.. scriptet dårå... här är en färdig html-sida inkl. script... i detta exemplet finns det tre scrollers på sidan... bara att copy-pejsta:
<html>
<head>
<title>:: beikerScroll </title>
<script language="javascript">
<!--
/*
:: copyright Beiker 2001
:: beiker@beiker.net
:: www.beiker.net
:: feel free to send an e-mail
:: Do NOT remove this comment
*/
//browser check lite ------------------------------------->
var ie = (document.all)? truealse
var ns4 = (document.layers)? truealse
var ns6 = (document.addEventListener)? truealse
//init functions ----------------------------------------->
function init(){
initScroll();
}
function initScroll(){
//divObj0 = new createScrollObj(id of scrolldiv,id of scrolldiv's container,speed);
scroll0 = new createScrollObj('scrollText0','scrollCont0',10);
scroll1 = new createScrollObj('scrollText1','scrollCont1',50);
scroll2 = new createScrollObj('scrollText2','scrollCont2',100);
}
//creating the objects ----------------------------------->
function createScrollObj(id,cont,speed){
this.obj = id.replace( new RegExp ("Text",'ig'), "");//the name of the created object
this.id = id
this.idNum = this.obj.substring(6); //string that contains the scroll number
ctrlId = 'scrollCtrl' + this.idNum;
if(ie){
this.css = document.all[id].style;
this.x = this.css.pixelLeft;
this.y = this.css.pixelTop;
this.visible = "visible";
this.hidden = "hidden";
this.dHeight = document.all[id].clientHeight;
this.dWidth = document.all[id].clientWidth;
this.contHeight = document.all[cont].offsetHeight
this.upLimit = - (this.dHeight - this.contHeight);
this.ctrlCss = document.all[ctrlId].style;
}
if(ns4){
this.css = document.layers[cont].document.layers[id]
this.x = this.css.left;
this.y = this.css.top;
this.visible = "show";
this.hidden = "hide";
this.dHeight = this.css.clip.height;
this.dWidth = this.css.clip.width;
this.contHeight = document.layers[cont].clip.height;
this.upLimit = - (this.dHeight - this.contHeight);
this.ctrlCss = document.layers[ctrlId]
}
if(ns6){
this.css = document.getElementById(id).style;
this.x = this.css.left;
this.y = this.css.top;
this.visible = "visible";
this.hidden = "hidden";
this.dHeight = document.getElementById(id).offsetHeight;
this.dWidth = document.getElementById(id).offsetWidth;//this doesn't work in nestled layers
this.contHeight = document.getElementById(cont).offsetHeight
this.upLimit = - (this.dHeight - this.contHeight);
this.ctrlCss = document.getElementById(ctrlId).style;
}
this.show = function(){ this.css.visibility = this.visible; }
this.hide = function(){ this.css.visibility = this.hidden; }
this.timer = eval('"' + id + 'Timer"');
this.speed = speed //update frequency in milliseconds
this.step = 5 //pixels to move each time
this.isMoving = 'no'
this.up = scrollUp;
this.down = scrollDown;
this.stop = stopIt;
//init values
this.css.top = 0;
//show or hides the scroll controls
if(this.dHeight > this.contHeight) this.ctrlCss.visibility = this.visible;
else this.ctrlCss.visibility = this.hidden;
}
//scroll functions ----------------------------------------->
function scrollDown(){
this.y = eval(parseInt(this.css.top) - this.step)
if(this.y + 10 >= this.upLimit){
this.css.top = this.y
this.timer = setTimeout(eval('"' + this.obj + '.down()" '),this.speed)
}
else clearTimeout(this.timer);
}
function scrollUp(){
this.y = eval(parseInt(this.y) + this.step)
if(this.y <= 0){
this.css.top = this.y
this.timer = setTimeout(eval('"' + this.obj + '.up()" '),this.speed)
}
else clearTimeout(this.timer);
}
function stopIt(){
clearTimeout(this.timer);
}
//-->
</script>
<style type="text/css">
<!--
div{font-family:verdana,arial,helvetica;font-size:10px;}
.scrollCtrl{position:absolute;top:100px;left:0px;visibility: visible;}
#scrollCont0{position:absolute;top:100px;left:100px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
#scrollText0{position:absolute;z-index:99;top:0px;}
#scrollCont1{position:absolute;top:100px;left:250px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
#scrollText1{position:absolute;z-index:99;top:0px;background-color:#eeeeee;}
#scrollCont2{position:absolute;top:100px;left:400px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
#scrollText2{position:absolute;z-index:99;top:0px;}
-->
</style>
</head>
<body onload="init();">
<div>Higher number on in the speed varialbe makes the scroll go slower.<br>
If the control buttons aren't needed they will not show(when content fits in the visible area)
</div>
<div id="scrollCtrl0" class="scrollCtrl" style="left:205;">
<a href="javascript://up" onmousedown="scroll0.up();return false" onmouseup="scroll0.stop()">0 up</a><br><br>
<a href="javascript://down" onmousedown="scroll0.down();return false" onmouseup="scroll0.stop()">0 down</a><br>
</div>
<div id="scrollCont0">
<div id="scrollText0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
end
</div>
</div>
<div id="scrollCtrl1" class="scrollCtrl" style="left:355;">
<a href="javascript://up" onmousedown="scroll1.up();return false" onmouseup="scroll1.stop()">0 up</a><br><br>
<a href="javascript://down" onmousedown="scroll1.down();return false" onmouseup="scroll1.stop()">0 down</a><br>
</div>
<div id="scrollCont1">
<div id="scrollText1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
end
</div>
</div>
<div id="scrollCtrl2" class="scrollCtrl" style="left:505;">
<a href="javascript://up" onmousedown="scroll2.up();return false" onmouseup="scroll2.stop()">0 up</a><br><br>
<a href="javascript://down" onmousedown="scroll2.down();return false" onmouseup="scroll2.stop()">0 down</a><br>
</div>
<div id="scrollCont2">
<div id="scrollText2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
end
</div>
</div>
</body>
</html>
[Redigerat av beiker den 26 jul 2001]
[Redigerat av beiker den 05 aug 2001]