[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

donderdag 7 juni 2007 @ 16:11:52 #26

Chandler

ok, i'll try.

En het werkte gewoon dus

heerlijk this.className = '' (reset)

[ Bericht 87% gewijzigd door Chandler op 07-06-2007 16:25:19 ]

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

zondag 10 juni 2007 @ 22:57:04 #27

Geqxon

Mijn pagina heeft een lege img, die ik om de zeven seconden met de volgende truuk vul:

1	scrollerimage.src = images[number];

...waarbij images[number] een relatief URL bevat. De eerste keer dat ik dit aanroep gaat het prima, het plaatje laad, met het juiste formaat. Als ik voor de tweede keer het plaatje laad, gaat dit ook goed, echter neemt hij het formaat van het eerste plaatje aan.

Ik heb zitten te klooien met een compleet leegmaken van het image, de width en height null te geven, en desnoods een nieuwe Image-object aan te maken. Allemaal gefaalde oplossingen, dus ik vroeg mij af of iemand tips voor mij heeft?

En nee, de div waar het plaatje in zit leegmaken en via innerHTML weer vullen met "<img id="scrollerimage">" vind ik ietwat ranzig :P

maandag 11 juni 2007 @ 09:13:52 #28

CraZaay

prettig gestoord

Dat laatste is inderdaad ranzig, goed dat je dat niet ziet zitten

Ik weet eigenlijk niet of dit standaard browsergedrag is. Heb je er last van in meerdere browsers? Wat sowieso zou moeten werken is het expliciet zetten van de width en height d.m.v. CSS, maar je zou denken dat het gewoon zou moeten werken op de door jou genoemde manier.

Zal vanavond eens een testcase maken

maandag 11 juni 2007 @ 09:19:53 #29

Geqxon

Ik moet bekennen dat ik het enkel in Safari getest heb, maar ook als het in Firefox wel zou werken, ik ga liever geen grote doelgroep afsnijden.

De width en height instellen gaat tricky worden, aangezien elk plaatje een andere grote heeft, en ik geen flauw idee heb hoe groot of klein het plaatje is.

Hier heb ik een testcase gemaakt, en daar werkt wel alles naar toebehoren. Zeer vreemd gedrag

maandag 11 juni 2007 @ 14:07:00 #30

CraZaay

prettig gestoord

Werkt iig naar behoren in Firefox op de PC en Mac, IE7 en Safari. In de site waar het mis gaat is er geen CSS style die de afmetingen aanpast ofzo?

maandag 11 juni 2007 @ 14:19:37 #31

Geqxon

Dan schuif ik de fout toch naar mijn eigen website. Op het moment kan ik er niet aan werken, maar ik hou je deze avond op de hoogte

dinsdag 12 juni 2007 @ 20:45:09 #32

Geqxon

quote:
Op maandag 11 juni 2007 14:19 schreef Geqxon het volgende:
Dan schuif ik de fout toch naar mijn eigen website. Op het moment kan ik er niet aan werken, maar ik hou je deze avond op de hoogte

Iets later. Vreemd, alles werkt weer. Maar dit snap ik dan weer niet:

En dat snap ik weer niet....

[ Bericht 43% gewijzigd door Geqxon op 12-06-2007 20:54:18 ]

woensdag 20 juni 2007 @ 09:27:16 #33

Chandler

Ik heb voor het eerst zelf een tabel in javascript kunnen gereneren! _O_

maar nu zit ik met een probleem. Ik wil eingelijk ook een tbody, tfoot en thead toevoegen.. echter krijg ik het niet voor elkaar..

Het huidige werkende script

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

<div id="test">

</div>

<script language="javascript">

function addCell(tableRow, pos, text, width)
{
    var tableCell             = tableRow.insertCell(pos);
        tableCell.innerHTML   = text ;
        tableCell.style.width = width;

}

table = document.createElement("Table");

for (x = 0; x < 10; x++)
{
    var tableRow = table.insertRow(x);

    addCell(tableRow, 0, x + "&1", "100px");
    addCell(tableRow, 1, x + "&2", "200px");
    addCell(tableRow, 2, x + "&3", "50px");
    addCell(tableRow, 3, x + "&4", "200px");

/*
    for (y = 0; y < 5; y++)
    {
        var tableCell = tableRow.insertCell(y);
            tableCell.innerHTML = x +'hello'+y ;

    }
*/
}

document.getElementById('test').appendChild(table);
alert('klik hier en de tabel verdwijnt!');
document.getElementById('test').innerHTML = '';

</script>

Wie weet hoe ik een element kan toevoegen? want table.createElement("Tbody"); werkt niet en zie / kon geen andere oplossing vinden...

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

woensdag 20 juni 2007 @ 09:57:42 #34

Litpho

table.createTFoot() en table.createTHead()

en uiteraard
var tbody = document.createElement("tbody");
table.appendChild(tbody);

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

woensdag 20 juni 2007 @ 10:28:46 #35

Chandler

Ik heb je code even overgenomen, maar krijg een thead niet voor elkaar...

tbody is trouwens gelukt!

1
2
3
4

var thead = table.createTHead();
var theadRow = thead.insertRow(0);
var theadHeader = thead.createElement("th");
theadHeader.innerHTML = 'Header';

Bovenstaande code werkt niet. Ook insertCell geeft een fout. Wil gewoon een TH toevoegen aan de thead en daarin een stuk tekst plaatsen

volgende code werkt!

1 2	var tbody = document.createElement("tbody"); table.appendChild(tbody);

Tevens zou ik graag weten hoe ik een ID waarde kan plaatsen aan een TR of TD oid...

[ Bericht 8% gewijzigd door Chandler op 20-06-2007 11:10:40 ]

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

woensdag 20 juni 2007 @ 10:33:38 #36

Litpho

quote:
Op woensdag 20 juni 2007 10:28 schreef Chandler het volgende:
Ik heb je code even overgenomen, maar krijg een thead niet voor elkaar... tbody is trouwens gelukt!
[ code verwijderd ]

Bovenstaande code werkt niet. Ook insertCell geeft een fout. Wil gewoon een TH toevoegen aan de thead en daarin een stuk tekst plaatsen

1
2
3
4
5

var thead = table.createTHead();
var theadRow  = thead.insertRow(0);
var theadHeader = document.createElement("th");
    theadHeader.innerHTML = 'Header';
   theadRow.appendChild(theadHeader);

createElement is geen methode van HTMLTableRowElement en HTMLTableRowElement.insertCell levert alleen <TD> elementen op

.

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

woensdag 20 juni 2007 @ 13:02:31 #37

Chandler

Inderdaad Litpho, klopt helemaal. Had het net ook even doorgelezen

Nu even iets anders, iets waar denk ik wel meerdere gebruikers mee zouden kunnen zitten.

Ik heb dus een scriptje met een tabel, deze tabel heeft een mouseover en een onclick om een row te selecteren, echter wil ik met een double click deze regel bewerken.

Nu is het probleem dat doubleclick niet functioneerd omdat eerst de onclick aangeroepen wordt.

Is er een manier om doubleclick en de enkele click af te vangen, zodat je tijd hebt om een dubbele klik te doen ipv gelijk de onclick aan te roepen? als je begrijpt wat ik bedoel!?

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

woensdag 20 juni 2007 @ 13:19:21 #38

SuperRembo

Sinds 1998

Quirksmode.org:

quote:
The dblclick event is rarely used. Even when you use it, you should be sure never to register both an onclick and an ondblclick event handler on the same HTML element. Finding out what the user has actually done is nearly impossible if you register both.

Ik zou een andere oplossing zoeken. Een edit knopje is toch ook veel duidelijker?

woensdag 20 juni 2007 @ 13:20:46 #39

Chandler

Klopt.

Dan ga ik maar linker en rechtermuisknop misbruiken

Tevens kom ik iets merkwaardigs tegen in IE 6.

1
2
3
4

        tableRow.oncontextmenu = eval("function() { alert('menu for: ' + this.id);  }");
        tableRow.onclick       = eval("function() { alert('select'); }");
        tableRow.onmouseover   = eval("function() { this.className='item_hover'; }");
        tableRow.onmouseout    = eval("function() { this.className=''; }");

dit werkt perfect in Firefox maar niet in IE?! en ijk snap niet waarom!

[ Bericht 40% gewijzigd door Chandler op 20-06-2007 13:31:57 ]

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

woensdag 20 juni 2007 @ 17:30:00 #40

super-muffin

1
2
3

span = document.createElement('span');
span_text = document.createTextNode(' & gt;& gt; ' + title);
span.appendChild(span_text);

Waarom krijg ik dan ook letterlijk '& gt;' te zien en geen >?

(ik heb er even '& gt;' van gemaakt met spatie, anders maakt Fok! er > van

)

Steam - SC2

woensdag 20 juni 2007 @ 17:36:50 #41

RM-rf

1/998001

createtextNode creeert een textnode en die kan geen HTMLcode bevatten maar enkel normale text ...

om die grond wordt dat stukje Text ook geparsed naar de HTML-code '&gt;'

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

woensdag 20 juni 2007 @ 18:57:13 #42

super-muffin

Aha, gewoon >> neer zetten dus

(Had ik zelf ook kunnen zien door de generated source te bekijken btw.)

Steam - SC2

woensdag 20 juni 2007 @ 19:15:26 #43

SuperRembo

Sinds 1998

quote:
Op woensdag 20 juni 2007 17:36 schreef RM-rf het volgende:
createTextNode creeert een textnode

He, wat zitten die rot-browsers toch onlogisch in elkaar

woensdag 20 juni 2007 @ 19:46:28 #44

super-muffin

Inderdaad, dat stuk snapte ik ook niet echt.

Steam - SC2

woensdag 20 juni 2007 @ 22:32:46 #45

Chandler

Snapt iemand waarom ik geen EVAL kan gebruiken in IE in de vorige post van mij? ik heb gezocht maar kan het echt niet vinden

in FireFox werkt het gewoon.

IE meld trouwens dat het niet geimplementeerd is oid..

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

donderdag 21 juni 2007 @ 01:03:36 #46

Geqxon

Is een setTimeOut niet wat voor je? Kan basicly hetzelfde als je de timer op 0 zet...

donderdag 21 juni 2007 @ 08:41:14 #47

Chandler

ik ben er zelf achtergekomen!

komt omdat me vrienden hier niet reageren

ik had helemaal geen eval nodig, een functie kun je dus gewoon plaatsen aan een onclick ed zonder eval!

Tnx Geqxon voor je antwoorden

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

donderdag 21 juni 2007 @ 10:57:01 #48

Geqxon

Dat kan inderdaad ook

donderdag 21 juni 2007 @ 11:59:54 #49

Chandler

Wil iemand wat voor mij checken, want als scripter kijk je vaak over foutjes heen.

Omschrijving
CHMOD Calculator die ook in te stellen is met CHMOD code zelf (666 etc)

Waarom gemaakt?
omdat veel online versies niet directe input ondersteunden, oftewel invoer van 555, 666, 777 ipv checken van checkboxjes

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

<table>
<tr>
    <td colspan=5>Rechten caculator gemaakt door Eric!</td>
</tr>
<tr>
    <td>Rechten</td>
    <td>Eigenaar</td>
    <td>Groep</td>
    <td>Anders</td>
    <td> </td>
</tr>
<tr>
    <td>Lezen</td>
    <td><input type="checkbox" id="owner_read" onClick="calculate(this, 4);"></td>
    <td><input type="checkbox" id="group_read" onClick="calculate(this, 4);"></td>
    <td><input type="checkbox" id="other_read" onClick="calculate(this, 4);"></td>
    <td> </td>
</tr>
<tr>
    <td>Schrijven</td>
    <td><input type="checkbox" id="owner_write" onClick="calculate(this, 2);"></td>
    <td><input type="checkbox" id="group_write" onClick="calculate(this, 2);"></td>
    <td><input type="checkbox" id="other_write" onClick="calculate(this, 2);"></td>
    <td> </td>
</tr>
<tr>
    <td>Uitvoeren</td>
    <td><input type="checkbox" id="owner_exec" onClick="calculate(this, 1);"></td>
    <td><input type="checkbox" id="group_exec" onClick="calculate(this, 1);"></td>
    <td><input type="checkbox" id="other_exec" onClick="calculate(this, 1);"></td>
    <td> </td>
</tr>
<tr>
    <td>Nummeriek</td>
    <td><input type="text" id="num_owner_total" style="width: 15px;" disabled></td>
    <td><input type="text" id="num_group_total" style="width: 15px;" disabled></td>
    <td><input type="text" id="num_other_total" style="width: 15px;" disabled></td>
    <td>= <input type="text" name="chmod_oct" id="chmod_oct" style="width: 75px;" onKeyUp="setRights(this.value);"></td>
</tr>
<tr>
    <td>Symbolisch</td>
    <td><input type="text" id="sym_owner_total" style="width: 35px;" disabled></td>
    <td><input type="text" id="sym_group_total" style="width: 35px;" disabled></td>
    <td><input type="text" id="sym_other_total" style="width: 35px;" disabled></td>
    <td>= <input type="text" name="chmod_sym" id="chmod_sym" style="width: 75px;" disabled></td>
</tr>
</table>

<script language="javascript">
var owner = 0;
var group = 0;
var other = 0;

function calculate(id, num)
{
    var opt = document.getElementById(id.id);

    if (opt.checked == true)
    {
        switch (opt.id.substr(0, 5))
        {
            case "owner":
                owner = owner + num;
            break;

            case "group":
                group = group + num;
            break;

            case "other":
                other = other + num;
            break;
        }
    }
    else
    {
        switch (opt.id.substr(0, 5))
        {
            case "owner":
                owner = owner - num;
            break;

            case "group":
                group = group - num;
            break;

            case "other":
                other = other - num;
            break;
        }
    }

    displayNumbers(owner, group, other);

}
function setRights(inn)
{
    if (parseFloat(inn.substr(0, 1)) > 7 || parseFloat(inn.substr(1, 1)) > 7 || parseFloat(inn.substr(2, 1)) > 7 )
    {
         alert("Alle nummers moeten 7 of lager zijn!");
    }
    else if (inn.length > 3)
    {
         alert("Het nummer mag niet meer dan 3 cijfers bevatten");
    }

    if (inn.substr(0, 1)) { owner = parseFloat(inn.substr(0, 1)); } else { owner = 0; }
    if (inn.substr(1, 1)) { group = parseFloat(inn.substr(1, 1)); } else { group = 0; }
    if (inn.substr(2, 1)) { other = parseFloat(inn.substr(2, 1)); } else { other = 0; }


    if (owner & 4) { document.getElementById('owner_read').checked  = true; } else { document.getElementById('owner_read').checked  = false; }
    if (owner & 2) { document.getElementById('owner_write').checked = true; } else { document.getElementById('owner_write').checked = false; }
    if (owner & 1) { document.getElementById('owner_exec').checked  = true; } else { document.getElementById('owner_exec').checked  = false; }

    if (group & 4) { document.getElementById('group_read').checked  = true; } else { document.getElementById('group_read').checked  = false; }
    if (group & 2) { document.getElementById('group_write').checked = true; } else { document.getElementById('group_write').checked = false; }
    if (group & 1) { document.getElementById('group_exec').checked  = true; } else { document.getElementById('group_exec').checked  = false; }

    if (other & 4) { document.getElementById('other_read').checked  = true; } else { document.getElementById('other_read').checked  = false; }
    if (other & 2) { document.getElementById('other_write').checked = true; } else { document.getElementById('other_write').checked = false; }
    if (other & 1) { document.getElementById('other_exec').checked  = true; } else { document.getElementById('other_exec').checked  = false; }

    displayNumbers(owner, group, other);

}

function displayNumbers(owner, group, other)
{
    // nummeric
    document.getElementById('chmod_oct').value = owner + "" + (group > 0 ? group : "") + "" + (other > 0 ? other : "");

    document.getElementById('num_owner_total').value = owner;
    document.getElementById('num_group_total').value = group;
    document.getElementById('num_other_total').value = other;

    // symbolic

    document.getElementById('sym_owner_total').value = convertToSym(owner);
    document.getElementById('sym_group_total').value = convertToSym(group);
    document.getElementById('sym_other_total').value = convertToSym(other);

    document.getElementById("chmod_sym").value = "-" + convertToSym(owner) + convertToSym(group) + convertToSym(other);

}

function convertToSym(num)
{
    var out = "";

    if (num & 4) { out += "r"; } else { out += "-"; }
    if (num & 2) { out += "w"; } else { out += "-"; }
    if (num & 1) { out += "x"; } else { out += "-"; }

    return out;
}

setRights('666');
</script>

misschien kan het korter, dat zou ik graag willen horen!

-edit- kleine bug verholpen.

[ Bericht 3% gewijzigd door Chandler op 21-06-2007 12:06:17 ]

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

donderdag 21 juni 2007 @ 12:42:00 #50

CraZaay

prettig gestoord

Eenmalig document.getElementById doen voor al die elementen, en dan de referenties hiernaar in een variabele buiten de functie opslaan (en die vervolgens gebruiken). Beetje onnodige belasting om de browser iedere keer de DOM te laten doorzoeken naar hetzelfde element, terwijl 1 keer genoeg is

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

» digital corner

» digital corner