tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
1319
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 21.12.06 20:42 #1
    versuch13 versuch13 ist offline Mitglied Brilliant
    Registriert seit
    Feb 2005
    Beiträge
    950
    Hi, ich will mich etwas mehr mit JavaScript beschäftigen, richtig tief in die Materie gehen, OOP etc.. (dazu hätte ich direkt auch gerne noch einen Tipp für richtig gute Lektüre, es soll auf jeden Fall sehr ausführlich sein, am besten alles ansprechen was JavaScript zu bieten hat, und das in einem guten Programmierstil, wenn möglich auf deutsch, aber ich bin für jeden Tipp dankbar, Bücher, Webseiten, Blogs, einfach alles)

    Daher hab ich mich hingesetzt und das ganze angefangen in die Praxis umzusetzen.

    Erst einfach mal das Script:

    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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

        Element = {
        /* Element.setStyle('element', {options}) */
        setStyle: function(e, options) {
            e.style.color = options.color;
            e.style.fontSize = options.fontSize;
            e.style.background = options.bgColor;
            e.style.padding = options.padding;
            e.style.margin = options.margin;
            e.style.display = options.display;
            e.style.fontWeight = options.fontWeight;
        },
        /* Element.toggle('element') */
        toggle: function(e) {
            if (e.style.display != 'none') {
                e.style.display = 'none';
            } else {
                e.style.display = '';
            }            
        },
        /* Element.hide('element') */
        hide: function(e) {
            if (e.style.display != 'none') {
                e.style.display = 'none';
            }
        }
    }
    
    kollabieren = function(id) {
        var toggler = document.getElementById('deflist').getElementsByTagName('dt');
        for(var i=0; i < toggler.length; i++) {
            var e = (toggler)[i];
            Element.hide(e.nextSibling.nextSibling);
            e.onclick = function() {
                for(var i=0; i < toggler.length; i++) {
                    var e = (toggler)[i];
                    Element.setStyle(e, {color: ''});
                    Element.hide(e.nextSibling.nextSibling);
                }
                Element.setStyle(this, {color: '#FF0000'});
                Element.toggle(this.nextSibling.nextSibling);
            }
        }
    }
    
    window.onload = function() {
       kollabieren();
    }
    HTML-Code:
        <dl id="deflist">
       <dt>Definition Term 1</dt>
       <dd>Description. Description. Description. Description. Description. Description. </dd>       
       <dt>Definition Term 2</dt>
       <dd>Description. Description. Description. Description. Description. Description. </dd>
       <dt>Definition Term 3</dt>
       <dd>Description. Description. Description. Description. Description. Description. </dd>
    </dl>

    Bei Klick auf einen Definition Term wird die dazugehörige Description eingeblendet. Das ganze funktioniert auch bestens in Firefox & Opera, nur der IE macht nicht mit. Zu Anfang werden alle dd Elemente ausgeblendet und bei onclick auf das vorherige dt Element eingeblendet. Im IE allerdings wird von anfang an nur das erste dt und das alle dd Element angezeigt. Wäre nett wenn mir dazu jemand einen Tipp oder eine Lösung hätte.


    Vielen Dank. Grüße
    Geändert von versuch13 (21.12.06 um 22:54 Uhr)
     
    Zitieren Zitieren
  2. 22.12.06 09:46 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    die unterschiedlichen Browser interpretieren nextSibling unterschiedlich. So liefert der IE für
    Code :
    1

    e.nextSibling.nextSibling
    bereits das nächste DT-Element, Firefox dagegen das erwartete DD (Textknoten wird mitgezählt).

    Abhilfe kannst Du schaffen, indem Du die Folgeelemente in einer while-Schleife solange prüfst, bis das nächste
    DD-Element gefunden wurde.

    Weiterhin musst Du bei in setStyle prüfen, ob ein gewünschter Style übergeben wurde und evtl. einen Standardwert
    übergeben - sonst wird es mit einer Fehlermeldung quittiert.

    Zuletzt habe ich die onclick-Funktion angepasst. Es wird nun bei jedem Aufruf ein DT-Array erstellt, durchlaufen und
    die erforderlichen Schritte ausgeführt. Ich habe es weitestgehend kommentiert, hoffentlich kannst Du etwas damit anfangen.
    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
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

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
 
<script type="text/javascript">
<!--
Element = {
    /* Element.setStyle('element', {options}) */
    setStyle: function(e, options) {
        e.style.color = (typeof(options.color) == "undefined")?"":options.color;
        e.style.fontSize = (typeof(options.fontSize) == "undefined")?"":options.fontSize;
        e.style.background = (typeof(options.bgColor) == "undefined")?"":options.bgColor;
        e.style.padding = (typeof(options.padding) == "undefined")?"":options.padding;
        e.style.margin = (typeof(options.margin) == "undefined")?"":options.margin;
        e.style.display = (typeof(options.display) == "undefined")?"":options.display;
        e.style.fontWeight = (typeof(options.fontWeight) == "undefined")?"":options.fontWeight;
    },
    /* Element.toggle('element') */
    toggle: function(e) {
        if (e.style.display != 'none') {
            e.style.display = 'none';
        } else {
            e.style.display = '';
        }
    },
    /* Element.hide('element') */
    hide: function(e) {
        if (e.style.display != 'none') {
            e.style.display = 'none';
        }
    }
}
 
kollabieren = function(id) {
    var toggler = document.getElementById('deflist').getElementsByTagName('dt');
    for(var i=0; i < toggler.length; i++) {
        var e = toggler[i];
        var objDD = e.nextSibling;
        // Zugehörige Definitionsbeschreibung ermitteln
        while(objDD.nodeName.toUpperCase() != "DD"){
          objDD = objDD.nextSibling;
        }
 
        // Beschreibung verstecken
        Element.hide(objDD);
 
        // Onclick-Event mit Funktion versehen
        e.onclick = function() {
            // Array mit allen Defintionstermen holen
            var arrToggler = document.getElementById('deflist').getElementsByTagName('dt');
 
            // Alle Terme durchlaufen -> zunächst alle verstecken (außer auslösenden Toggler)
            for(var i=0; i<arrToggler.length; i++) {
              var objToggler = arrToggler[i];
 
              // Falls es sich nicht um das auslösende Element handelt
              if(objToggler != this){
 
                // Zugehörige Beschreibung ermitteln
                var objDD = objToggler.nextSibling;
                while(objDD.nodeName.toUpperCase() != "DD"){
                  objDD = objDD.nextSibling;
                }
 
                Element.setStyle(objToggler, {color: ''});
                Element.hide(objDD);
              }
            }
 
            Element.setStyle(this, {color: '#FF0000'});
 
            // Beschreibung zum aktuellen Term ermitteln
            var objDD = this.nextSibling;
            while(objDD.nodeName.toUpperCase() != "DD"){
              objDD = objDD.nextSibling;
            }
 
            // Element einblenden
            Element.toggle(objDD);
        }
    }
}
 
window.onload = function() {
   kollabieren();
}
//-->
</script>
</head>
<body>
    <dl id="deflist">
       <dt>Definition Term 1</dt>
       <dd>Description. Description. Description. Description. Description. Description. </dd>
       <dt>Definition Term 2</dt>
       <dd>Description. Description. Description. Description. Description. Description. </dd>
       <dt>Definition Term 3</dt>
       <dd>Description. Description. Description. Description. Description. Description. </dd>
    </dl>
</body>
</html>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 22.12.06 10:46 #3
    versuch13 versuch13 ist offline Mitglied Brilliant
    Registriert seit
    Feb 2005
    Beiträge
    950
    Vielen Dank! Nur nochmal um zu prüfen ob ich dass jetzt richtig verstehe:


    Code :
    1
2
3
4
5
6

            var e = toggler[i];
        var objDD = e.nextSibling;
        // Zugehörige Definitionsbeschreibung ermitteln
        while(objDD.nodeName.toUpperCase() != "DD"){
          objDD = objDD.nextSibling;
        }


    var objDD, ist der Inhalt der dt - Elemente falls richtig interpretiert (also Firefox & Co), der
    IE jedoch liefert hier schon das darauf folgende dd - Element, dass liefert er mir jedenfalls per alert(). Nur die while Schleife verstehe ich jetzt nicht so ganz, klar ist dass du darin objDD wieder überschreibst (und auf next.Sibling zugreifst, was ja dann meinem e.nextSibling.nextSibling entspricht) und so auch im Firefox das nächste dd - Element erhalten wird.
    Wird die Schleife von IE gar nicht durchlaufen?- denn er gibt mir kein alert() zurück? Weshalb das toUpperCase()? Im Prinzip überprüfst du also, ob der Element name von objDD ungleich dd ist, in Firefox entspricht objDD == #text, daher durchläuft er die Schleife, IE durchläuft die Schleife nicht weil objDD == dd ist, aber wozu das toUpperCase()?

    Und in der onclick Funktion, erstellst du ein neues array arrToggler, kann ich da nicht auf das array toggler zugreifen?


    Danke. Gruß
     
    Zitieren Zitieren
  4. 22.12.06 12:14 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    Zur while-Schleife:
    Die Schleife hat lediglich den Sinn, das erste DD-Element von einem Startknoten ausgehend zu ermitteln und
    somit für jeden Browser zu gewährleisten, dass gleiche Element zu bearbeiten. Bei Deiner HTML-Struktur wird
    sie in der Tat vom IE nicht durchlaufen.

    Zu toUpperCase:
    Das toUpperCase ist nur zur Sicherheit eingebaut. Somit stelle ich sicher, dass der Elementname immer in
    Grossbuchstaben vorliegt und kann entsprechend vergleichen.

    Zu arrToggler:
    Die onclick-Funktion wird immer aufgerufen, wenn der entsprechende Event eingetreten ist. Zu diesem
    Zeitpunkt ist die Funktion kollabieren jedoch abgearbeitet und das Array steht somit nicht mehr zur Verfügung.
    Aus diesem Grund wird die DT-Kollektion erneut erstellt.
    Eine Alternative wäre es, das Array global zu erstellen und dann darauf zuzugreifen.

    Ich hoffe Deine Fragen damit alle beantwortet zu haben.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  5. 22.12.06 13:02 #5
    versuch13 versuch13 ist offline Mitglied Brilliant
    Registriert seit
    Feb 2005
    Beiträge
    950
    Ja, bestens, alles verstanden. Nur nochmal zum zweiten array, wenn ich dass nicht erstelle und auf das erste zugreife, funktioniert es doch aber trotzdem:

    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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

    kollabieren = function(id) {
    var toggler = document.getElementById('deflist').getElementsByTagName('dt');
    for(var i=0; i < toggler.length; i++) {
        var e = toggler[i];
        var objDD = e.nextSibling;
        
        // Zugehörige Definitionsbeschreibung ermitteln
        while(objDD.nodeName.toUpperCase() != "DD"){
          objDD = objDD.nextSibling;          
        }
 
        // Beschreibung verstecken
        Element.hide(objDD);
 
        // Onclick-Event mit Funktion versehen
        e.onclick = function() {
 
            // Alle Terme durchlaufen -> zunächst alle verstecken (außer auslösenden Toggler)
            for(var i=0; i<toggler.length; i++) {
              var objToggler = toggler[i];
 
              // Falls es sich nicht um das auslösende Element handelt
              if(objToggler != this){
 
                // Zugehörige Beschreibung ermitteln
                var objDD = objToggler.nextSibling;
                while(objDD.nodeName.toUpperCase() != "DD"){
                  objDD = objDD.nextSibling;
                }
 
                Element.setStyle(objToggler, {color: ''});
                Element.hide(objDD);
              }
            }
 
            Element.setStyle(this, {color: '#FF0000'});
 
            // Beschreibung zum aktuellen Term ermitteln
            var objDD = this.nextSibling;
            while(objDD.nodeName.toUpperCase() != "DD"){
              objDD = objDD.nextSibling;
            }
 
            // Element einblenden
            Element.toggle(objDD);
        }
    }
}

    Also, bei mir läuft es jedenfalls. Sollte das nicht so sein?


    Außerdem verweise ich grad nochmal auf den ersten Absatz in meinem ersten Post bezüglich der Lektüre, vielleicht hat da jemand einen guten Buch Tipp für mich?


    Danke.
     
    Zitieren Zitieren
« n von n checkboxen | Class eines Div mit xajax ändern »

Ähnliche Themen

  1. json for..in
    Von ano1486 im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 28.08.10, 16:28
  2. Browserunterschiede beim floaten
    Von queicherius im Forum CSS
    Antworten: 11
    Letzter Beitrag: 21.12.09, 19:55
  3. json aktivieren!?
    Von Marky-1 im Forum Hosting & Webserver
    Antworten: 2
    Letzter Beitrag: 17.04.09, 20:16
  4. JSON Parser
    Von serializable im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 16.07.08, 01:02
  5. Browserunterschiede bei Formularen
    Von Prophet05 im Forum CSS
    Antworten: 6
    Letzter Beitrag: 18.12.05, 19:18