Avatar billede etrebla Nybegynder
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.
Avatar billede jahamnej Nybegynder
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 =]
Avatar billede dotcom1 Nybegynder
17. december 2004 - 14:56 #2
Jeg synes at denne her f.eks. virker lidt nemmere at overskue, hvis det altså er sådan noget du leder efter: http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm
Ellers er der flere at vælge imellem her: http://www.dynamicdrive.com/dynamicindex2/index.html
Avatar billede etrebla Nybegynder
20. december 2004 - 11:05 #3
thanx
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester