Toon posts:

[JS] Functie uitvoeren ná het laden van pagina

Pagina: 1
Acties:
  • 103 views sinds 30-01-2008
  • Reageer

woensdag 13 december 2006 17:30

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Hey got mensen!

Ik heb een probleempje:
Ik wil een bepaalde div net zo hoog maken als de pagina en aangezien het kan zijn dat er gescrolled wordt, doe ik dit op deze manier:
In de head:
JavaScript:
1
2
3
4
5
6
7

<script type="text/javascript">
function resize() {
    splitter = document.getElementById('splitter');
    height = document.body.scrollHeight;
    splitter.style.height = height;
}
</script>

Ik heb er een functie van gemaakt, omdat de browser anders, op de één of andere rare manier, de div met id="splitter" niet pakt (Has no properties zegt firefox).
Nu wil ik deze functie ná het laden van de pagina aanroepen, anders is srollHeight gelijk aan 0...
Ik heb al geprobeerd dit vóór de </body> te zetten:
JavaScript:
1
2
3

<script type="text/javascript">
resize()
</script>

Helaas werkt dit niet...

Ook heb ik geprobeer met body onload, dit levert ook 0 op.
Wat wel werkt is nóg een body maken na de echte body en dan met een onload, maar dit is te vies voor woorden...

Iemand enig idee hoe ik het dan kan doen?

woensdag 13 december 2006 17:45

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:58

crisp

Devver

Pixelated

Ik zou die functie sowieso anders noemen aangezien resize een standaard method van het window object is.
Ook is het good practice variabelen local te declareren dmv het 'var' keyword.

Verder is het van belang te weten of je pagina in quirksmode of in standards-compliantmode rendered.

Intentionally left blank

woensdag 13 december 2006 18:04

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
crisp schreef op woensdag 13 december 2006 @ 17:45:
Ik zou die functie sowieso anders noemen aangezien resize een standaard method van het window object is.
Ook is het good practice variabelen local te declareren dmv het 'var' keyword.

Verder is het van belang te weten of je pagina in quirksmode of in standards-compliantmode rendered.
Ok heb hem anders genoemd; sizeSplit(); en ik heb 'var' voor de variabelen gezet...
Het werkt nog steeds niet met:
<script type="text/javascript">
sizeSplit()
</script>

Heb dit bovenaan de HTML staan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

[ Voor 16% gewijzigd door plofkip op 13-12-2006 18:05 ]

woensdag 13 december 2006 18:14

Acties:

Verwijderd

Ik heb er een functie van gemaakt, omdat de browser anders, op de één of andere rare manier, de div met id="splitter" niet pakt (Has no properties zegt firefox).

Hmmm, raar. Zo zou het ook moeten gaan:


JavaScript:
1
2
3
4
5
6

<script type="text/javascript"> 
function sizeSplit()
{ 
    document.getElementById('splitter').style.height = document.body.scrollHeight;
} 
</script>


Heb je al iets geprobeerd met een timeout? Dus dat je na een seconde oid die functie pas aanroept?

woensdag 13 december 2006 18:20

Acties:
  • KabouterSuper
  • Registratie: September 2005
  • Niet online

KabouterSuper

Een onload zou moeten werken. Probeer anders je functie via een knop aan te roepen. Dan kan je in elk geval checken of het probleem in de functie zit, of in de timing van de functie. Ik vermoed het eerste!

When life gives you lemons, start a battery factory

woensdag 13 december 2006 18:31

Acties:
  • b19a
  • Registratie: September 2002
  • Niet online

b19a

JavaScript:
1
2
3

window.addEventListener('load', function() {
  document.getElementById('splitter').style.height = document.body.scrollHeight;
});

Koppelt een anonieme functie aan het object window als eventlistener. Werkt misschien niet in IE, dus dan zul je even op internet moeten speuren voor een cross-browser alternatief. Bovenstaande is een opstapje naar het grotere werk ;).

woensdag 13 december 2006 18:34

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
KabouterSuper schreef op woensdag 13 december 2006 @ 18:20:
Een onload zou moeten werken. Probeer anders je functie via een knop aan te roepen. Dan kan je in elk geval checken of het probleem in de functie zit, of in de timing van de functie. Ik vermoed het eerste!
Ik heb een alert met height gedaan en dan via een knop aanroepen en de height is 0.... document.body.scrollHeight bestaat toch gewoon? :?

woensdag 13 december 2006 18:45

Acties:
  • KabouterSuper
  • Registratie: September 2005
  • Niet online

KabouterSuper

Hmmm. Ja, scrollHeight bestaat.

Even los van het feit dat je scrollHeight 0 is, weet je zeker dat dit de hoogte is die je zoekt? Ik gebruik altijd offsetHeight (uit mijn hoofd).

[ Voor 10% gewijzigd door KabouterSuper op 13-12-2006 18:46 ]

When life gives you lemons, start a battery factory

woensdag 13 december 2006 18:47

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
KabouterSuper schreef op woensdag 13 december 2006 @ 18:45:
Hmmm. Ja, scrollHeight bestaat.

Even los van het feit dat je scrollHeight 0 is, weet je zeker dat dit de hoogte is die je zoekt? Ik gebruik altijd offsetHeight (uit mijn hoofd).
Die is ook 0 :?

woensdag 13 december 2006 18:53

Acties:
  • KabouterSuper
  • Registratie: September 2005
  • Niet online

KabouterSuper

dan moet je wat meer code gaan posten. Ik heb in een willekeurige site
alert(document.body.scrollHeight); in de onload gezet, en dit levert precies de goede waarde (880 in mijn geval).

When life gives you lemons, start a battery factory

woensdag 13 december 2006 19:07

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Ok, ik heb al een heeeeeel erg flauw vermoeden waarom het niet werkt... Ik maak gebruik van FastTemplate (php) en deze code zit in de header.tpl, dit is 1 van de 3 template bestanden... Die andere 2 zijn natuurlijk nog niet geladen :? Iemand een idee how to fix?

woensdag 13 december 2006 19:23

Acties:
  • KabouterSuper
  • Registratie: September 2005
  • Niet online

KabouterSuper

Ik ken FastTemplate niet, dus hier kan ik je niet mee helpen.

When life gives you lemons, start a battery factory

woensdag 13 december 2006 19:53

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Het idee is dat hij 'delen' 1 voor 1 laadt... Oftewel:

Laad 'header.tpl'
Laad 'content.tpl'
Laad 'footer.tpl'

Die .tpl bestanden zijn gewoon html-bestandjes...
De header file:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MG2e hands</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript">
function sizeSplit() {
    var splitter = document.getElementById('splitter');
    var height = document.body.scrollHeight;
    splitter.style.height = height;
    alert(height)
}
</script>
</head>

<body>

<!-- Logo en al die zooi -->
<div class="logo">
    <img src="images/logo.png" />
</div>
<div class="header_middle">
    <img src="images/header_middle.png" />
</div>
<div id="splitter" class="splitter">
</div>

<!-- Menu -->
<div id="menu" class="menu_bar">
    <div class="menu_knoppen">
        <a class="menu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;Afslagen&nbsp;&nbsp;&nbsp;Kavel toevoegen&nbsp;&nbsp;&nbsp;Profiel&nbsp;&nbsp;&nbsp;Uitloggen&nbsp;&nbsp;&nbsp;Admin</a>
    </div>
    <div class="zoeken">
        <a class="zoeken">Zoeken: </a>
        <form>
            <input type="text" class="zoeken" />
        </form>
    </div>
    <div class="menu_navigator">
        <a class="navigator">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;U bent hier: MG2e hands > Kavels > Audio, Tv en Video > iPod nano 2GB</a>
    </div>
    <div class="menu_left">
        <img src="images/menu_left.png" />
    </div>
    <div class="menu_right">
        <img src="images/menu_right.png" />
    </div>
</div>

<!-- De twee panels links -->
<div class="userpanel">
    <a class="panel_title">&nbsp;&nbsp;&nbsp;<u>User panel</u></a><br />
    <a class="panel">- <b>S317657</b><br />
    - Stefan Kip<br />
    - kipusoep@hotmail.com<br />
    - Apeldoorn<br />
    - Aantal kavels: 4<br />
    - Rating: 3.5</a><br /><br />
    <a href="#" onclick="javascript:sizeSplit();">Test</a>
    <div align="center">
        <img src="images/user_1.png" width="100" height="120" />
    </div>
</div>
<div class="recent">
    <a class="panel_title">&nbsp;&nbsp;&nbsp;<u>Recente toevoegingen</u></a><br />
    <a class="panel">- iPod nano 2GB (Devish)</a><br />
    <a class="panel2">- JVC Flatscreen tv (Ren)</a><br />
    <a class="panel">- Nike air max (Haarman)</a><br />
    <a class="panel2">- Alleenst. Villa (kipusoep)</a><br />
    <a class="panel">- Asus A6va laptop (Jan11)</a><br />
    <a class="panel2">- Nog wat zooi (nickname)</a><br />
    <a class="panel">- Nog wat zooi (nickname)</a><br />
    <a class="panel2">- Nog wat zooi (nickname)</a><br />
    <a class="panel">- Nog wat zooi (nickname)</a><br />
    <a class="panel2">- Nog wat zooi (nickname)</a><br />
    <a class="panel">- Nog wat zooi (nickname)</a><br />
    <a class="panel2">- Nog wat zooi (nickname)</a><br />
    <a class="panel">- Lalalalaa (Sjakie)</a><br /></a>
</div>

content:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<div class="content">
    <div class="art_image">
        <img src="images/kavel_1.png" />
    </div>
    <div class="art_info">
        <a class="art_title">Aangeboden: {PRODUCT}</a><br /><br />
        <table>
            <tr><td><a class="art_text">Aangeboden door:</a></td><td><b><a class="art_text">kipusoep</a></b></td></tr><div class="rating"><img align="absmiddle" src="images/star_filled.png" /><img align="absmiddle" src="images/star_filled.png" /><img align="absmiddle" src="images/star_filled.png" /><img align="absmiddle" src="images/star_half.png" /><img align="absmiddle" src="images/star_empty.png" /></div>
            <tr><td><a class="art_text">Woonplaats:</a></td><td><b><a class="art_text">Apeldoorn</a></b></td></tr>
            <tr><td><a class="art_text">Telefoonnummer:</a></td><td><b><a class="art_text">+31 0612345678</a></b></td></tr>
        </table><br /><a class="art_text">
        Ik verkoop mijn iPod nano 2GB, zgan! Weinig gebruikt. Ik verkoop hem wegens aanschaf MS Zune! Bellen is sneller!<br /><br />
        w0000000t!</a>
        <br /><br /><br /><br />
        <form><hr class="hr" /><a class="art_text">&nbsp;Bod uitbrengen: € </a><input type="text" value="0,00" size="9" maxlength="9" />&nbsp;<input type="submit"value="Bied!" />
        </form>
        <br />
        <a class="art_sub_title">&nbsp;Huidige biedingen:</a>
        <a class="art_text">
        <table>
            <tr><td><a class="art_text"><b>Naam</b></a></td><td width="50"><a class="art_text">&nbsp;</a></td><td><b><a class="art_text">Bod</a></b></td></tr><br/>
            <tr><td><a class="art_text">Devish</a></td><td width="50"><a class="art_text">&nbsp;</a></td><td><a class="art_text">€ 35,-</a></td></tr>
            <tr><td><a class="art_text">Haarman</a></td><td width="50"><a class="art_text">&nbsp;</a></td><td><a class="art_text">€ 20,-</a></td></tr>
            <tr><td><a class="art_text">Ren</a></td><td width="50"><a class="art_text">&nbsp;</a></td><td><a class="art_text">€ 1,99</a></td></tr>
            <tr><td><a class="art_text">kipusoep</a></td><td width="50"><a class="art_text">&nbsp;</a></td><td><a class="art_text">€ 0,01</a></td></tr>
            <!-- BEGIN DYNAMIC BLOCK: nummers -->
            <tr><td>{NUMMER}</td></tr>
            <!-- END DYNAMIC BLOCK: nummers -->
        </table>
        </a>
    </div>
</div>

footer:
HTML:
1
2

</body>
</html>


Als ik die javascript functie uitvoer, is de volledige body natuurlijk nog niet geparsed... Kan ik die js functie dan in de footer aanroepen?

woensdag 13 december 2006 21:56

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:58

crisp

Devver

Pixelated

JavaScript:
1

splitter.style.height = height + 'px';

en by the way:
HTML:
1

<a href="#" onclick="javascript:sizeSplit();">Test</a>

dat 'javascript:' hoort niet in een event-handler

Intentionally left blank

woensdag 13 december 2006 22:21

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
crisp schreef op woensdag 13 december 2006 @ 21:56:
JavaScript:
1

splitter.style.height = height + 'px';

en by the way:
HTML:
1

<a href="#" onclick="javascript:sizeSplit();">Test</a>

dat 'javascript:' hoort niet in een event-handler
Ok daar leer ik wat van, alleen lost het niet het probleem op ;)

woensdag 13 december 2006 22:31

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:58

crisp

Devver

Pixelated

Wat werkt er niet dan? Ik krijg gewoon een height ge-alert en als ik die div een background-color geef zie ik 'm ook die hoogte krijgen...

Intentionally left blank

woensdag 13 december 2006 22:55

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Dat heb ik net uitgelegd ;) Ik denk dat het komt omdat de pagina uit 3 delen bestaat (fasttemplate) en in het eerste deel zit de start van <body> en in het tweede deel pas het einde, volgens mij vinden de browsers dat niet leuk, aangezien hij eerst header.tpl uitvoert zonder </body> tag, dus is er geen body.scrollHeight heb ik het idee...

woensdag 13 december 2006 23:39

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:58

crisp

Devver

Pixelated

FaNtJuH schreef op woensdag 13 december 2006 @ 22:55:
Dat heb ik net uitgelegd ;) Ik denk dat het komt omdat de pagina uit 3 delen bestaat (fasttemplate) en in het eerste deel zit de start van <body> en in het tweede deel pas het einde, volgens mij vinden de browsers dat niet leuk, aangezien hij eerst header.tpl uitvoert zonder </body> tag, dus is er geen body.scrollHeight heb ik het idee...
Hoe de pagina serverside samengesteld wordt doet totaal niet ter zake, de browser krijgt toch uiteindelijk 1 compleet document...

Intentionally left blank

woensdag 13 december 2006 23:44

Acties:
  • Suepahfly
  • Registratie: Juni 2001
  • Laatst online: 16-10 13:42

Suepahfly

Correct me if im wrong maar doet
JavaScript:
1

<script type="text/javascript" src="extern.js" defer="defer">myResizeFunction()</script>

Niet precies wat TS bedoeld?

Voor zover ik weer zorgt defer="defer" ervoor dat de js code pas wordt uitgevoerd na het laden van de pagina

woensdag 13 december 2006 23:46

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:58

crisp

Devver

Pixelated

Suepahfly schreef op woensdag 13 december 2006 @ 23:44:
[...]
Voor zover ik weer zorgt defer="defer" ervoor dat de js code pas wordt uitgevoerd na het laden van de pagina
IE is de enige browser die ueberhaupt iets doet met het defer-attribuut. Daarbij schrijft geen enkele standaard voor wat een UA precies met dat attribuut moet doen (behalve dat je het mag negeren).

[ Voor 16% gewijzigd door crisp op 13-12-2006 23:46 ]

Intentionally left blank

donderdag 14 december 2006 07:25

Acties:

Verwijderd

crisp schreef op woensdag 13 december 2006 @ 17:45:
Ik zou die functie sowieso anders noemen aangezien resize een standaard method van het window object is.
Bedoel je niet window.resizeTo()?

donderdag 14 december 2006 09:19

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Jammer dat dat defer niet werkt... Ik denk toch echt dat het te maken heeft met het feit dat er 3 verschillende delen worden opgebouwd, waarbij in het ene deel de body begint en in het andere deel de body eindigt... Maar misschien zie ik dat ook wel verkeerd, dat weet ik niet. Heeft iemand nog ideeën dan?

vrijdag 15 december 2006 10:42

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Any1?

vrijdag 15 december 2006 14:29

Acties:
  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020

Boelie-Boelie

FaNtJuH schreef op donderdag 14 december 2006 @ 09:19:
Ik denk toch echt dat het te maken heeft met het feit dat er 3 verschillende delen worden opgebouwd, waarbij in het ene deel de body begint en in het andere deel de body eindigt...
Zoals reeds uitgelegd combineert een server de drie bestanden tot één bestand. Na het combineren stuurt hij het pas naar de browser toe. Tijdens het laden van het document wordt je javascript uitgevoerd.

Uit het topic blijkt dat je het script wil uitvoeren na het laden van het document. Nou is zoiets als <body onload="foo();"> geen goeie manier, maar kun je misschien iets met een artikeltje van Simon Willison.

Met de laatste alinea begeef ik me op glad ijs, want ik begin nog maar net met javascript :D maar ik heb wel een vermoeden dat mijn reactie toch iets toevoegt. :)

Cogito ergo dubito

zondag 17 december 2006 15:45

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Boelie-Boelie schreef op vrijdag 15 december 2006 @ 14:29:
[...]
....
Met de laatste alinea begeef ik me op glad ijs, want ik begin nog maar net met javascript :D maar ik heb wel een vermoeden dat mijn reactie toch iets toevoegt. :)
Elke reactie voegt iets toe :) Het is sowieso fijn dat je mensen wilt helpen :)

Ik heb die link van je bekeken, ziet er goed uit, heb het in mijn pagina geprobeerd en hij laadt inderdaad op het einde pas... Maar de height van de pagina is nog steeds 0 :?

[ Voor 18% gewijzigd door plofkip op 17-12-2006 15:58 ]

woensdag 20 december 2006 18:51

Acties:
  • plofkip
  • Registratie: Oktober 2002
  • Nu online

plofkip

Topicstarter
Heb nu deze code:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript">
window.onResize = sizeSplit;
function sizeSplit() {
    var splitter = document.getElementById('splitter');
    var height = document.body.scrollHeight;
    var clientHeight;
    if(document.innerHeight){
        clientHeight=document.innerHeight;
    } else if(document.documentElement.clientHeight){
        clientHeight=document.documentElement.clientHeight;
    } else if(document.body){
        clientHeight=document.body.clientHeight;
    }
    if (height > clientHeight) {
        clientHeight = height;
    }
    splitter.style.height = clientHeight + 'px';
}


en dan staat dit in mn body tag:
<body onload="javascript:sizeSplit();" onresize="javascript:sizeSplit();">

Werkt opzich wel, alleen is de pagina vaak scrollable en dan wordt die splitter dus niet de hoogte van de hele pagina, maar van wat de browser kan zien... Daarom wil ik scrollHeight gebruiken, maar die is 0, zelfs als de pagina al geladen is en ik de browser resize... Iemand enig idee hoe het kan dat die 0 blijft?

Never mind, heb het al opgelost door te kijken of clientHeight kleiner is dan 570 (want dat moet hij minimaal zijn) en dan past hij zich wel aan als hij groter is :)

[ Voor 7% gewijzigd door plofkip op 20-12-2006 19:11 ]

Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq