Søg
Avatar billede Mik2000 Professor
19. maj 2007 - 16:33 Der er 24 kommentarer og
2 løsninger

Dynamisk scroll script

Hej

Nogle der kender et javascript der kan følgende:
- Scrolle i en boks man definerer
- Med mulighed for link så man kan klikke på dem
- Med mulighed for at dataen kommer fra et PHP array

Det skal være så enkelt så muligt med ovenstående muligheder
Avatar billede loevgaard Praktikant
20. maj 2007 - 01:55 #1
http://www.quirksmode.org/js/layerscroll.html
Avatar billede w13 Novice
20. maj 2007 - 17:29 #2
<html>
<head>
</head>
<body>

<div id="divscroll" style="width: 300px; height: 300px; overflow: hidden; background-image: url('billed_url_her'); background-attachment: fixed;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
Tekst her!<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<script type="text/JavaScript" language="JavaScript">
function scroll(a) {
    var a = document.getElementById('a);

    if (a.scrollTop != (a.scrollHeight - 300)) {
        a.scrollTop = a.scrollTop+1;
    } else {
        a.scrollTop = 1;
    }
}

setInterval("scroll('divscroll')",10);
</script>

</body>
</html>
--------------------------------
Sådan der?
Her kan naturligvis indsættes data fra et PHP-array, men det er ikke mit felt.
Avatar billede w13 Novice
20. maj 2007 - 17:29 #3
og det skulle have været et svar.. =)
Avatar billede w13 Novice
20. maj 2007 - 17:38 #4
var a = document.getElementById('a);
skulle være:
var a = document.getElementById('a');
Avatar billede w13 Novice
20. maj 2007 - 17:39 #5
sludder..
var a = document.getElementById(a);
:)
Avatar billede Mik2000 Professor
21. maj 2007 - 01:37 #6
Hej

Tak for linket l0vgaard

Da W13 havde gjort det meget nemt valgte jeg dog at bruge hans.
Jeg har dog lige et spørgsmål til det.

Så længe jeg kører det i et helt nyt HTML dokument så scroller det fint gang på gang.
Men tager jeg det hen i mit design, så kører det en gang igennem, og stopper.
(i det tomme hvor det virker kommer teksten med det samme den forsvinder, men i designet hvor den ikke virker scroller den mellemrummen til sidst efter teksten og stopper.)

Har du en ide til hvad jeg har gjort galt?
Avatar billede Mik2000 Professor
21. maj 2007 - 01:43 #7
Lige en oversættelse. Lyder som kluder ;)
(i det tomme hvor det virker kommer teksten med det samme den forsvinder, men i designet hvor den ikke virker scroller den mellemrummen til sidst efter teksten og stopper.)

Hvis jeg kører den i det tomme html dokument, så kører den teksten, og når teksten forsvinder i toppen, så kommer den i bunden.
Hvis jeg kører den i mit design, så kører teksten en gang. Efter teksten forsvinder i toppen, forsætter den med at kører indtil den har kørt alle <br> også, og så stopper den

Nogen ide til det w13
Avatar billede w13 Novice
21. maj 2007 - 01:45 #8
Er din kode så kort, at du kan poste den her, eller kan du sende et link til den, eller evt. bare beskrive, hvor du har sat de forskellige dele ind henne?
Avatar billede Mik2000 Professor
21. maj 2007 - 01:45 #9
Den ligger i en <td></td>
Kan det have betydning
Avatar billede Mik2000 Professor
21. maj 2007 - 01:48 #10
<td height="100" align="left" valign="top" class="top_banner">

<div id="divscroll" style="width: 250px; height: 50px; overflow: hidden; background-attachment: fixed;">
<br><br><br>
<font color="#FFFFFF">
Tekst her!<br>
Tekst her!<br>
</font>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<script type="text/JavaScript" language="JavaScript">
function scroll(ascrolling) {
var ascrolling = document.getElementById(ascrolling);
                   
if (ascrolling.scrollTop != (ascrolling.scrollHeight - 300)) {
ascrolling.scrollTop = ascrolling.scrollTop+1;
} else {
ascrolling.scrollTop = 1;
}
}
setInterval("scroll('divscroll')",20);
</script>

</td>
Avatar billede w13 Novice
21. maj 2007 - 01:48 #11
Nej, burde det ikke. Så både <div> og <script> ligger i den td, præcis som jeg lavede det?
Avatar billede Mik2000 Professor
21. maj 2007 - 01:49 #12
Det er koden og så er resten af tabellen selvfølgelig uden om

Har også prøvet at sætte:
<script type="text/JavaScript" language="JavaScript">
function scroll(ascrolling) {
var ascrolling = document.getElementById(ascrolling);
                   
if (ascrolling.scrollTop != (ascrolling.scrollHeight - 300)) {
ascrolling.scrollTop = ascrolling.scrollTop+1;
} else {
ascrolling.scrollTop = 1;
}
}
setInterval("scroll('divscroll')",20);
</script>

op i HEAD
Avatar billede w13 Novice
21. maj 2007 - 01:49 #13
Læser det lige =)
Avatar billede Mik2000 Professor
21. maj 2007 - 01:50 #14
Yep det er bare i orden. Det lavede det grimt i indryk da jeg satte det ind her så har sat det på linje :)
Avatar billede Mik2000 Professor
21. maj 2007 - 01:50 #15
Super du er på, og gider hjælpe :)
Avatar billede Mik2000 Professor
21. maj 2007 - 01:55 #16
Hvis jeg kopiere koden hen i et tomt html dokument så virker den fint. Det er meget underligt :(
Avatar billede Mik2000 Professor
21. maj 2007 - 01:56 #17
... også hvis det er i en tabel :(
Avatar billede w13 Novice
21. maj 2007 - 01:58 #18
Det forstår jeg ikke. Når jeg indsætter koden, som du har den der, virker det stadig fint. Det må være noget andet på siden, som på en eller anden måde ikke kan lade den køre igen.

Hmmm.. Prøv at sæt følgende kode ind i else-delen:
alert(ascrolling.scrollTop+' '+ascrolling.scrollHeight);
Så vil den poppe op med et tal, hver gang indholdet rykkes 1 px, så bare hold enter nede, så alert'erne lukker efterhånden. Når teksten holder op med at rulle, så fortæl mig, hvad der står i alerten på skærmen.
Avatar billede Mik2000 Professor
21. maj 2007 - 01:59 #19
Okay prøver lige
Avatar billede w13 Novice
21. maj 2007 - 02:01 #20
(I øvrigt, så kan du slette alle <br> inde i div'en, hvis du retter:
<div id="divscroll" style="width: 250px; height: 50px; overflow: hidden; background-attachment: fixed;">
til:
<div id="divscroll" style="width: 250px; height: 50px; padding-top: 50px; padding-bottom: 50px; overflow: hidden; background-attachment: fixed;">
Som du ser, har den bare fået samme "padding" (indre margin) i top og bund, som højden er. På den måde indsættes automatisk det blanke stykke før og efter teksten.

Og i øvrigt skal:
if (ascrolling.scrollTop != (ascrolling.scrollHeight - 300)) {
være:
if (ascrolling.scrollTop != (ascrolling.scrollHeight - 50)) {)
Dvs. 300 repræsenterer div'ens height. :)
Måske det er fejlen?)
Avatar billede Mik2000 Professor
21. maj 2007 - 02:02 #21
244 294

Det er det sidste som kommer og det bliver ved med at komme uanset hvormange gange man klikker ok
Avatar billede w13 Novice
21. maj 2007 - 02:03 #22
Ja, jeg tror, det er fordi der stadig står:
if (ascrolling.scrollTop != (ascrolling.scrollHeight - 300)) {
i koden. Altså at 300 skal rettes til 50, fordi det er div'ens nuværende højde.
Avatar billede Mik2000 Professor
21. maj 2007 - 02:08 #23
Testede det og det var derfor. Så nu virker den

Hvis jeg lavede den:
<div id="divscroll" style="width: 250px; height: 50px; padding-top: 50px; padding-bottom: 50px; overflow: hidden; background-attachment: fixed;">
... så går den galt. Så bliver div'en større og så stopper den. Men hvis jeg har <br> og de 50 så kører den.

SUPER, MANGE tak for alt din hjælp :)
Avatar billede Mik2000 Professor
21. maj 2007 - 02:11 #24
Der er selvfølgelig point :)
Avatar billede w13 Novice
21. maj 2007 - 02:14 #25
Så må det jo være sådan!
Og mange tak for point! :D
Avatar billede Mik2000 Professor
21. maj 2007 - 02:15 #26
Det var så lidt, det var super du var på og kunne hjælpe så meget :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 17:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
I går 15:00 RIP af DVD med MakeMKV Af dcedata1977 i Servere
I går 10:08 slet windows Af jajoh i Windows
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
White papers
Flere white papers »