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

01/11

Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele

01/11

Google Clouds netop fratrådte topchef har fundet sit nye job: Bliver en af de mest magtfulde personer hos ServiceNow

01/11

Nu går OpenAI efter struben på Google: ChatGPT fungerer nu også som en AI-søgemaskine

01/11

Nørgaard: Agenterne kommer, og jeg er klar: Måske bliver min gamle drøm snart virkelighed

01/11

Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem

01/11

Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver

01/11

Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre

01/11

Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'

01/11

Google indlemmer sin AI Gemini i Google Maps, Google Earth og Waze: Det kommer det til at betyde

01/11

Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner

01/11

Sådan blev Margrethe Vestager ’Silicon Valleys største fjende’

Vis flere artikler

IT-JOB

TV2

Software Engineer til Live Technology

KMD A/S

Lead BI Developer

Zealand Business College

Kunne du tænke dig at dele ud af din viden om robotter og PLC, så er det måske dig ZBC søger

SDC A/S

Procurement Specialist med kommercielt mindset

Cognizant Technology Solutions Denmark ApS

Sr. Test Analyst

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 06:10	Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00	Datafordeler Af Lsk i PHP
I går 12:37	Summere beløb pr. dato Af TTA i Excel
31/1022:44	Tilslutte chassic fans Af viking69 i PC
31/1020:28	LED lysstofrør Af ErikHg i Fri debat