[Javascript] voor dummies (deel 7)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  zaterdag 26 januari 2008 @ 20:28:30 #1
136730 PiRANiA
All thinking men are atheists.
pi_56325838


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:
#1 - [Javascript] voor dummies - Deel 1
#2 - [Javascript] voor dummies - Deel 2
#3 - [Javascript] voor dummies - deel 3
#4 - [Javascript] voor dummies - deel 4
#5 - [Javascript] voor dummies (deel 6)
#6 - [Javascript] voor dummies (deel 6)

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

Tutorials:
W3Schools Javascript
W3Schools AJAX

Laatste posts uit het vorige topic:
quote:
Op vrijdag 25 januari 2008 20:08 schreef ralfie het volgende:

[..]

ik kan me er wel iets bij voorstellen. Firefox is gebouwd op een soort van javascript engine en daarom ook helemaal rond dat soort objects en children en whatnot. IE heeft een eigen platform wat javascript als het ware emuleert. Wat je dan krijgt is dat dit soort basale functies in firefox heel snel gaan (want basaal) en in IE trager (want wordt geemuleerd) terwijl iets als object.innerHTML in IE direct wordt verwerkt terwijl firefox met objects.childs.counts.removes ed. moet gaan emuleren omdat netjes te verwerken.

Dat is mijn theorie althans
Deze OP: http://wiki.fok.nl/index.php/OP/Javascript
Dag Google!
  zaterdag 26 januari 2008 @ 20:35:01 #2
37634 wobbel
Da WoBBeL King
pi_56326040
aah weer een topic voor noobs zoals ik
Hosted VoIP SIP trunks Vast mobiel VoIP
  zaterdag 26 januari 2008 @ 21:38:21 #3
85514 ralfie
!Yvan eht nioj
pi_56328019
ah, shit, ik had deze moeten maken

dit is geen verkapte tvp. echt niet
pi_56328998
Die van mij wel
  zaterdag 26 januari 2008 @ 22:53:13 #5
136730 PiRANiA
All thinking men are atheists.
pi_56329817
quote:
Op zaterdag 26 januari 2008 21:38 schreef ralfie het volgende:
ah, shit, ik had deze moeten maken

dit is geen verkapte tvp. echt niet
dat klopt, deze hou ik tegoed
Dag Google!
pi_56339192
Ik ben bezig een shoutboxje te bouwen waarin ik een color-picker wil hebben. Nou heb ik een leuke colorpicker gevonden die er precies uitziet zoals ik dat wil. De zogenaamde flooble color picker. Echter is, zelfs met de code-generator, de code niet aan de praat te krijgen. Iemand een leuke andere color-picker in de aanbieding, of ziet iemand waar het probleem in zit?
pi_56339559
@Tarabass: Heb je ergens de gegenereerde code staan? Het moet toch wel te debuggen zijn?
pi_56339807
@fokME2
Dit is de origineel code

Zoals je ziet doet ie niet wat hij zou moeten doen. Ik ben al aan het proberen gegaan maar zonder resultaat.
pi_56341247
Wat een rotzooi, daar kan ik je ook niet 1 2 3 mee helpen.

Is het niet een idee om zelf een kleine colorpicker in elkaar te zetten met een beperkt aantal kleuren? En eventueel zelf aan te vullen met een kleurcode?
pi_56343783
quote:
Op zondag 27 januari 2008 15:25 schreef fokME2 het volgende:
Wat een rotzooi, daar kan ik je ook niet 1 2 3 mee helpen.

Is het niet een idee om zelf een kleine colorpicker in elkaar te zetten met een beperkt aantal kleuren? En eventueel zelf aan te vullen met een kleurcode?
Ja, ik vond het ook al een zooitje. Volgens mij is dat er expres van gemaakt om de code onbegrijpelijk te houden or whatever. Iig top dat je er even na gekeken hebt

Heb nog nooit een colorpicker gemaakt en javascript is (op dit niveau) ook nieuw voor me. Ajaxen lukt me wel, maar dit. Misschien dat iemand een leuke tut weet??, want die ik vind zijn enkel voor het grafische gedeelte ervan. In principe is het de bedoeling dat er automatisch om de geselecteerde tekst de tags '<font color=kleur>' en '</font>' komen, net zoals ik gebouwd heb bij de rest van de knoppen. Ik ga iig nog even wat rommelen en proberen
pi_56343977
Vraagje:

Ik heb 2 javascripten op mijn website gezet: een Mootools-effectje en een-Lightbox-achtig ding om mijn foto's te openen. Dat laatste werkt echter niet.

Kan het zijn dat die 2 javascripten met elkaar interfereren? En hoe los ik dit op?
pi_56344121
  • Als je ze op twee verschillende pagina's zet doen ze het wel, maar samen niet?
  • Hoe roep je ze aan?
    • pi_56344217
    De mootools beweging werkt apart, maar het andere werkt niet apart. Daar moet de fout dus ergens zitten.

    Ik heb aparte linkjes gemaakt naar scripts, die ik van andere websites heb gekopieerd. In de head-sectie van mn html staan nu 4 verwijzingen en 2 korte stukjes script.

    Ik hoop dat dit duidelijk genoeg is
    pi_56345891
    Voor mij niet iig

    Misschien moet je eens op zoek gaan naar een tutorial waarin ze de lightbox inbouwen. Hopen dat je daar je antwoord krijgt op je probleem
    pi_56346395
    TVP
    pi_56347113
    quote:
    Op zondag 27 januari 2008 19:17 schreef Tarabass het volgende:
    Voor mij niet iig

    Misschien moet je eens op zoek gaan naar een tutorial waarin ze de lightbox inbouwen. Hopen dat je daar je antwoord krijgt op je probleem
    Morgen ben ik weer op mijn studentenkamer, dan zal ik de website eens online zetten. Want voor een javascript-noob is het niet gemakkelijke dit uit te leggen
    pi_56347672
    quote:
    Op zondag 27 januari 2008 17:28 schreef Tarabass het volgende:

    [..]

    Ja, ik vond het ook al een zooitje. Volgens mij is dat er expres van gemaakt om de code onbegrijpelijk te houden or whatever.

    Nee, het is gewoon beroerde code. Niet zoals het anno 2008 zou moeten.

    Deze is wel aardig, Niet hoe ik het zou doen, maar wel vrij netjes. Met tutorial.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_56355898
    quote:
    Op zondag 27 januari 2008 20:36 schreef SuperRembo het volgende:

    [..]


    Nee, het is gewoon beroerde code. Niet zoals het anno 2008 zou moeten.

    Deze is wel aardig, Niet hoe ik het zou doen, maar wel vrij netjes. Met tutorial.
    Dat is wel duidelijk want hij doet het simpelweg niet. Thx voor de link, ga ik zo even bekijken
    pi_56371314
    quote:
    Op zondag 27 januari 2008 15:25 schreef fokME2 het volgende:
    Wat een rotzooi, daar kan ik je ook niet 1 2 3 mee helpen.

    Is het niet een idee om zelf een kleine colorpicker in elkaar te zetten met een beperkt aantal kleuren? En eventueel zelf aan te vullen met een kleurcode?
    Ik heb even wat in elkaar gebrouwen. Het doet het nu goed. Natuurlijk is feedback over de code welkom

    Ben er best trots op!

    Een ding lukt me niet. In FF hebben de td's in de colorpicker wel een border, maar in Ie krijg ik dit niet voor elkaar. Iemand een idee hoe dit toch voor elkaar te krijgen?
      dinsdag 29 januari 2008 @ 08:36:48 #20
    136730 PiRANiA
    All thinking men are atheists.
    pi_56377952
    quote:
    Op maandag 28 januari 2008 21:27 schreef Tarabass het volgende:

    [..]

    Ik heb even wat in elkaar gebrouwen. Het doet het nu goed. Natuurlijk is feedback over de code welkom

    Ben er best trots op!

    Een ding lukt me niet. In FF hebben de td's in de colorpicker wel een border, maar in Ie krijg ik dit niet voor elkaar. Iemand een idee hoe dit toch voor elkaar te krijgen?
    als-ie nou online zou zijn...
    Dag Google!
    pi_56378931
    Ik heb het test-servertje gewoon thuis draaien. Hij is online van 8 uur tot half twaalf 's avonds, dus nu zou hij bereikbaar moeten zijn
    pi_56381782
    Ik post ook maar eens een keer hier. Ik mijdt Javascript als de pest zolang het kan, vandaag toch eens aan het experimenteren geslagen. Ik heb het volgende stukje code, een functie:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13    		function CreateDynamicTable(aDiv, aRows, aCols){
        document.getElementById(aDiv).innerHTML='<table>';
        var i=1;
        var j=1;
        for(i=1;i<=aRows;i++){
            document.getElementById(aDiv).innerHTML+='\r\n<tr>';
            for(j=1;j<=aCols;j++){
                document.getElementById(aDiv).innerHTML+='\r\n<td><textarea></textarea></td>';
            }
            document.getElementById(aDiv).innerHTML+='\r\n</tr>';
        }
        document.getElementById(aDiv).innerHTML+='\r\n</table>';
    }


    Wat ik met deze functie wil doen, heel simpel uitgelegd, is door middel van 3 argumenten een tabel toevoegen aan een <div>je. CreateDynamicTable('moo', 5, 5); zou dus een tabel met 5 rijen (<tr>) en per rij 5 cellen (<td>) moeten toevoegen, aldus via schermpje 1:


    In dit schermpje geef ik dus die argumenten door, door op de knop 'Verder' te klikken wordt functie 'CreateDynamicTable' aangeroepen. Echter wat gebeurt er:


    Hij zet alle cellen met de textareas naast elkaar neer voor een of andere reden, in plaats van er netjes een tabel met 3 x 3 kolommen x rijen van te maken.

    Je zou in eerste opzicht denken dat een paar van de tags niet goed geparsed worden middels de CreateDynamicTable functie, echter als ik de functie aanpas en het volgende doe:

    1
    2
    3
    4
    5
    6
    7
    8
    9    		document.getElementById('bladie').value='<table>';
        for(i=1;i<=aRows;i++){
            document.getElementById('bladie').value+='\r\n<tr>';
            for(j=1;j<=aCols;j++){
                document.getElementById('bladie').value+='\r\n<td><textarea></textarea></td>';
            }
            document.getElementById('bladie').value+='\r\n</tr>';
        }
        document.getElementById('bladie').value+='\r\n</table>';


    Dan doet hij in <textarea> 'bladie' wel netjes het volgende er in gooien:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17    		<table>
    <tr>
    <td><textarea></textarea></td>
    <td><textarea></textarea></td>
    <td><textarea></textarea></td>
    </tr>
    <tr>
    <td><textarea></textarea></td>
    <td><textarea></textarea></td>
    <td><textarea></textarea></td>
    </tr>
    <tr>
    <td><textarea></textarea></td>
    <td><textarea></textarea></td>
    <td><textarea></textarea></td>
    </tr>
    </table>


    Kortom, die output is perfect.

    Dit zou een vrij eenvoudige functie en handeling moeten zijn, toch doe ik iets verkeerd en kijk ik er waarschijnlijk overheen. Wie o wie kan me helpen?
    pi_56383431
    Ik vind de code heel rommelig. i en j een value meegeven en in de for-loop weer. document.getElementById('bladie') kun je in een variable gooien.

    Je fout zit in het feit dat je de eerste for-loop maar 3 keer doorloopt. Deze zou je 9 keer moeten doorlopen. In die negen keer moet je kijken of het een cel of een rij wordt. Je wilt namelijk ook 9 textarea's, toch?

    Het zou zoiets moeten worden:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22    		    function CreateDynamicTable(aDiv, aRows, aCols) {
            aDiv = document.getElementById(aDiv);

            var tableCode = '';
            tableCode += '<table>';
          
            for (i = 0; i < aRows * aCols; i++) {
                if (i % aCols == 0) {
                    tableCode += '<tr>';
                }
                tableCode += '<td><textarea></textarea></td>';
                if (i % aCols == aCols - 1) {
                    tableCode += '</tr>';
                }
            }
            if (i % aCols != 0) {
                tableCode += '</tr>';
            }
            tableCode += '</table>';
          
            aDiv.innerHTML = tableCode;
        }
    pi_56383573
    quote:
    Op dinsdag 29 januari 2008 12:55 schreef Tarabass het volgende:
    Ik vind de code heel rommelig. i en j een value meegeven en in de for-loop weer. document.getElementById('bladie') kun je in een variable gooien.
    Het opruimen is voor naderhand, als het functioneel is.
    quote:
    Op dinsdag 29 januari 2008 12:55 schreef Tarabass het volgende:
    Je fout zit in het feit dat je de eerste for-loop maar 3 keer doorloopt. Deze zou je 9 keer moeten doorlopen. In die negen keer moet je kijken of het een cel of een rij wordt. Je wilt namelijk ook 9 textarea's, toch?


    Het loopen klopt hoor. In het voorbeeld hierboven waren aRows en aCols beiden 3. In loop 1 gaat de code door de rijen, en in deze loop vindt ook weer een loop plaats die het aantal cellen aanmaakt. Wat dat betreft klopt dat stukje. Het probleem zit 'm hier in het feit dat de innerHTML output raar is, terwijl als ik de output als text naar een textarea parse, deze wel 100% correct is.

    Tevens heb ik zojuist hetzelfde geprobeert met <div> jes in plaats van een <table> met daarin <tr> en <td> tags. Dit werkte wel. Alsof innerHTML me niet toelaat tabelletjes te maken. >_>
    pi_56383634
    Ik had het vermoeden dat het fout ging bij het "innerHTML+= ...". De functie een heeeel klein beetje omgebouwd en hij werkt hier nu in Opera 9, Firefox 2 en IE6.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17    		<?php
    function CreateDynamicTable(aDiv, aRows, aCols)
    {
        var     table = '<table>';
        var     i=1;
        var     j=1;
        for(    i=1;i<=aRows;i++){
                table += '\r\n<tr>';
            for(    j=1;j<=aCols;j++){
                    table +='\r\n<td><textarea></textarea></td>';
            }
                table+='\r\n</tr>';
        }
            table+='\r\n</table>';
            document.getElementById(aDiv).innerHTML=table;
    }
    ?>


    Is het niet een idee om helemaal "netjes" met docum ent.createElement() en appendChild te werken?
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [Javascript] voor dummies (deel 7)
    Index

    » digital corner

    » development

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