17. december 2004 - 14:26
Der er
2 kommentarer og
1 løsning
"scrollende" tekst
Hej,
Jeg skal bruge en eller anden form for "boks" eller anden form for element, med en scrollende tekst i - findes der sådanne færdige moduler til download (java-applet, javascript, flash, whatever) eller skal man selv lave sådan noget?
PS: kigger først ind igen efter weekenden.
17. december 2004 - 14:49
#1
jeps, lidt javascript kan gøre det... noget jeg fandt på nettet en gang og har pillet lidt ved...
gem dette som scroll.js, og link så til filen i dit html..
// browsercheck object
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion;
this.agent=navigator.userAgent;
this.dom=document.getElementById?1:0;
this.opera5=this.agent.indexOf("Opera 5")>-1;
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6;
this.mac=this.agent.indexOf("Mac")>-1;
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this;
}
var bw=new lib_bwcheck();
// If you want it to move faster you can set this lower, it's the timeout:
var speed = 30;
// Sets variables to keep track of what's happening
var loop, timer;
// Element Object
function makeObj(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=goUp;this.down=goDown;
this.moveIt=moveIt; this.x=0; this.y=0;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function moveIt(x,y){
this.x = x
this.y = y
this.css.left = this.x+px
this.css.top = this.y+px
}
//Makes the object go up
function goDown(move){
if (this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move){
if (this.y<0){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if (scrolltextLoaded){
loop = true;
if (speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
//Stops the scrolling (called on mouseout)
function noScroll(){
loop = false
if (timer) clearTimeout(timer)
}
//Makes the object
var scrolltextLoaded = false
function scrolltextInit(lmnt, srll){
if(document.getElementById(lmnt)){
oCont = new makeObj(lmnt);
oScroll = new makeObj(srll,lmnt);
oScroll.moveIt(0,0);
oCont.css.visibility = "visible";
scrolltextLoaded = true;
}
}
function initScrollable(lmnt, srll){
if (bw.bw) scrolltextInit(lmnt, srll);
}
Størrelsen på "kassen" definerer du i css,
#divScrollTextCont {position:relative; left:0px; top:0px; width:566px; height:194px; clip:rect(0px 566px 194px 0px); overflow:hidden; visibility:visible;}
#divText {position:absolute; width:566px;}
I dit body tag skal du indsætte,...
<body onLoad="initScrollable('divScrollTextCont','divText');">
Skulle du bruge flere forskellige størrelser, kan du definere flere slags i css'en, og f. eks kalde dem divScrollTextCont2 og divText2, og tilføje det sådan i body...
<body topmargin="0" leftmargin="0" onLoad="initScrollable('divScrollTextCont','divText');initScrollable('divScrollTextCont2', 'divText2');"">
...sådan så begge kommer med.
Den tekst som skal scrolle skal så sidde inde i en div som ser sådan ud...
<div align="left" id="divScrollTextCont">
<div align="left" id="divText">
Blah
</div>
</div>
Til sidst skal du bruge nogle pile, du laver f. eks nogle trekanter i et billede og skriver dette...
scroll op...
<a href="#" onmouseover="scroll(-7)" onmouseout="noScroll()" onclick="return false"><img src="STI_TIL_BILLEDE" width="11" height="16" alt="Rul op" border="0"></a>
scroll ned...
<a href="#" onmouseover="scroll(7)" onmouseout="noScroll()" onclick="return false"><img src="STI_TIL_BILLEDE" width="11" height="16" alt="Rul ned" border="0"></a>
og det skulle gerne være det =]