Toon posts:

[JS] fout bij 1ste keer laden, na refresh niet meer

Pagina: 1
Acties:

woensdag 14 april 2004 16:45

Acties:
  • Urk
  • Registratie: Maart 2000
  • Laatst online: 26-05 15:23

Urk

Topicstarter
Heb de search al gebruikt... het volgende -->

Ik heb een Javascript bovenaan mijn pagina staan die de breedte en hoogte van een aantal tables op de pagina bepaald. Het JS-je staat tussen de <HEAD> tags.

Opzich werkt dit allemaal prima, alleen vind ik het raar dat zodra je IE start en naar de pagina surft er een JS foutmelding word gegenereerd, klik je op Refresh, dan krijg je geen JS foutmelding meer. In beide gevallen werkt het script wel goed, dus ook bij het eerste keer laden van de pagina.

De foutmelding die ik krijg is:
document.getElementById(...) is null or not an object

Dit zou er dus op duiden dat de table nog niet gecreeerd is, gaat er dan iets te snel?? Bij een refesh gaat het wel goed... :?
Wat heeft prioriteit?

Is hiervoor een oplossing? Heb ook al geprobeerd het script helemaal onderaan de pagina, maar tevergeefs...

_/-\o_

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 <script type="text/javascript">
 <!--
  function reDesign() {
   if(document.body.clientWidth > 500 && document.body.clientHeight > 400) {
    tableheight = document.body.clientHeight-140;
    document.getElementById('top_secondcolumn').width=document.body.clientWidth-document.getElementById('top_firstcolumn').width-document.getElementById('top_thirdcolumn').width-document.getElementById('top_fourthcolumn').width;
    document.getElementById('bottom_firstcolumn').width=document.body.clientWidth-document.getElementById('bottom_secondcolumn').width-document.getElementById('bottom_thirdcolumn').width;
    document.getElementById('contenttable').height=tableheight;
    document.getElementById('contentcell').height=tableheight;
   }
  }
 window.onresize=reDesign
 window.onload=reDesign
 //-->
 </script>

[ Voor 6% gewijzigd door Urk op 14-04-2004 16:45 ]

woensdag 14 april 2004 16:52

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Je zou het volgende kunnen gebruiken:
code:
1

<script type="text/javascript" defer="defer">


Maar dat zou niks uitmogen maken, omdat je pas bij een onload die functie aanroept (dus nadat de pagina geladen is).

Heb je niks online staan?

[ Voor 9% gewijzigd door BtM909 op 14-04-2004 16:55 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 april 2004 16:59

Acties:
  • Urk
  • Registratie: Maart 2000
  • Laatst online: 26-05 15:23

Urk

Topicstarter
Defer werkt niet (waar is dat voor trouwens?), het is heel vreemd. Heb het helaas niet online staan (lukt nu even niet)

Maar dit is het stukje header:

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

<html>
<head>
 <title>TITLE</title>
 <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
 <script type="text/javascript">
 <!--
  function reDesign() {
   if(document.body.clientWidth > 500 && document.body.clientHeight > 400) {
    tableheight = document.body.clientHeight-140;
    document.getElementById('top_secondcolumn').width=document.body.clientWidth-document.getElementById('top_firstcolumn').width-document.getElementById('top_thirdcolumn').width-document.getElementById('top_fourthcolumn').width;
    document.getElementById('bottom_firstcolumn').width=document.body.clientWidth-document.getElementById('bottom_secondcolumn').width-document.getElementById('bottom_thirdcolumn').width;
    document.getElementById('contenttable').height=tableheight;
    document.getElementById('contentcell').height=tableheight;
   }
  }
 window.onresize=reDesign
 window.onload=reDesign
 //-->
 </script>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td valign="top">

   <table width="100%" height="70" border="0" cellpadding="0" cellspacing="0">
    <tr height="70" bgcolor="#BCBCBC">
     <td id="top_firstcolumn" width="20"></td>
     <td id="top_secondcolumn">[img]"<%=Application("rootfolder")%>images/logo.gif"[/img]</td>
     <td id="top_thirdcolumn" width="355" class="footer" nowrap>TEST</td>
     <td id="top_fourthcolumn" width="50"></td>
    </tr>
   </table>

   <table width="100%" id="contenttable" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td id="contentcell" valign="top"></td>
    </tr>
   </table>

</body>
</html>

woensdag 14 april 2004 17:02

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Misschien stomme vraag, maar waar zijn de id's die je hier aanspreekt:

code:
1
2
3

document.getElementById('bottom_firstcolumn').width=
  document.body.clientWidth-document.getElementById('bottom_secondcolumn').width-
  document.getElementById('bottom_thirdcolumn').width;


Met defer geef je aan dat het script-stuk pas uitgevoerd wordt na de onload van je window. :) Een onload zonder functie zeg maar :)

[ Voor 28% gewijzigd door BtM909 op 14-04-2004 17:04 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 april 2004 17:10

Acties:
  • Urk
  • Registratie: Maart 2000
  • Laatst online: 26-05 15:23

Urk

Topicstarter
BtM909 schreef op 14 april 2004 @ 17:02:
Misschien stomme vraag, maar waar zijn de id's die je hier aanspreekt:

code:
1
2
3

document.getElementById('bottom_firstcolumn').width=
  document.body.clientWidth-document.getElementById('bottom_secondcolumn').width-
  document.getElementById('bottom_thirdcolumn').width;


Met defer geef je aan dat het script-stuk pas uitgevoerd wordt na de onload van je window. :) Een onload zonder functie zeg maar :)
Die zijn er wel maar heb ik nu even niet geinclude, die zitten in de header...
OK, defer is duidelijk...

woensdag 14 april 2004 17:12

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Urk schreef op 14 april 2004 @ 17:10:
[...]


Die zijn er wel maar heb ik nu even niet geinclude, die zitten in de header...
OK, defer is duidelijk...
Maar als ik deze regel weghaal dan is de javascript error weg... Laat ik hem staan, dan blijf ik een error houden ;)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 april 2004 17:25

Acties:
  • Urk
  • Registratie: Maart 2000
  • Laatst online: 26-05 15:23

Urk

Topicstarter
Ja, ok, logisch. Omdat die er dan niet zijn ;)

woensdag 14 april 2004 17:28

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Urk schreef op 14 april 2004 @ 17:25:
Ja, ok, logisch. Omdat die er dan niet zijn ;)
Ik ga ff diep ademhalen :(

Wat is je probleem dan als ik GEEN JS-error krijg?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 april 2004 18:00

Acties:
  • Urk
  • Registratie: Maart 2000
  • Laatst online: 26-05 15:23

Urk

Topicstarter
BtM909 schreef op 14 april 2004 @ 17:28:
[...]

Ik ga ff diep ademhalen :(

Wat is je probleem dan als ik GEEN JS-error krijg?
Ik had dat stukje code eraf gelaten, maar hier is alle code:

sorry, deze geeft dus de fout... de javascript zelf is gewoon goed volgens mij...

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

<html>
<head>
 <title>TITLE</title>
 <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
 <script type="text/javascript">
 <!--
  function reDesign() {
   if(document.body.clientWidth > 500 && document.body.clientHeight > 400) {
    tableheight = document.body.clientHeight-140;
    document.getElementById('top_secondcolumn').width=document.body.clientWidth-document.getElementById('top_firstcolumn').width-document.getElementById('top_thirdcolumn').width-document.getElementById('top_fourthcolumn').width;
    document.getElementById('bottom_firstcolumn').width=document.body.clientWidth-document.getElementById('bottom_secondcolumn').width-document.getElementById('bottom_thirdcolumn').width;
    document.getElementById('contenttable').height=tableheight;
    document.getElementById('contentcell').height=tableheight;
   }
  }
 window.onresize=reDesign
 window.onload=reDesign
 //-->
 </script>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td valign="top">

   <table width="100%" height="70" border="0" cellpadding="0" cellspacing="0">
    <tr height="70" bgcolor="#BCBCBC">
     <td id="top_firstcolumn" width="20"></td>
     <td id="top_secondcolumn">[img]"/pslounge/images/logo.gif"[/img]</td>
     <td id="top_thirdcolumn" width="355" class="footer" nowrap>TEST</td>
     <td id="top_fourthcolumn" width="50"></td>
    </tr>
   </table>

   <table width="100%" id="contenttable" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td id="contentcell" valign="top">


<script type="text/javascript">
<!--
 document.getElementById('contentrow').height=tableheight-50;
//-->
</script>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr height="25">
  <td colspan="4"></td>
 </tr>
 <tr id="contentrow">
  <td width="15"></td>
  <td width="260" valign="top"></td>
  <td valign="top">test</td>
  <td width="15"></td>
 </tr>
 <tr height="25">
  <td colspan="4"></td>
 </tr>
</table>

     </td>
    </tr>
   </table>

   <table width="100%" height="70" border="0" cellpadding="0" cellspacing="0">
    <tr height="70" bgcolor="#BCBCBC">
     <td id="bottom_firstcolumn"></td>
     <td id="bottom_secondcolumn" width="179" class="footer" nowrap></td>
     <td id="bottom_thirdcolumn" width="50"></td>
    </tr>
   </table>
   
  </td>
 </tr>
</table>

</html>

woensdag 14 april 2004 23:06

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Ik zou zo snel mogelijk een doe-het-zelf-cursus debuggen gaan volgen ;)

Ten eerste mag je die comment-regels tussen de script-tags voortaan weglaten.

Daarnaast open ik de pagina in IE (niet eens Mozilla/FireFox) en die geeft de volgende foutmelding:

tableheight is not defined

Mag jij raden wat er hier mis is :)

Omdat je de code gewoon tussen de HTML heb geplaatst, moet je hier defer="defer" gebruiken, zodat de code pas uitgevoerd wordt als de pagina is geladen. Netter is het op de script-tags tussen de head-tags te plaatsen en een soortement van init functie aanroepen met window.onload.


edit:

Ik zit nu pas te kijken naar je lay-out, maar dit soort problemen kan je oplossen door volledig gebruik te maken van CSS voor je layout ipv table-layouts..

edit:
Edit2

En haal je pagina eens door een validator, zoals http://validator.w3.org/, want je mist een </body> tag

[ Voor 26% gewijzigd door BtM909 op 15-04-2004 09:07 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 15 april 2004 05:57

Acties:

Verwijderd

Voor de duidelijkheid wil ik er ook nog aan toevoegen:
Het stukje script van regel 42 t/m 46 (van je laatste code paste) is de boosdoener.
Het id 'contentrow' wordt daaronder pas gegenereerd, dus dat gaat fout!
Verplaats dat blokje code naar regel 62, onder de tabel, dat scheelt al iets.
Pagina: 1
Reageer