CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

bastholm Nybegynder

15. maj 2007 - 22:30 Der er 10 kommentarer

Scrolle en tekst

I forlængelse af mit spørgsmål om "bacground image" ønsker jeg også at kunne scrolle en tekst, mens baggrunden står fast bagved...
Kan dette gøres uden frames, eller ihvertfald med usynlige frames, så at det eneste man ser er teksten rulle over et billede som står fast!?

Med vanlig hilsen

Lars

Synes godt om

w13 Novice

15. maj 2007 - 23:03 #1

Jeg kender ikke umiddelbart koden til at scrolle. Men jeg kan måske hjælpe dig lidt på vej til et svar.

Der findes et html-element, kaldet <div>. Dette er i virkeligheden bare en beholder, men det smarte ved den er, at du kan indstille den til alt muligt. F.eks. kan du justere dens højde og bredde og sætte al teksten i den til at have en bestemt formatering.

Hvis du bruger koden:
-----------------
<div style="width: 300px; height: 300px; overflow: hidden; background-image: url('billed_url_her'); background-attachment: fixed;">
Tekst her!
</div>
-----------------
Så får du en boks på 300x300 px, som indeholder teksten "Tekst her!". Overflow=hidden indikerer, at hvis der står mere end der reelt kan være i boksen, så skæres det overflødige fra. På den måde bliver boksen ikke bare automatisk større, og der kommer heller ikke scrollbars på. Background-attachment=fixed indikerer at baggrunden er "låst", når boksen så scroller igennem teksten.

Det eneste, du mangler nu, er så den kode, som scroller ned i et div-element. Og det kan jeg desværre ikke umiddelbart hjælpe dig med.

Men hvis du spørger under kategorien programmering -> CSS/stylesheet, så er der nok større chance for at få svar.

Synes godt om

w13 Novice

20. maj 2007 - 15:49 #2

Nej, under JavaScript, selvfølgelig, da det er JavaScript, der scroller div'en. =)

Synes godt om

w13 Novice

20. maj 2007 - 15:55 #3

Umiddelbart ville jeg tro, denne kode fungerer, hvis du smækker et id="divscroll" på div'en:
------------------------------------
<script type="text/JavaScript" language="JavaScript">
a = 'divscroll';
if (document.getElementById(a).scrollTop != document.getElementById(a).scrollHeight) {
getInterval("document.getElementById(a).scrollTop = document.getElementById(a).scrollTop+1",10);
} else {
document.getElementById(a).scrollTop = 0;
}
</script>

Synes godt om

w13 Novice

20. maj 2007 - 15:59 #4

<html>
<head>
</head>
<body>

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

<script type="text/JavaScript" language="JavaScript">
var a = 'divscroll';
if (document.getElementById(a).scrollTop != document.getElementById(a).scrollHeight) {
getInterval("document.getElementById(a).scrollTop = document.getElementById(a).scrollTop+1",10);
} else {
document.getElementById(a).scrollTop = 0;
}
</script>

</body>
</html>

Synes godt om

nicolaib Praktikant

20. maj 2007 - 16:11 #5

Der findes en forklaring på dansk: http://www.html.dk/tutorials/css/lektion3.asp#background-attachment

Det er CSS-kategorien. Men hvis du ændrer overflow:hidden; til overflow:scroll; så får du scroll i boksen.

JavaScript skal bruges hvis teksten automatisk skal rulle - men det er vel ikke det du vil?

Mht dit andet spørgsmål så skal du huske at hvis du angiver baggrunden (f.eks. i body)i en bestemt størrelse uden repeat så giver det kun mening i en bestemt skærmopløsning. Hvis det er en div så kan du angive præcis størrelse på den.

Synes godt om

nicolaib Praktikant

20. maj 2007 - 16:12 #6

Sorry der kom jeg vist lige lidt for sent

Synes godt om

w13 Novice

20. maj 2007 - 16:17 #7

Den virkede så ikke lige, men her er den bug-frie og funktionelle kode, som nu også er afprøvet! =)
----------------------------------
<html>
<head>
</head>
<body>

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

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

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

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

</body>
</html>

Synes godt om

w13 Novice

20. maj 2007 - 16:28 #8

Og jeg læste selvfølgelig også forkert hele tiden.. doh! du vil bare have baggrunden låst fast.
background-attachment: fixed;
:)

Synes godt om

w13 Novice

27. maj 2007 - 18:25 #9

lukketid? :)

Synes godt om

w13 Novice

07. august 2008 - 10:28 #10

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Microsoft 365 kurser

Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Se alle Microsoft 365 kurser

Flere spørgsmål fra Andet design kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
3D foto til stl Af johnnylassen i Andet design	1	31/07/202313:32	31/07/202314:28
InDesign - Af Ajnbnb i Andet design	6	29/07/202209:29	01/08/202209:18
Kan man fremstille numre med en cirkel eller firkant om ? Af Ikke-ekspert i Andet design	6	04/04/202211:38	04/04/202222:11
Logo til kostvejleder Af Buchwald i Andet design	3	18/02/202217:41	20/02/202216:52
Farver i InDesign Af huddie i Andet design	2	01/11/202112:49	26/01/202219:01

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS