[Javascript] voor dummies (deel 6)

donderdag 31 mei 2007 @ 22:18:37 #1

CraZaay

prettig gestoord

De (voorlopige) OP van de [Javascript] voor dummies reeks.
Hier kan je alle vragen stellen over Javascript en alles wat er mee te maken heeft.

Heb je een probleem, post dan ook even de code waar het probleem zit

Zo kunnen we je beter proberen te helpen.

Vorige delen:
[Javascript] voor dummies - Deel 1
[Javascript] voor dummies - Deel 2
[Javascript] voor dummies - deel 3
[Javascript] voor dummies - deel 4
[Javascript] voor dummies deel 5

Handige links:
Quircksmode Javascript
Javascript Cheat Sheet
_{Mis je een link? Geef even een gil in het topic}

Tutorials:
W3Schools Javascript
W3Schools AJAX

_{Deze OP: http://wiki.fok.nl/index.php/OP/Javascript}

[ Bericht 16% gewijzigd door Godtje op 01-06-2007 19:31:41 ]

vrijdag 1 juni 2007 @ 10:25:49 #2

Chandler

Nou ik wordt er echt niet wijzer van, al dat werken met nodes, lengths etc..

Het enige wat ik wil is simpel iets uitlezen maar dat blijkt al verdomde moeilijk te zijn.

Ik heb nu de volgende functie geprobeerd, xmlDoc.getElementsByTagName('layouts') en dan zegt ie dat het een object is, maar nu weet ik niet welke values ik er uit kan halen. childNodes doet nix, length, value, count, etc?

Nu ben ik echt de weg kwijt

1
2
3

var x = xmlDoc.getElementsByTagName('gfxpoll');

alert(x);

Ook met selectNodes kom ik er niet...

1
2
3

var x = xmlDoc.selectNodes("//layouts");

alert(x.length);

alert == 0

[ Bericht 14% gewijzigd door Chandler op 01-06-2007 11:40:40 (anyone? :X) ]

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 1 juni 2007 @ 10:45:04 #3

SuperRembo

Sinds 1998

Wat een waardeloze OP

vrijdag 1 juni 2007 @ 12:05:37 #4

SuperRembo

Sinds 1998

Ik lees net dat de responseXML property in IE pas in versie 7 is toegevoegd. Ik denk dat het makkelijker is om in php de XML te lezen en om te zetten naar JSON en dat dan naar js sturen.

vrijdag 1 juni 2007 @ 13:02:32 #5

Chandler

Ik begrijp dus dat het niet mogelijk is om XML uit te lezen zonder responseXML te gebruiken in IE6 en FF?

-edit-
Ik heb dat JSON bekeken en zie dat dat eingelijk alleen voor PHP 5.0.2 is

sjeez...

[ Bericht 47% gewijzigd door Chandler op 01-06-2007 13:44:07 ]

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 1 juni 2007 @ 14:44:42 #6

fokME2

quote:
Op vrijdag 1 juni 2007 10:45 schreef SuperRembo het volgende:
Wat een waardeloze OP

Ja.

http://wiki.fok.nl/index.php/OP/Javascript !! Daar! (overigens ook in voorgaande topics te vinden..)

vrijdag 1 juni 2007 @ 16:07:11 #7

SuperRembo

Sinds 1998

quote:
Op vrijdag 1 juni 2007 13:02 schreef Chandler het volgende:
Ik begrijp dus dat het niet mogelijk is om XML uit te lezen zonder responseXML te gebruiken in IE6 en FF?

-edit-
Ik heb dat JSON bekeken en zie dat dat eingelijk alleen voor PHP 5.0.2 is sjeez...

Het kan (zeker in jouw geval) ook wel zonder JSON library.

Het enige wat je in PHP moet doen is

1
2
3
4
5
6
7
8
9
10

<gfxpoll>
    <action>layouts</action>
    <count>4</count>
    <layouts>
        <item>Default</item>
        <item>GFX</item>
        <item>Test</item>
        <item>Woei</item>
    </layouts>
</gfxpoll>

omzetten naar

1	{action:'layouts', count:4, layouts:['Default','GFX','Test','Woei']}

en dan in JS:

1	var data = eval("(" + request.responseText + ")");

(Wel even opletten met qoutjes in strings enzo)

vrijdag 1 juni 2007 @ 16:30:12 #8

Chandler

jeej... ik ga het eens inbouwen maar heb zelf gezocht op problemen met resposeXML in IE6.0 maar kon daar weinig tot niets over vinden (niet dat ik goed in zoeken ben maar goed).

Tnx Sr.

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 1 juni 2007 @ 16:33:06 #9

Litpho

quote:
Op vrijdag 1 juni 2007 13:02 schreef Chandler het volgende:
Ik heb dat JSON bekeken en zie dat dat eingelijk alleen voor PHP 5.0.2 is sjeez...

Code for parsing and generating JSON (the latter is also known as "stringifying") is available for the following languages: ActionScript, C, C++, C#, ColdFusion, Common Lisp, Delphi/Object pascal, E, Erlang, Haskell, Java, JavaScript, Lasso (programming language), Limbo, Lua, ML, Objective-C, Objective CAML, Perl, PHP, Python, Rebol, Ruby, Smalltalk and Tcl.

Zie ook JSON.

"If you are depressed you shouldn't be in C major!" - Rick Beato

vrijdag 1 juni 2007 @ 18:50:23 #10

Chandler

Klopt maar als je dan de library bekijkt zie je alleen een onderdeel voor php5.0.1 staan en ook een lb voor php 4.3.0 en hoger maar die schijnt weer extreem sloom te zijn

vet leuk

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 1 juni 2007 @ 19:20:34 #11

CraZaay

prettig gestoord

quote:
Op vrijdag 1 juni 2007 14:44 schreef fokME2 het volgende:

[..]

Ja.

http://wiki.fok.nl/index.php/OP/Javascript !! Daar! (overigens ook in voorgaande topics te vinden..)

Good for you (en SuperRembo). En in welke sticky in DIG staat daar een link naartoe?

Veel plezier ermee

vrijdag 1 juni 2007 @ 19:24:09 #12

fokME2

quote:
Op vrijdag 1 juni 2007 19:20 schreef CraZaay het volgende:

[..]

Good for you (en SuperRembo). En in welke sticky in DIG staat daar een link naartoe?

Veel plezier ermee

Stond gewoon in de OP van het vorige deel hoor?

Maar zal wel even een modje roepen dan?

vrijdag 1 juni 2007 @ 20:30:31 #13

Litpho

quote:
Op vrijdag 1 juni 2007 18:50 schreef Chandler het volgende:
Klopt maar als je dan de library bekijkt zie je alleen een onderdeel voor php5.0.1 staan en ook een lb voor php 4.3.0 en hoger maar die schijnt weer extreem sloom te zijn vet leuk

Waarom heb je daar een library voor nodig?

. Zo complex is het ook weer niet.

"If you are depressed you shouldn't be in C major!" - Rick Beato

zaterdag 2 juni 2007 @ 12:35:58 #14

splendor

...

Ik heb de volgende css code:

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

en de volgende javascript (in de head):

1
2
3

function changeSize(styleName,sizeValue) {
document.getElementById(styleName).style.fontSize = sizeValue+'px';
}

en dan heb ik een listmenu met als attribuut:

1	onchange="changeSize('example',this.value);"

En een div met id="example"

Wanneer ik dus bijvoorbeeld size 16 kies zal in de voorbeeld div metteen de tekst size 16 krijgen, werkt perfect.

Maar ik zou ook graag de link en de hover met javascript willen veranderen, hoe krijg ik dit voor elkaar?
Ik had al bedacht om gewoon een <a style="" te gebruiken maar in een style kun je geen hover apart aangeven, dus ik ben verplicht met javascript de a.example:hover aan te passen, maar hoe kom ik hierbij?

Iemand een idee?

-

zaterdag 2 juni 2007 @ 16:58:36 #15

Chandler

example a:hover? example a?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 2 juni 2007 @ 17:19:15 #16

CraZaay

prettig gestoord

In je link-definities (a, a:hover) geen grootte opnemen, die erven ze namelijk gewoon.

maandag 4 juni 2007 @ 11:41:11 #17

Chandler

Klein vraagje.

Ik heb een array in javascript

arr[item[1]] = true
arr[item[3]] = true

Hoe kan ik deze items uitlezen? iig niet met een loop waarbij ik de positie probeer aan te spreken, zocht op een foreach maar kon daar ook niets over vinden.. anyone?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 4 juni 2007 @ 11:56:43 #18

Litpho

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

Kan je hier iets mee?

"If you are depressed you shouldn't be in C major!" - Rick Beato

maandag 4 juni 2007 @ 12:11:49 #19

Chandler

item[1] = leeg, dit is het ID van een TD

als ik nu selected (arr) .length doe krijg ik alsnog 0.

voorbeeld

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

Nu sla ik deze ID van de item op om een item als geselecteerd te zetten.

1	selected[id.id] = true

maar nu wil ik bv meerdere items uit selected halen, maar krijg ze niet op het scherm

1
2
3
4
5
6
7
8
9
10

function getSelected()
{
    var str = "";

    for (x in selected)
    {
        str += x + "=" + selected[x] + " -- ";
    }
    alert(selected.length);
}

Uitkomst: 0;

What am i doing wrong?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 4 juni 2007 @ 12:30:48 #20

Litpho

Om de een of andere reden pakt hij length niet correct op. Aangezien je toch door alle elementen heen loopt met de for/in constructie is het eenvoudig genoeg om dat zelf te tellen als je wil, maar het zou wel handig zijn.

http://www.xs4all.nl/~litpho/chandlertest.html

"If you are depressed you shouldn't be in C major!" - Rick Beato

maandag 4 juni 2007 @ 13:10:11 #21

Chandler

Je hebt gelijk Litpho, best raar idd dat ie .length niet pakt...

Nu het volgende, iets anders

Voor het scriptje wil ik nu ook de rechtermuisknop gaan benutten. Echter als ik onmousedown gebruik en gewoon een linker klik doe wordt deze 2x gelezen (door onClick en onmousedown) hoe kan ik voorkomen dat de functie 2x aangeroepen wordt?

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

13:17 4-6-2007<style>
.item {
    background-color: gray;
    color: black;
}

.item_hover {
    background-color: blue;
    color: yellow;
}

.item_hover {
    background-color: red;
    color: yellow;
}
</style>

<script language="javascript">
var selectedItems;
var selected = new Array();

function Mover(id, event, inout)
{
    // catch mouse buttons
    var mouseButton = false;

    if (event.which == null)
    {
       /* IE case */
       mouseButton = (event.button < 2) ? "left" : ((event.button == 4) ? "middle" :"right");
    }
    else
    {
       /* All others */
       mouseButton = (event.which < 2) ? "left" : ((event.which == 2) ? "middle" : "right");
    }

    // mouseaction?
    if (mouseButton != false && inout == -1)
    {
        tStats("mousebutton found");

        if (mouseButton == "left")
        {
            tStats("left mousebutton");
            // select or deselect item
            if (selected[id.id])
            {
                // verwijder selected[id];
                delete selected[id.id];
            }
            else
            {
                selected[id.id] = id.id
            }
        }
        else
        {
            // menu
            alert("menu on item " + id.id);
        }

        dont(event);

    }

    if (inout == 0)
    {
        if (!selected[id.id])
        {
            id.className = "item";
        }
        else
        {
            id.className = "item_selected";
        }
    }
    else if (inout == -1)
    {
        tStats("-1");
    }
    else
    {
        id.className = "item_hover";
    }
    mouseButton = false;

}

function dont(event)
{
    if (event.preventDefault)
        event.preventDefault();
    else
        event.returnValue= false;
     return false;
}

function tStats(x)
{
    y = document.getElementById('stats');

    z = x +  '<br />'  + y.innerHTML;
    y.innerHTML = z;
}

function getSelected()
{
    var str = "";
    var cnt = 0;

    for (x in selected)
    {
        str += "Selected option: " + selected[x] + " -- n";
        cnt++;
    }
    alert(cnt + "n" + str);
}

</script>

<table>
<tr>
    <th>Cell 1</th>
    <th>Cell 2</th>
    <th>Cell 3</th>
    <th>Cell 4</th>
    <th>Cell 5</th>
</tr>
<tr id="item[1]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
</tr>
<tr id="item[2]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
</tr>
<tr id="item[3]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
</tr>
<tr id="item[4]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
    <td>Row 4</td>
</tr>
<tr id="item[5]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
</tr>
<tr id="item[6]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
</tr>
<tr id="item[7]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
    <td>Row 7</td>
</tr>
<tr id="item[8]" onmouseover="Mover(this, event, 1)" onmousedown="Mover(this,event,-1)" onmouseout="Mover(this, event, 0)" onclick="Mover(this, event, -1)" ondblclick="Mover(this, event, -1)" oncontextmenu="Mover(this, event, -1)" class="item">
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
</tr>
</table>

<input type="button" onClick="getSelected()" value="Selected items"> <input type="button" onClick="document.getElementById('stats').innerHTML = ''" value="Clear pre">

<pre id="stats" name="stats"  style="width: 400px; height: 250px; overflow: auto;">Hello</pre>

als ik nu onmousedown verwijder werkt de rechtermuisknop niet. Heeft iemand een suggestie?

[ Bericht 99% gewijzigd door Chandler op 04-06-2007 13:19:41 ]

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 7 juni 2007 @ 15:56:23 #22

Chandler

Kleine andere vraag.

Stel ik heb een element een andere className gegeven (this.className = 'nieuweclass') hoe kan ik deze nieuwe class dan resetten? oftewel de oude class terug halen? zonder een andere class te gebruiken?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 7 juni 2007 @ 16:01:20 #23

Litpho

quote:
Op donderdag 7 juni 2007 15:56 schreef Chandler het volgende:
Kleine andere vraag.

Stel ik heb een element een andere className gegeven (this.className = 'nieuweclass') hoe kan ik deze nieuwe class dan resetten? oftewel de oude class terug halen? zonder een andere class te gebruiken?

Tussendoor ergens in een variabele opslaan of de pagina herladen.

"If you are depressed you shouldn't be in C major!" - Rick Beato

donderdag 7 juni 2007 @ 16:07:17 #24

Chandler

Je moet het zien als.

Ik heb een TD daar staat een standaard class op

td { font-size: 100px }

nu heb ik ook een class

td .small { font-size: 12px; }

als ik nu met een onmouseover="this.className='small'" zet wil ik met onmouseout de class resetten naar de huidige class (td). How do i do this?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 7 juni 2007 @ 16:08:46 #25

Litpho

quote:
Op donderdag 7 juni 2007 16:07 schreef Chandler het volgende:
Je moet het zien als.

Ik heb een TD daar staat een standaard class op

td { font-size: 100px }

nu heb ik ook een class

td .small { font-size: 12px; }

als ik nu met een onmouseover="this.className='small'" zet wil ik met onmouseout de class resetten naar de huidige class (td). How do i do this?

De huidige class is niet td, de huidige class is leeg met element td. Dus als je className leeg maakt, dan gebruikt hij de 100px rule weer, dat is dan de meest passende.

"If you are depressed you shouldn't be in C major!" - Rick Beato

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

» digital corner

» digital corner