[Javascript] voor dummies (deel 6)

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