Avatar billede stig69 Nybegynder
13. juni 2003 - 10:55 Der er 15 kommentarer og
1 løsning

Scrolling text med pause

Jeg har følgende scrolling text med tre forskellige tekstfelter, men vil gerne have sat en pause på ca. 4 sekunder imellem hver tekstmeddelelse. Som det er nu ruller det bare henover skærmen...Kan det lade sig gøre?

Stig

<html>

<head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
</style>

<script type="text/javascript">
var interval
startPosition=0
topPosition=100
endPosition=100
speed=50

function scrollit(){
if (startPosition!=200) {
    startPosition=startPosition+1
    topPosition=topPosition-1
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    interval=setTimeout("scrollit()",speed)
    }
else {
    startPosition=0
    topPosition=100
    endPosition=100
    interval=setTimeout("scrollit()",speed)
    }
}

function stopinterval()
{
clearTimeout(interval)
}
</script>
</head>

<body onload="scrollit()" onunload="stopinterval()">

<span id="display">
Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1
</br></br></br></br>
Tekstfelt 2....text2, text2, text2, text2, text2, text2, text2, text2, text2, text2, text2
</br></br></br></br>
Tekstfelt 3....text3, text3, text3, text3, text3, text3, text3, text3, text3, text3, text3
</br></br></br></br>
</span>
</body>
</html>
Avatar billede roenving Novice
13. juni 2003 - 11:01 #1
Ja, selvfølgelig kan det lade sig gøre, men jeg ville nok gøre det ved at skifte teksten ud, for som du kan se, når den ikke bunden af tekst 3 før den hopper tilbage til tekst1
Avatar billede roenving Novice
13. juni 2003 - 11:07 #2
<html>

<head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
</style>

<script type="text/javascript">
var interval
startPosition=0
topPosition=100
endPosition=100
speed=50
tekstnum = 1;//nummer to tekst
tekstpause = 4000;//millisekunder
var txt = new Array();
txt[0] = "Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1
</br></br></br></br>";
txt[1] = "Tekstfelt 2....text2, text2, text2, text2, text2, text2, text2, text2, text2, text2, text2
</br></br></br></br>"
txt[2] = "Tekstfelt 3....text3, text3, text3, text3, text3, text3, text3, text3, text3, text3, text3
</br></br></br></br>"

function scrollit(){
if (startPosition!=200) {
    startPosition=startPosition+1
    topPosition=topPosition-1
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    interval=setTimeout("scrollit()",speed)
    }
else {
    startPosition=0
    topPosition=100
    endPosition=100
    interval=setTimeout("replaceText()",tekstpause)
    }
}

function replaceText(){
    document.getElementById("display").innerHTML = txt[tekstnum];
    tekstnum = (tekstnum+1)%3;
    interval=setTimeout("scrollit()",speed)
}

function stopinterval()
{
clearTimeout(interval)
}
</script>
</head>

<body onload="scrollit()" onunload="stopinterval()">

<span id="display">
Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1
</br></br></br></br>
</span>
</body>
</html>
Avatar billede roenving Novice
13. juni 2003 - 11:09 #3
Hov, jeg havde været for hurtig i kopieringen:

dette i stedet for de 3 txt[]-linjer:

txt[0] = "Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1</br></br></br></br>";
txt[1] = "Tekstfelt 2....text2, text2, text2, text2, text2, text2, text2, text2, text2, text2, text2</br></br></br></br>"
txt[2] = "Tekstfelt 3....text3, text3, text3, text3, text3, text3, text3, text3, text3, text3, text3</br></br></br></br>"
Avatar billede stig69 Nybegynder
13. juni 2003 - 11:13 #4
Det ser squ' godt ud. Jeg havde mere tænkt på at teksten var stillestående i 4 sekunder, så man kunne nå og læse beskeden, før næste besked rullede op.
Avatar billede roenving Novice
13. juni 2003 - 11:29 #5
Intet problem -- sæt tekstpause ind i stedet for speed i den nye funktion, og sæt speed ind i stedet for tekstpause hvor det stå nu ...
Avatar billede roenving Novice
13. juni 2003 - 11:30 #6
-- og så kan du jo redigere tiden ved at ændre tekstpause-variablen ...
Avatar billede stig69 Nybegynder
13. juni 2003 - 12:26 #7
Nu har jeg prøvet at bytte lidt rundt på variabel'erne og jeg synes ikke det opfører sig som det skulle. Teksten kravler bare enorm lagtsomt op ad siden... Virker det hos dig, roenving?
Avatar billede roenving Novice
13. juni 2003 - 12:34 #8
Jeg havde jo ikke lige tænkt mig om -- og derfor havde jeg heller ikke testet:

<html>

<head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
</style>

<script type="text/javascript">
var interval
startPosition=0
topPosition=100
endPosition=100
speed=50
tekstnum = 1;//nummer to tekst
tekstpause = 4000;//millisekunder
var txt = new Array();
txt[0] = "Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1</br></br></br></br>";
txt[1] = "Tekstfelt 2....text2, text2, text2, text2, text2, text2, text2, text2, text2, text2, text2</br></br></br></br>"
txt[2] = "Tekstfelt 3....text3, text3, text3, text3, text3, text3, text3, text3, text3, text3, text3</br></br></br></br>"

function scrollit(){
if (startPosition!=200) {
    startPosition=startPosition+1
    topPosition=topPosition-1
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    interval=setTimeout("scrollit()",speed)
    }
else {
    startPosition=0
    topPosition=100
    endPosition=100
    interval=setTimeout("replaceText()",speed)
    }
}

function replaceText(){
    document.getElementById("display").innerHTML = txt[tekstnum];
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    tekstnum = (tekstnum+1)%3;
    interval=setTimeout("scrollit()",tekstpause)
}

function stopinterval()
{
clearTimeout(interval)
}
</script>
</head>
Avatar billede stig69 Nybegynder
13. juni 2003 - 12:51 #9
... En allersidste ting (jeg undskylder meget, men mine evner ligger ikke inde for JavaScript). Som det er nu 'springer' Tekstfelt2 og de efterfølgende tekstfelter 'bare' frem på skærmen, hvor de før rullede langsomt op fra bunden. Det ville jeg gerne have igen, og når de så når toppen, så skal pausen indtræde inden næste tekstfelt ruller op. -->roenving, hvorledes gøres det?

Husk lige at svare, så du kan få dine point

Stig
Avatar billede roenving Novice
13. juni 2003 - 13:02 #10
Æeh, den var sværere -- det var faktisk en af grundene til at jeg udskiftede teksten ...

Problemet er at beregne hvor meget den må scrolle op før den holder pause ...

Du skal i teksterne indsætte et antal <br> som svarer til et tomt felt ...

og så skal du prøve dig frem med:

var stopToRead = 80;
function scrollit(){
if (startPosition==stopToRead){
    startPosition=startPosition+1
    topPosition=topPosition-1
    interval=setTimeout("scrollit()",tekstpause)
    }   

if (startPosition!=200) {
    startPosition=startPosition+1
    topPosition=topPosition-1
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    interval=setTimeout("scrollit()",speed)
    }
else {
    startPosition=0
    topPosition=100
    endPosition=100
    interval=setTimeout("replaceText()",speed)
    }
}
Avatar billede roenving Novice
13. juni 2003 - 13:03 #11
-- og så skal du i replaceText bruge speed i setTimeout'en
Avatar billede roenving Novice
13. juni 2003 - 13:11 #12
Bortset fra at den første linje springer ind virker det her nogenlunde:

<html>

<head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:100;
height:500;
top:100;
clip:rect(0 100 100 0);
}
</style>

<script type="text/javascript">
var interval
startPosition=0
topPosition=100
endPosition=100
speed=50
tekstnum = 1;//nummer to tekst
tekstpause = 4000;//millisekunder
var txt = new Array();
txt[0] = "<br><br><br><br><br>Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1</br></br></br></br>";
txt[1] = "<br><br><br><br><br>Tekstfelt 2....text2, text2, text2, text2, text2, text2, text2, text2, text2, text2, text2</br></br></br></br>"
txt[2] = "<br><br><br><br><br>Tekstfelt 3....text3, text3, text3, text3, text3, text3, text3, text3, text3, text3, text3</br></br></br></br>"

var stopToRead = 70;
function scrollit(){
if (startPosition==stopToRead){
    startPosition=startPosition+1
    topPosition=topPosition-1
    interval=setTimeout("scrollit()",tekstpause)
    }else{

if (startPosition!=200) {
    startPosition=startPosition+1
    topPosition=topPosition-1
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    interval=setTimeout("scrollit()",speed)
    }
else {
    startPosition=0
    topPosition=100
    endPosition=100
    interval=setTimeout("replaceText()",speed)
    }}
}

function replaceText(){
    document.getElementById("display").innerHTML = txt[tekstnum];
    document.getElementById("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
    document.getElementById("display").style.top=topPosition
    tekstnum = (tekstnum+1)%3;
    interval=setTimeout("scrollit()",speed)
}

function stopinterval()
{
clearTimeout(interval)
}
</script>
</head>

<body onload="scrollit()" onunload="stopinterval()">

<span id="display"><br><br><br><br><br>
Tekstfelt 1....text1, text1, text1, text1, text1, text1, text1, text1, text1, text1, text1
<br><br><br><br>
</span>
</body>
</html>
Avatar billede stig69 Nybegynder
13. juni 2003 - 13:13 #13
Ja, jeg er godt klar over at den ikke er helt let. Det startede med at jeg tog et script fra http://www.jsmadeeasy.com/javascripts/Scrolling/Pausing%20Up-Down%20Message%20Scroller/index.htm, men det kunne ikke køre i Netscape. Derudover brød jeg mig ikke om at alt koden lå i body-delen og ikke i head-delen.
Avatar billede stig69 Nybegynder
13. juni 2003 - 14:18 #14
roenving --> det er et godt arbejde du har lavet. Jeg har rettet det til så det passer - Og det virker stadig i Netscape :-) Du skal have tusinde tak for hjælpen.

Husk at komme med et svar, så du kan få dine point.

Stig
Avatar billede roenving Novice
13. juni 2003 - 14:24 #15
Velbekomme '-)
Avatar billede roenving Novice
13. juni 2003 - 14:39 #16
-- og tak for points ;~}
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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

IT-JOB

KMD A/S

Projektleder

Riskpoint A/S (Riskpoint Solutions Limited)

Senior Developer