[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? |
pi_49669190
In mijn programma al helemaal niet, mijn probleem is dus dat de functie httpResponse op deze manier alleen aan wordt gesproken zodra de gebruiker op de link klikt. Zodra de readystate op 4 schiet, dan wordt de functie niet autmotisch door de onreadystatechange aangeroepen. Wat hij normaal dus prima doet

Het script werkt verder prima als ik mijn responsefunctie een paar tellen later handmatig aanroep, maar dat is een beetje non-AJAX
  dinsdag 22 mei 2007 @ 23:47:26 #277
3677 SuperRembo
Sinds 1998
pi_49669517
Hoe ziet httpResponse er uit?
Ik zou trouwens eerst de onreadystatechange zetten, en daarna pas de request versturen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_49669681
De onreadystatechange heb ik van plaatst verwisseld, al maakte dat niet veel uit. Maar bedankt voor de tip, staat wel weer wat netter.

httpResponse:

1
2
3
4
5		function httpResponse(id) {
   alert('You rang? ' + http[id].readyState);
   
   if (http[id].readyState == 4) {   
      if (http[id].responseXML){   


Wanneer ik deze handmatig (dmv. een button) aanspreek, voert hij zijn werkt verder prima uit. Het zit hem denk ik in de .onreadystatechange = ...
pi_49669797
Met dank aan Google een ietwat ranzige oplossing:

1http[id].onreadystatechange = function () { httpResponse(id) }


Het werkt!
  dinsdag 22 mei 2007 @ 23:59:48 #280
3677 SuperRembo
Sinds 1998
pi_49669958
onreadystatechange heeft geen parameters, dus id in httpResponse is altijd null.
Iets als dit werkt waarschijnlijk beter:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		var http = new Array();
var http = new Array();
function getData(url, id) {
   if (!http[id]) {
        http[id] = getHTTPObject();
   } 
   var request = http[id];
   request.open("GET", url, true);
   request.onreadystatechange = function() {
     if (request.readyState == 4) {
          processResponse(request.respnseXML);
     }
   }
   request.send(null);
}
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_49670775
Elke keer als de readystate veranderd, roept hij de functie "httpResponse(id)" aan, waarbij "id" in dit geval ingevuld wordt doordat ik die meegeef in het "getData(url, id)" gedeelte. Dus als voorbeeld: "httpResponse(11433)". Werkt voor nu prima, en dat is voor mij persoonlijk prima

Ik moet je toegeven, de manier waar jij het op doet is inderdaad netter.
pi_49726440
Kan je met javascript ook de flashvars van een embeded flash aanpassen?
heb gegoogled maar kwam er niet echt uit, enige oplossing leek op een zweedse site te staan, en nu is mn zweeds niet zo goed.
  donderdag 24 mei 2007 @ 16:23:04 #283
12880 CraZaay
prettig gestoord
pi_49729680
In principe kun je hun waarde in de DOM aanpassen, maar ik betwijfel of Flash hier realtime iets mee doet en of het uberhaupt doet wat je verwacht
pi_49900908
Ik wil een lijst met namen (elk hun eigen div) van plaats laten verwisselen.
Dus bijvoorbeeld:

Persoon 1
Persoon 2 ^
Persoon 3 ^
Persoon 4 ^

Zodra ik dan bij persoon 2 op ^ druk moet ie omwisselen met persoon 1 en wordt de lijst

Persoon 2
Persoon 1 ^
Persoon 3 ^
Persoon 4 ^


Hoe kan ik dit makkelijk en snel oplossen in javascript? Ik heb van alles gezocht maar het enige wat in de buurt komt is drag en drop maar daar hangt een heel script achter dat je cursor positie leest en dat lijkt me overdreven.
Hoe kan dit snel, makkelijk en efficient?
-
pi_49902606
Drag en drop heb je niet nodig en wordt veel te ingewikkeld. Je kan moeilijk gaan lopen doen met het Document Object Model, maar het kan veel simpeler met innerHTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<script type="text/javascript">

function verwissel (i1, i2) {
   var obj1 = document.getElementById(i1);
   var obj2 = document.getElementById(i2);
   
   var temp = obj1.innerHTML;
   obj1.innerHTML = obj2.innerHTML;
   obj2.innerHTML = temp;
   
}

</script>


<span id="item1">Persoon 1</span>
<a href="#" onclick="verwissel('item1', 'item2'); return false;">down</a><br />

<span id="item2">Persoon 2</span>
<a href="#" onclick="verwissel('item2', 'item1'); return false;">up</a>
<a href="#" onclick="verwissel('item2', 'item3'); return false;">down</a><br />

<span id="item3">Persoon 3</span>
<a href="#" onclick="verwissel('item2', 'item3'); return false;">up</a><br />
pi_49902836
Dankje. dat was precies wat ik zocht ja. Ik was zelf al met DOMs aan het proberen maar dat lukte echt niet.
Maar als ik het goed begrijp wisselt innerHTML dus de span + inhoud om met een andere span+inhoud?
-
  dinsdag 29 mei 2007 @ 20:36:34 #287
3677 SuperRembo
Sinds 1998
pi_49902854
Het kan ook simpel met DOM functies:

1
2
3
4
5
6
7		window.onload = function() 
{
   var list1 = document.getElementById('l1');
   var item2 = document.getElementById('i2');
   var item3 = document.getElementById('i3');
   list1.insertBefore(item3, item2);
}


1
2
3
4
5
6		<ul id="l1">
   <li id="i1">uno</li>
   <li id="i2">due</li>
   <li id="i3">tre</li>
   <li id="i4">quattro</li>
</ul>
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas dinsdag 29 mei 2007 @ 20:40:07 #288
1972 Swetsenegger
Egocentrische Narcist
pi_49903015
bestaat er een javascript equivalent voor stristr?
 | FOK! Schrikkelbaasch
  dinsdag 29 mei 2007 @ 20:47:14 #289
3677 SuperRembo
Sinds 1998
pi_49903302
Als je case-insensitive wil zoeken in javascript dan akn dat met een regexp: myString.match(/foo/i)

(of zonder regexp: myString.toLowerCase().indexOf('foo'))
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas dinsdag 29 mei 2007 @ 21:02:52 #290
1972 Swetsenegger
Egocentrische Narcist
pi_49903923
quote:
Op dinsdag 29 mei 2007 20:47 schreef SuperRembo het volgende:
Als je case-insensitive wil zoeken in javascript dan akn dat met een regexp: myString.match(/foo/i)

(of zonder regexp: myString.toLowerCase().indexOf('foo'))
Bedankt!
 | FOK! Schrikkelbaasch
pi_49965686
Ik heb een klein vraagje, met AJAX lees in een document uit (XML) nu wil ik deze XML uitlezen in Javascript en daarmee een select (options) vullen.

Nu probeerde ik zo (lokaal) een stukje XML in te laden.

1
2		var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.xml = xmlhttp.responseText; 


Nu krijg ik een error op de 1e regel in IE en FF, werkt dit lokaal niet? of doe ik wat fout? alles wordt in een functie aangeroepen!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 31 mei 2007 @ 15:43:10 #292
12880 CraZaay
prettig gestoord
pi_49967190
In FF (of iedere browser behalve IE 5+) gaat deze Microsoft-implementatie sowieso niet werken. Waarom gebruik je niet gewoon een JS library ofzo om dit af te vangen, ipv het wiel opnieuw uit te vinden?
pi_49967960
Ik heb gezocht naar zo'n stukje maar kon dit helaas niet vinden is er dan een oplossing dat ik wel XML documenten kan lezen in zowel IE als FF en kan bewerken oftewel uit een XML een option list kan vullen?

Het laden is mij nu gelukt, maar kan helaas niets vinden over hoe ik XML omzet naar een select list.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		            if (window.ActiveXObject)
            {  
                xmlDoc       = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = false;
             xmlDoc.loadXML(xmlhttp.responseText); 
            }
            else if (document.implementation && document.implementation.createDocument)
            {
                var parser = new DOMParser();
                var xmlDoc = parser.parseFromString(xmlhttp.responseText,"text/xml");
            }
            else
            {
                alert('Neem een andere brouwser!');
            }


Werkt in IE en FF

Tevens wil ik dus de volgende list uitlezen

1
2
3
4
5
6
7
8
9
10
11		<?xml version="1.0" encoding="ISO-8859-1" ?> 
<gfxpoll>
    <action>layouts</action>
    <count>4</count>
    <layouts>
        <item>Default</item>
        <item>GFX</item>
        <item>Test</item>
        <item>Woei</item>
    </layouts>
</gfxpoll>


[ Bericht 82% gewijzigd door Chandler op 31-05-2007 16:34:39 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_49970117
Je moet even zoeken op javascript xml reader, dan kan je zien hoe je met javascript xml afloopt. Het is dan een koud kunstje om te zorgen dat je tijdens het aflopen een select list opbouwt.
pi_49974288
Waarom gebruik je niet gewoon XMLHttpRequest.responseXML?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_49976558
Met ajax moet je inderdaad niet het wiel opnieuw gaan uitvinden. Gebruik een javascript library of framework, zoals bijv Dojo of de Yahoo User Interface library of een andere eventueel (ik heb alleen ervaring met deze twee).

Doe dat echt! Dat scheelt zo ontzettend veel tijd en frustratie! Het is bijna niet meer te doen om zelf alles uit te zoeken op dit gebied, tenzij je hardcore masochist bent.
pi_49977158
Het wiel opnieuw uitvinden? Een XML pagina opvragen en parsen stelt toch weinig voor?
pi_49977572
quote:
Op donderdag 31 mei 2007 19:08 schreef SuperRembo het volgende:
Waarom gebruik je niet gewoon XMLHttpRequest.responseXML?
Die zocht ik dus

Maar hoe kan ik dan de nodes etc verder uitlezen?

Wil gewoon <action>*</action> uitlezen plus <layouts>(<item>*</item>)</layouts> that's all..
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_49978258
met *.childNodes *.parentChild *.nextSibling enzo.
pi_49978284
quote:
Op donderdag 31 mei 2007 20:32 schreef Geqxon het volgende:
Het wiel opnieuw uitvinden? Een XML pagina opvragen en parsen stelt toch weinig voor?
Ik weet niet hoe lang jij al bezig bent met ajax maar het behelst heel wat meer dan alleen een xml pagina parsen hoor...
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies deel 5
Index

» digital corner

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