Notifikationer

Markér alle som læst Log ud

theselfimages Nybegynder

21. juli 2003 - 01:54 Der er 15 kommentarer og
1 løsning

Vertikalt scrollscript uden fast position

Er det muligt at lave et vertikalt scrollscript der IKKE er placeret efter faste angivet positions (style="position:absolute;), men i stedet efter en tabel eller celle?

Synes godt om

roenving Novice

21. juli 2003 - 01:56 #1

scrollscript placeret efter en celle/tabel ?-)

Først læste jeg det som noget menu-noget, men eh ...

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 02:04 #2

Jeg ligger inde med et ganske godt scrollscript, men problemet er at selve scriptes scrollområde + scrollbar, placeres og styres på skærmen efter position:absolute.
Der skaber jo selvsagt store problemer ved forskellige skærmopløsninger.

Hvordan kan man komme omkring det?

Synes godt om

roenving Novice

21. juli 2003 - 02:07 #3

På
http://www.eksperten.dk/spm/371489

er en absolut positioneret menu flyttet på plads efter en tabelcelle -- det kan man vel også med din scroll-ting ...

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 02:12 #4

Scrollscriptet jeg bruger findes på http://www.podlob.com
Under 'Javascript/DJTLM Research' : Div scroller 2

Har du nogen bud på hvordan det kan laves?

Synes godt om

roenving Novice

21. juli 2003 - 02:39 #5

Den er jo irriterende fordi der er mange elementer, men grundlæggende er det ikke anderledes end den i ovennævnte spm ...

Altså man tager med højre hånds tommel-og pegefinger den tabelcelle du vil have det indeni og giver den et id ...

Jeg går ud fra, at du vil have de forskellige i forskellige celler, så den som hedder:
<div id="nav" ... sætter du bare i den celle, du vil have den i !-)

Den celle du vil have resten i gør du sådan med:

<td id="minRefTd" width=""....>

<script language="javascript" type="text/javascript">
function moveInPlace(){
refElm = document.getElementById('minRefTd');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
xDiv = document.getElementById('box');
xDiv.style.top = zy + 20;
xDiv.style.left = zx + 4;
xDiv = document.getElementById('up');
xDiv.style.top = zy + 16;
xDiv.style.left = zx + 193;
xDiv = document.getElementById('track');
xDiv.style.top = zy + 36;
xDiv.style.left = zx + 193;
xDiv = document.getElementById('drag');
xDiv.style.top = zy + 36;
xDiv.style.left = zx + 193;
xDiv = document.getElementById('down');
xDiv.style.top = zy + 112;
xDiv.style.left = zx + 193;
xDiv = document.getElementById('contentMask');
xDiv.style.top = zy + 24;
xDiv.style.left = zx + 13;
}
</script>

og så skal vi bare have på plads, at den køres onload og onresize (vil ikke virke i ns4 !-)

<body ... onload="initScroller();moveInPlace();" onresize="moveInPlace();">

-- og fjernet den linje i koden, som starter med
window.onload ...

-- et voìlá ,-)

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 02:46 #6

Øhh... aha!
Kunne du evt. vise scriptet samlet?

Men spændende og lovende ser det ud ;)

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 02:49 #7

Faktisk vil jeg blot ha' selve scrollområdet i én navngivet celle og scrollbaren + pile i én anden navngivet celle.

Synes godt om

roenving Novice

21. juli 2003 - 03:02 #8

Hvad så med navigations-div'en ?-)

Hvis du tager hele kilden fra den popup, som ligger på podlob, sætter den ind i en side, laver dine tables og tablecells, og så:

Fjerner position:absolute, top og left fra <div id="nav" og flytter den ind i en celle,
-- gør det samme med <div id="box" (i en anden celle forstås !-)

Sætter id på den tabelcelle, hvor du vil have scrollbar m.m. (minRefTd), og bruger denne udgave af scriptet (som bare skal sættes ind et sted !-) -- jeg plejer at sætte det ind lige før </head> ...

<script language="javascript" type="text/javascript">
function moveInPlace(){
refElm = document.getElementById('minRefTd');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
xDiv = document.getElementById('up');
xDiv.style.top = zy + 4;
xDiv.style.left = zx + 10;
xDiv = document.getElementById('track');
xDiv.style.top = zy + 24;
xDiv.style.left = zx + 10;
xDiv = document.getElementById('drag');
xDiv.style.top = zy + 24;
xDiv.style.left = zx + 10;
xDiv = document.getElementById('down');
xDiv.style.top = zy + 100;
xDiv.style.left = zx + 10;
refElm = document.getElementById('box');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
xDiv = document.getElementById('contentMask');
xDiv.style.top = zy + 4;
xDiv.style.left = zx + 9;
}
</script>

Og stadig den udgave af body, jeg viste ...

Jeg kunne ikke drømme om at dumpe 315 linjer kode for at vise dig hvor du skal slette een eneste linje, så den må du selv finde, den linje som ser sådan ud:

window.onload=initScroller;

skal bare fjernes

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 03:08 #9

Og faktisk så fatter jeg godt dit princip, men kan simpelthen ikke overskue, hvordan dine modificeringer skal integreres. Vil du evt. gide vise en simpel side med scrollscriptet fordelt på 2 celler (1:scrollområde, 2:scrollnavigation) inkl. dine egne ændringer?

Synes godt om

roenving Novice

21. juli 2003 - 03:18 #10

<html>
<head>
Al koden fra podlob-siden UDEN den linje med window.onload

<script language="javascript" type="text/javascript">
function moveInPlace(){
refElm = document.getElementById('minRefTd');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
xDiv = document.getElementById('up');
xDiv.style.top = zy + 4;
xDiv.style.left = zx + 10;
xDiv = document.getElementById('track');
xDiv.style.top = zy + 24;
xDiv.style.left = zx + 10;
xDiv = document.getElementById('drag');
xDiv.style.top = zy + 24;
xDiv.style.left = zx + 10;
xDiv = document.getElementById('down');
xDiv.style.top = zy + 100;
xDiv.style.left = zx + 10;
refElm = document.getElementById('box');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
xDiv = document.getElementById('contentMask');
xDiv.style.top = zy + 4;
xDiv.style.left = zx + 9;
}
</script>
</head>
<body ... onload="initScroller();moveInPlace();" onresize="moveInPlace();">
<table>
<tr>
<td>
<div id="nav" uden absolut positionering -- den skal nemlig bare være i denne celle
</div></td>
<td width="180">
<div id="box" heller ikke her positionering
</div></td>
<td id="minRefTd"></td>
</tr>
</table>

-- alle de andre divs (up,track,drag,down,contentMask) med position sat til absolute
</body>
</html>

-- og det er selvfølgelig ikke testet her i denne udgave, men principperne er vel gennemtestet, så det vil virke fra IE5, fra NN6 og jeg tror det var Opera 3 ...

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 03:33 #11

Sorry... er lidt lam til det her, da min egen modificerede udgave IKKE har den lille menu med, men blot selve scrollscriptet med scrollområdet (celle1) og scrollnavigationen (celle2):

<body>

<div id="up" style="position:absolute; top:44px; left:25px; z-index:1;">
<a href="#" border="0" onfocus="this.blur();">
<img src="scrollup.gif" border="0" width="12" height="7"></a>
</div>

<div id="track" style="position:absolute; top:64px; left:28px; z-index:2;">
<img src="scrollline.gif" width="7" height="250">
</div>

<div id="drag" style="position:absolute; top:54px; left:29px; z-index:3;">
<a href="#" border="0" onfocus="this.blur();">
<img src="scrolldrag.gif" border="0" width="5" height="5"></a>
</div>

<div id="down" style="position:absolute; top:291px; left:25px; z-index:4;">
<a href="#" border="0" onfocus="this.blur();">
<img src="scrolldown.gif" border="0" width="12" height="7"></a>
</div>

<div id="contentMask" style="position:absolute; left:50px; top:50px; width:250px; height:264px; clip:rect(0px,264px,254px,0px); overflow:hidden; z-index:5;">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>

</body>
</html>

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 05:01 #12

Okay.. det lykkedes.. Og det virker Super!

Jeg fjernede denne:
refElm = document.getElementById('box');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);

fra scriptet og så virkede det fint.

En anden lille ting...
Meningen er faktisk af jeg på en side vil ha' 3 vertikale spalter med et scrollscript i hver. Kan det lade sig gøre, uden af skulle ha' 3 kopier af scrollscriptet i <head>? Kan flere henvisninger blot tilskrives scriptet?

;)
Lars

Synes godt om

theselfimages Nybegynder

21. juli 2003 - 21:32 #13

Det virker... ganske nyttigt endda.
Tak for hjælpen. Post et svar.

Lars

Synes godt om

theselfimages Nybegynder

28. juli 2003 - 14:18 #14

Vil du venligst poste et svar?

Synes godt om

roenving Novice

02. august 2003 - 03:23 #15

Velbekomme '-)

-- jeg havde lige haft linket liggende, så dine nye posts ikke var kommet ind til mig ;O)

Synes godt om

roenving Novice

05. august 2003 - 13:41 #16

-- 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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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