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>
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
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
<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>
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>"
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.
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 ...
-- og så kan du jo redigere tiden ved at ændre tekstpause-variablen ...
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?
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>
... 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
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) } }
13. juni 2003 - 13:03
#11
-- og så skal du i replaceText bruge speed i setTimeout'en
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>
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
13. juni 2003 - 14:24
#15
Velbekomme '-)
13. juni 2003 - 14:39
#16
-- og tak for points ;~}
Vi tilbyder markedets bedste kurser inden for webudvikling