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

xcover Nybegynder

28. september 2009 - 01:23 Der er 12 kommentarer og
1 løsning

Div i top og side med scroll

Hejsa,

Jeg er ved at bygge en kalender med vagter, og til det formål har jeg en side som er meget bred og lang, derfor er det vigtigt at have en dato bjælke i toppen af siden som KUN bevæger sig med ved vandret scroll og forbliver på skærmen ved lodret scroll.

I venstre side har jeg også en navne oversigt, som modsat af dato bjælken skal forblive ved vandret scroll, MEN bevæge sig med ved lodret scroll :) håber det giver mening :)

I kan se mit eksempel her:
http://www.silwer.dk/test.asp

Kan det lade sig gøre at "trylle" sådan to div´er fast ? Eller skal der bruges javascript ?

Jeg har faktisk allerede lavet en løsning som virker, dog med frames & javascript. MEN jeg syntes ikke frames er så optimalt...

Håber virkelig en af jer kan hjælpe mig på vejen, eller evt. komme med et eksempel.

TAK :)

Synes godt om

xcover Nybegynder

28. september 2009 - 01:42 #1

Lige et lille eksempel, på en top bare som bliver:
http://www.dr.dk/tjenester/programoversigt/

Hvis man scroller ned på den side, så forbliver "noget" af siden i toppen af skærmen... Hvordan det ?

Synes godt om

olebole Juniormester

28. september 2009 - 22:47 #2

<ole>

style="position:fixed"

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

- men det virker ikke i IE 6. Der bør du lave noget JavaScript i stedet

/mvh
</bole>

Synes godt om

olebole Juniormester

28. september 2009 - 22:55 #3

- men det, du linker til, er lavet i JavaScript

Synes godt om

xcover Nybegynder

28. september 2009 - 22:57 #4

<ole>
Ja, så sidder DIV´en fast i toppen, men den følger desværre ikke med ved vandret scroll, jeg skulle gerne have dato´erne til at følge med.

Demo -> http://www.silwer.dk/test2.asp

IE6 er heldigvis intet problem, det skal KUN benyttes i IE8 :)

Synes godt om

olebole Juniormester

28. september 2009 - 23:09 #5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>

<div style="width:100px;height:50px;top:50px;right:200px;background:red;position:fixed"></div>
<div style="width:100px;height:2000px;background:yellow">Højt indhold</div>

</body>
</html>

Synes godt om

xcover Nybegynder

28. september 2009 - 23:14 #6

Ja, det virker sådan set fint, men mit ønske er så bare at den røde boks kun fungere som "fixed" ved lodret scroll, og som en normal div ved vandret scroll...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>

<div style="width:100px;height:50px;top:50px;right:200px;background:red;position:fixed"></div>
<div style="width:100px;height:2000px;background:yellow">Højt indhold</div>
<div style="width:2000px;height:100px;background:yellow">Bredt indhold</div>

</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>

<div style="width:100px;height:50px;top:50px;right:200px;background:red;position:fixed"></div>
<div style="width:100px;height:2000px;background:yellow">Højt indhold</div>
<div style="width:2000px;height:100px;background:yellow">Bredt indhold</div>

</body>
</html>

Synes godt om

olebole Juniormester

28. september 2009 - 23:20 #7

Er det sådan noget, du mener?

Synes godt om

xcover Nybegynder

28. september 2009 - 23:30 #8

Prøv at se linket: http://www.silwer.dk/test2.asp
Og så kig på den øverste div, den indeholder dato fra 01-09-2009 til 31-09-2009.

Men når man scroller vandret så står dato bjælken bare fast uden at rykke med.

Synes godt om

olebole Juniormester

28. september 2009 - 23:46 #9

Prøv at kombinere den kode med:

var oDiv = null;
window.onscroll = window.onresize = function() {
if (!oDiv) return;
oDiv.style.left = (-document.documentElement.scrollLeft) + "px";
}
window.onload = function() {
oDiv = document.getElementById("mitDiv");
}
</script>

- og skift selv ID'et ud med et realistisk =)

Synes godt om

olebole Juniormester

28. september 2009 - 23:47 #10

- og så glemte jeg script-start tagget

Synes godt om

xcover Nybegynder

29. september 2009 - 00:14 #11

PERFEKT :)
Smid et svar, og TUSIND takker...

Synes godt om

olebole Juniormester

29. september 2009 - 00:16 #12

Selvtakker ;o)

Synes godt om

olebole Juniormester

29. september 2009 - 01:25 #13

- og tak for points =)

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

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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