[Javascript] voor dummies deel 5

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  zondag 13 mei 2007 @ 00:07:50 #251
12880 CraZaay
prettig gestoord
pi_49318631
Je voegt dan daadwerkelijk aan de DOM toe en manipuleert bestaande elementen. Nu stel je gewoon een string met HTML samen die je ergens invoegt.
pi_49319057
owkay, maar stel ik heb de div test. hierin staat een table met 3 td's. Wat is dan het verschil dat ik zeg document.getElementById("tdId").innerHTML of ik zeg document.getElementById.getElementByTagName("td")[tagnr].innerHTML ?

Ik bedoel je zal er echt wel je redenen voor hebben om het te gebruiken, maar ik mis hem een beetje
pi_49319101
Ik gok dat CraZaay het mooier vind als je de tabel doormiddel van javascript opbouwt. Dat je "nodes" creeert
pi_49319208
quote:
Op zondag 13 mei 2007 00:22 schreef Geqxon het volgende:
Ik gok dat CraZaay het mooier vind als je de tabel doormiddel van javascript opbouwt. Dat je "nodes" creeert
Accoord, maar zit er nog een praktisch nut aan behalve dat het "mooier" is? Tot nu toe vind ik het alleen maar meer werk voor iets wat voor mij niets oplevert..
pi_49319298
Trouwens, ondersteunt Javascript geen multiline variabelen?
pi_49319496
Vanwege de vake variabele +=? Ik had slechte ervaringen met alles in een keer er in te gooien, vandaar dat ik het zo doe. Het kan dus wel
  zondag 13 mei 2007 @ 00:49:57 #257
12880 CraZaay
prettig gestoord
pi_49319966
quote:
Op zondag 13 mei 2007 00:27 schreef Geqxon het volgende:
Trouwens, ondersteunt Javascript geen multiline variabelen?
Nee

En ja, het maken van nodes vind ik netter omdat je daarmee meer mogelijkheden hebt voor manipulatie achteraf. Al is dat voor jouw script niet noodzakelijk, ik maak er maar een gewoonte van
  zondag 13 mei 2007 @ 13:21:52 #258
3677 SuperRembo
Sinds 1998
pi_49328186
quote:
Op zondag 13 mei 2007 00:27 schreef Geqxon het volgende:
Trouwens, ondersteunt Javascript geen multiline variabelen?
Nee, maar een statement mag uiteraard wel over meerdere regels lopen (het is geen VB ). Dus

1
2		var foo = 'bar'
   + 'baz';

kan wel.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zondag 13 mei 2007 @ 13:25:08 #259
3677 SuperRembo
Sinds 1998
pi_49328290
quote:
Op zondag 13 mei 2007 00:49 schreef CraZaay het volgende:
[..]
En ja, het maken van nodes vind ik netter omdat je daarmee meer mogelijkheden hebt voor manipulatie achteraf. Al is dat voor jouw script niet noodzakelijk, ik maak er maar een gewoonte van :)
Het maken van form elementen is wel erg irritant omdat je daar voor IE weer een uitzondering moet maken. In IE kan je namelijk niet achteraf het type van een input element veranderen. Daarom moet je daar zo'n halfbakken constuctie als

1var field = document.createElement('<input type="radio">)


gebruiken om een radiobutton te maken.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_49328926
quote:
Op zondag 13 mei 2007 13:25 schreef SuperRembo het volgende:

[..]

Het maken van form elementen is wel erg irritant omdat je daar voor IE weer een uitzondering moet maken. In IE kan je namelijk niet achteraf het type van een input element veranderen. Daarom moet je daar zo'n halfbakken constuctie als
[ code verwijderd ]

gebruiken om een radiobutton te maken.
Maar dan ben je weer op het punt waar ik nu zit, oftewel gewoon complete html er tussen proppen.. toch?
  zondag 13 mei 2007 @ 14:09:23 #261
3677 SuperRembo
Sinds 1998
pi_49329543
Ik zou beginnen met het maken van een functie die 1 parameter aan de html toevoegd. Nu heb je die code er dubbel in staan. Je kunt ook nog wat dingen uit de html schrappen en verplaatsen naar css (zoals border en cellpadding).
Uiteindelijk zal een DOM oplossing denk ik cleanere code opleveren. Of dat de moeite loont weet ik niet, dat hangt ook af van het project.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  maandag 14 mei 2007 @ 11:24:03 #262
12880 CraZaay
prettig gestoord
pi_49356790
quote:
Op zondag 13 mei 2007 13:47 schreef GBCHEATER het volgende:

[..]

Maar dan ben je weer op het punt waar ik nu zit, oftewel gewoon complete html er tussen proppen.. toch?
Dit is net die ene uitzondering. Ik kan met niet herinneren wanneer ik voor het laatst een input-element heb toegevoegd aan de DOM
pi_49464682
Ik heb in navolging op een topic in CSS voor Dummies een scriptje geschreven (half geript) om 2 divs te kunnen vergroten/ kleinen

Echter zit ik met een probleem. Maar ik zal eerst even de opzet uitleggen.

Ik heb 1 container div waarin 3 extra divs ziten. Deze divs zijn linkerkant, spacing (oftewel de bar om mee te scrollen) en de rechter div, Als ik met de middendiv (spacing) scroll wil de scroller nog wel eens het veld verkleinen en ik zie zelf de fout niet.

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124		<script type="text/javascript"> 
<!-- 
// variables
var curWidth = 0; 
var curX = 0; 
var newX = 0;
var minWidthL = 150;     // min width of left div
var minWidthR = 300;     // min width of right div
var mouseButtonPos = "up"; 

//Function 'setPos(...) gets the original div width. 
function setPos(e) { 
    //For handling events in ie vs. w3c. 
    curEvent = ((typeof event == "undefined")? e: event); 
    //Sets mouse flag as down. 
    mouseButtonPos = "down"; 
    //Gets position of click. 
    curX = curEvent.clientX; 

    //Get the width of the div. 
    var tempWidthL = document.getElementById("treeView").style.width; 
    var tempWidthR = document.getElementById("treeList").style.width; 

    //Get the width value. 
    var widthArrayL = tempWidthL.split("p"); 
    var widthArrayR = tempWidthR.split("p"); 

    //Set the current width. 
    curWidthL = parseInt(widthArrayL[0]); 
    curWidthR = parseInt(widthArrayR[0]); 
} 

//Function getPos(...) changes the width of the div while the mouse button is pressed. 
function getPos(e){ 
    if( mouseButtonPos == "down" ) { 
        //For handling events in ie vs. w3c. 
        curEvent = ((typeof event == "undefined")? e: event); 
        //Get new mouse position. 
        newX = curEvent.clientX; 

       //Calculate movement in pixels. 
       var pixelMovement = parseInt(newX - curX); 

       //Determine new width.  
       var newWidthL = parseInt(curWidthL + pixelMovement); 
       var newWidthR = parseInt(curWidthR - pixelMovement); 

       //Enforce a minimum width left.
       if (newWidthL < minWidthL) {
           newWidthR = document.getElementById("treeContainer").style.width - minWidthL;       
           newWidthL = minWidthL;
       }
       // min width right
       if (newWidthR < minWidthR) {
           newWidthL = document.getElementById("treeContainer").style.width - minWidthR;
           newWidthR = minWidthR;
       }
 
       //Set the new width. 
       document.getElementById("treeView").style.width = newWidthL + "px"; 
       document.getElementById("treeList").style.width = newWidthR + "px"; 
       //Set the new left of the splitter bar. 
       document.getElementById("splitterBar").style.left = parseInt(document.getElementById("treeView").style.width) + 5; 
    } 
} 

//--> 
</script> 

<style type="text/css"> 
body {height:100%;} 


#container {
     width: 90%;
}
#treeView{ 
    top:20px; 
    left:20px; 
    height: 150px; 
    width:250px; 
    border: 1px solid #808080; 
    overflow: hidden; 
} 


#treeList{ 
    top:0px; 
    left:20px; 
    height: 150px; 
    width:550px; 
    border: 1px solid #808080; 
    overflow: hidden; 
} 

/*status bar style to act as the bottom border of the div*/ 
#splitterBar{ 
    float: left;
    cursor: e-resize; 
    display:block; 
    background-color: #c0c0c0; 
    top:20px; 
    left:262px; 
    margin-top:0px; 
    height:152px; 
    padding:0; 
    width: 4px; 
} 
</style> 

</head> 
<!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "splitterBar" div--> 
<body onmousemove="getPos(event)" onmouseup="mouseButtonPos='up'"> 
<div id="treeContainer">
    <div id="treeView" style="float: left; height:150px; width: 250px; overflow: auto;"> 
        <p>Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br />Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br />Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br />Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br /></p> 
    </div> 
    <div onmousedown="setPos(event)" id="splitterBar"></div> 
    <div id="treeList" style="float: left; height:150px; width: 550px; overflow: auto;"> 
        <p>Dit is de rechter div die 550pixels breed is, deze kan smaller en breder worden maar niet kleiner dan 250px;</p> 
    </div>
</div> 
</body> 
</html> 


Wie wil eens kijken en zeggen wat ik fout doe? ik krijg in FF trouwens ook vaak de volgende fout:

1
2
3		Error: Error in parsing value for property 'width'.  Declaration dropped.
Source File: file:///D:/test1.html
Line: 0




Ps. Als ik een vaste breedte voor de container gebruik is er niets aan de hand. Maar zou graag willen dat alles simpel een variabele breedte kan houden..

werkende code met een vaste breedte

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126		<script type="text/javascript"> 
<!-- 
// variables
var curWidth = 0; 
var curX = 0; 
var newX = 0;
var minWidthL = 150;     // min width of left div
var minWidthR = 300;     // min width of right div
var conWidth  = 800;
var mouseButtonPos = "up"; 

//Function 'setPos(...) gets the original div width. 
function setPos(e) { 
    //For handling events in ie vs. w3c. 
    curEvent = ((typeof event == "undefined")? e: event); 
    //Sets mouse flag as down. 
    mouseButtonPos = "down"; 
    //Gets position of click. 
    curX = curEvent.clientX; 

    //Get the width of the div. 
    var tempWidthL = document.getElementById("treeView").style.width; 
    var tempWidthR = document.getElementById("treeList").style.width; 

    //Get the width value. 
    var widthArrayL = tempWidthL.split("p"); 
    var widthArrayR = tempWidthR.split("p"); 

    //Set the current width. 
    curWidthL = parseInt(widthArrayL[0]); 
    curWidthR = parseInt(widthArrayR[0]); 
} 

//Function getPos(...) changes the width of the div while the mouse button is pressed. 
function getPos(e){ 
    if( mouseButtonPos == "down" ) { 
        //For handling events in ie vs. w3c. 
        curEvent = ((typeof event == "undefined")? e: event); 
        //Get new mouse position. 
        newX = curEvent.clientX; 

       //Calculate movement in pixels. 
       var pixelMovement = parseInt(newX - curX); 

       //Determine new width.  
       var newWidthL = parseInt(curWidthL + pixelMovement); 
       var newWidthR = parseInt(curWidthR - pixelMovement); 

       //Enforce a minimum width left.
       if (newWidthL < minWidthL) {
           newWidthR = parseInt(conWidth - minWidthL);       
           newWidthL = minWidthL;
       }
       // min width right
       if (newWidthR < minWidthR) {
           newWidthL = parseInt(conWidth - minWidthR);
           newWidthR = minWidthR;
       }
 
       //Set the new width. 
       defaultStatus = "L:" + newWidthL + " R:" + newWidthR;
       document.getElementById("treeView").style.width = newWidthL + "px"; 
       document.getElementById("treeList").style.width = newWidthR + "px"; 
       //Set the new left of the splitter bar. 
       document.getElementById("splitterBar").style.left = parseInt(document.getElementById("treeView").style.width) + 5; 
    } 
} 

//--> 
</script> 

<style type="text/css"> 
body {height:100%;} 


#container {
     width: 90%;
}
#treeView{ 
    top:20px; 
    left:20px; 
    height: 150px; 
    width:250px; 
    border: 1px solid #808080; 
    overflow: hidden; 
} 


#treeList{ 
    top:0px; 
    left:20px; 
    height: 150px; 
    width:550px; 
    border: 1px solid #808080; 
    overflow: hidden; 
} 

/*status bar style to act as the bottom border of the div*/ 
#splitterBar{ 
    float: left;
    cursor: e-resize; 
    display:block; 
    background-color: #c0c0c0; 
    top:20px; 
    left:262px; 
    margin-top:0px; 
    height:152px; 
    padding:0; 
    width: 4px; 
} 
</style> 

</head> 
<!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "splitterBar" div--> 
<body onmousemove="getPos(event)" onmouseup="mouseButtonPos='up'"> 
<div id="treeContainer">
    <div id="treeView" style="float: left; height:150px; width: 250px; overflow: auto;"> 
        <p>Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br />Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br />Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br />Deze div is 250px breed en kan breder gemaakt worden, maar helaas kan de div niet kleiner worden dan 150 pixels<br /></p> 
    </div> 
    <div onmousedown="setPos(event)" id="splitterBar"></div> 
    <div id="treeList" style="float: left; height:150px; width: 550px; overflow: auto;"> 
        <p>Dit is de rechter div die 550pixels breed is, deze kan smaller en breder worden maar niet kleiner dan 250px;</p> 
    </div>
</div> 
</body> 
</html> 


[ Bericht 17% gewijzigd door Chandler op 16-05-2007 23:43:17 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  FOK!-Schrikkelbaas maandag 21 mei 2007 @ 21:31:16 #264
1972 Swetsenegger
Egocentrische Narcist
pi_49623574
Iemand een idee hoe ik met een onChange het readonly atribuut voor een form element kan triggeren?

onChange="getElementById('element').readonly='readonly'"

lijkt niet te werken in ieder geval
 | FOK! Schrikkelbaasch
pi_49623780
quote:
Op maandag 21 mei 2007 21:31 schreef Swetsenegger het volgende:
Iemand een idee hoe ik met een onChange het readonly atribuut voor een form element kan triggeren?

onChange="getElementById('element').readonly='readonly'"

lijkt niet te werken in ieder geval
readOnly (met hoofdletter O) is een boolean, dus true of false.
"If you are depressed you shouldn't be in C major!" - Rick Beato
  FOK!-Schrikkelbaas maandag 21 mei 2007 @ 21:41:47 #266
1972 Swetsenegger
Egocentrische Narcist
pi_49624019
quote:
Op maandag 21 mei 2007 21:36 schreef Litpho het volgende:

[..]

readOnly (met hoofdletter O) is een boolean, dus true of false.
Bedankt!
Maar dit werkt ook niet
1onChange="getElementById('module').readOnly='true'"

Ook niet als ik true buiten quotes zet.
 | FOK! Schrikkelbaasch
pi_49624201
true is een keyword, dus niet tussen aanhalingstekens.
edit: oh.
pi_49624344
quote:
Op maandag 21 mei 2007 21:41 schreef Swetsenegger het volgende:

[..]

Bedankt!
Maar dit werkt ook niet
[ code verwijderd ]

Ook niet als ik true buiten quotes zet.
http://www.xs4all.nl/~litpho/test.html werkt hier prima.

Weet je zeker dat de onchange getriggerd wordt?
"If you are depressed you shouldn't be in C major!" - Rick Beato
  FOK!-Schrikkelbaas maandag 21 mei 2007 @ 21:52:50 #269
1972 Swetsenegger
Egocentrische Narcist
pi_49624540
quote:
Op maandag 21 mei 2007 21:48 schreef Litpho het volgende:

[..]

http://www.xs4all.nl/~litpho/test.html werkt hier prima.

Weet je zeker dat de onchange getriggerd wordt?
Ja, ziet er naar uit dat ik het niet op een select element kan toepassen, alleen op text elementen.
 | FOK! Schrikkelbaasch
pi_49624608
quote:
Op maandag 21 mei 2007 21:52 schreef Swetsenegger het volgende:

[..]

Ja, ziet er naar uit dat ik het niet op een select element kan toepassen, alleen op text elementen.
Select heeft readOnly niet als property, maar is natuurlijk wel altijd read only. Heb je al naar disabled gekeken als alternatief?

Waarbij je er even rekening mee moet houden dat disabled elementen niet meegesubmit worden, dus bij een onsubmit evt. weer enabled moeten worden. Schoon is anders, maar misschien maakt het voor wat je wil niet uit .
"If you are depressed you shouldn't be in C major!" - Rick Beato
  FOK!-Schrikkelbaas maandag 21 mei 2007 @ 22:02:39 #271
1972 Swetsenegger
Egocentrische Narcist
pi_49624964
quote:
Op maandag 21 mei 2007 21:54 schreef Litpho het volgende:

[..]

Select heeft readOnly niet als property, maar is natuurlijk wel altijd read only. Heb je al naar disabled gekeken als alternatief?

Waarbij je er even rekening mee moet houden dat disabled elementen niet meegesubmit worden, dus bij een onsubmit evt. weer enabled moeten worden. Schoon is anders, maar misschien maakt het voor wat je wil niet uit .
die zocht ik.
Ik verwerk server side, dus de page wordt na een submit toch refreshed.
 | FOK! Schrikkelbaasch
pi_49625023
quote:
Op maandag 21 mei 2007 22:02 schreef Swetsenegger het volgende:

[..]

die zocht ik.
Ik verwerk server side, dus de page wordt na een submit toch refreshed.
* noteert weer een tevreden klant *
"If you are depressed you shouldn't be in C major!" - Rick Beato
pi_49662368
Om mijn AJAX multi-taskend te maken, zat ik er te denken aan een array vol met HTTP objecten, en één functie die alle onreadystatechanges afhandeld.

Om er voor te zorgen dat de functie httpReponse() wel weet van welk HTTP object hij werk moet afleveren, wil ik een ID meegeven. Mijn huidige code:

1http.onreadystatechange = httpReponse;


En toen liep ik vast. onreadystatechange = httpReponse(uniqueid) doet helaas niets... iemand tips?


Mijn volledige code:
1
2
3
4
5
6
7
8
9
10		var http = new Array();
function getData(url,id) {
   if (!http[id])
      http[id] = getHTTPObject();

   //prompt("Requested URL:",url);
   http[id].open("GET", url, true);
   http[id].send(null);
   http[id].onreadystatechange = httpResponse;
}


getHTTPObject geeft afhankelijk van de browser een XMLHttpRequest of een ActiveXObject terug.

[ Bericht 41% gewijzigd door Geqxon op 22-05-2007 21:28:57 ]
pi_49663192
Dat was simpel:
1   http[id].onreadystatechange = httpResponse(id);


Het enige kleine puntje is dat httpResponse slechts 1 keer aangesproken wordt, dan dat is als getData aangeroepen wordt / dus als de readystate 1 is. Als de readystate 2, 3 of 4 is gebeurd er verder weinig. Zie ik soms iets over het hoofd? :)
  dinsdag 22 mei 2007 @ 23:19:15 #275
3677 SuperRembo
Sinds 1998
pi_49668500
Eigenlijk gebeurt er alleen iets bij readystate 4, de andere readystates zijn niet zo boeiend.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies deel 5
Index

» digital corner

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')