Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2320[/thread]

JavaScript - Problem mit "display"

Leser: 1


<< >> 10 Einträge, 1 Seite
renee
 2006-12-14 14:15
#24941 #24941
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Ich habe folgende HTML-Datei:
Code: (dl )
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
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
    <style type="text/css">

    .content_div{
        position        : absolute;
        top             :    290px;
        left            :    140px;
        display         :     none;
    }
    </style>
    
    <script type="text/javascript">
    function show_content(id){
    var parent = document.getElementById("content_divs");    

    for(i = 0; i < parent.childNodes.length; i++){
        node = parent.childNodes[i];
        node.style.display = "none";
    }

    document.getElementById(id).style.display = "block";
    }
    </script>
</head>
<body>

    <div class="container">
        <div class="content">
          <table>    
            <tr>
              <td><span class="content_list" 
                        onclick="show_content('12');"><a href="#12">Test</a></span></td>        
            </tr>    
            <tr>
              <td><span class="content_list" 
                        onclick="show_content('119');"><a href="#119">Test</a></span></td>        
            </tr>    
          </table>

          <div id="content_divs">
              <div class="content_div" id="12" >
                 <h3>Test</h3>
                 Testartikel
              </div>
              <div class="content_div" id="119" >
                 <h3>Test</h3>
                 Dies ist ein Testartikel
              </div>
          </div>
      </div>
</body>
</html>


Dies funktioniert im InternetExplorer einwandfrei, bei Firefox (1.0) bekomme ich die folgende Fehlermeldung:
Code: (dl )
1
2
3
Error: node.style has no properties
Source File: http://localhost/foo.html#119
Line: 23


Was mache ich falsch?
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
GwenDragon
 2006-12-14 15:18
#24942 #24942
User since
2005-01-17
14787 Artikel
Admin1
[Homepage]
user image
Erstmal würde ich die Variable nie node nennen!
Denn es gibt ein JS-Objekt namens node!

Dann würde ich nach der Abfrage auch prüfen, ob bei parent.childNodes[i] wirklich kein undefined zurück gegeben wurde.
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
renee
 2006-12-14 15:33
#24943 #24943
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Ich habe im JS jetzt das gemacht:
Code: (dl )
1
2
3
4
5
6
7
8
        divnode = parent.childNodes[i];
    if(typeof divnode == 'undefined'){
        alert('undefined');
    }
    else{
        alert('nicht undef');
            divnode.style.display = "none";
    }


Und ich bekomme immer 'nicht undef'... Was jetzt?
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
MisterL
 2006-12-14 16:59
#24944 #24944
User since
2006-07-05
334 Artikel
BenutzerIn
[default_avatar]
Vielleicht enthält das hier in irgendeiner Form eine richtungsweisende Idee:
(Quelle: http://www.wer-weiss-was.de/cgi-bin....t=forum)
Code: (dl )
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
<html>
<head>

<script language="javascript">
function zeigen(bild)
{
//In den Anführungszeichen befinden sich die IDs der
//Block-Elemente, die zunächst nicht angezeigt
//werden sollen.
document.getElementById("Bild_1").style.visibility = 'hidden';
document.getElementById("Bild_2").style.visibility = 'hidden';
document.getElementById("Bild_3").style.visibility = 'hidden';
// Jetzt gewünschtes Block-Element anzeigen.
document.getElementById(bild).style.visibility = 'visible';
}
</script>

</head>
<body>

<a href="javascript:zeigen('Bild_1');">Bild 1 zeigen</a> |
<a href="javascript:zeigen('Bild_2');">Bild 2 zeigen</a> |
<a href="javascript:zeigen('Bild_3');">Bild 3 zeigen</a>
<br>
<br>Mit einem Klick auf das Bild (hier: den Text) verschwindet es wieder.

<div id="Bild_1" style="position:absolute; top:150px; left:50px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 1<br>in beliebiger<br>Größe und Position</div>

<div id="Bild_2" style="position:absolute; top:250px; left:150px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 2<br>in beliebiger<br>Größe und Position</div>

<div id="Bild_3" style="position:absolute; top:100px; left:350px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 3<br>in beliebiger<br>Größe und Position</div>

</body>
</html>
\n\n

<!--EDIT|renee|1166108894-->
“Perl is the only language that looks the same before and after RSA encryption.”
renee
 2006-12-14 17:17
#24945 #24945
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Nein, denn da sind die IDs der divs bekannt. Bei mir werden die mal dynamisch generiert. Deswegen muss ich mit ner for-Schleife alle divs verschwinden lassen.

Wenn ich Dein Beispiel anpasse, dann funktioniert es wieder nicht. Ich bekomme noch nicht einmal den alert, sondern die JavaScript Console von Firefox gibt mir folgendes aus:
Code: (dl )
1
2
3
Error: divnode.style has no properties
Source File: http://localhost/visi.html
Line: 16


abgeändertes Beispiel:
Code: (dl )
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
<html>
<head>

<script language="javascript">
function zeigen(bild)
{

    var parent = document.getElementById("test");    

    for(i = 0; i < parent.childNodes.length; i++){
        divnode = parent.childNodes[i];
    if(divnode){
        divnode.style.visibility = 'hidden';
    }
    else{
        alert('mist!');
    }
    }
    
// Jetzt gewünschtes Block-Element anzeigen.
document.getElementById(bild).style.visibility = 'visible';
}
</script>

</head>
<body>

<a href="javascript:zeigen('Bild_1');">Bild 1 zeigen</a> |
<a href="javascript:zeigen('Bild_2');">Bild 2 zeigen</a> |
<a href="javascript:zeigen('Bild_3');">Bild 3 zeigen</a>
<br>
<br>Mit einem Klick auf das Bild (hier: den Text) verschwindet es wieder.

<div id="Bild_1" style="position:absolute; top:150px; left:50px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 1<br>in beliebiger<br>Größe und Position</div>

<div id="Bild_2" style="position:absolute; top:250px; left:150px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 2<br>in beliebiger<br>Größe und Position</div>

<div id="Bild_3" style="position:absolute; top:100px; left:350px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 3<br>in beliebiger<br>Größe und Position</div>

</body>
</html>
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
esskar
 2006-12-15 06:06
#24946 #24946
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
naja, auch whitespaces, text, komentare sind DOM-knoten, zumindest in browsern != IE.
hier ne funktionierende version

Code: (dl )
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
<html>
<head>

<script type="text/javascript"><!--
    function zeigen(bild) {

    var p = document.getElementById("test");
    for(var i = 0; i < p.childNodes.length; i++){
       var e = p.childNodes[i];
       if(e.nodeName == 'DIV') {
            e.style.visibility = 'hidden';
        }
    }

    // Jetzt gewünschtes Block-Element anzeigen.
    document.getElementById(bild).style.visibility = 'visible';
}
// --></script>

</head>
<body>

<a href="javascript:zeigen('Bild_1');">Bild 1 zeigen</a> |
<a href="javascript:zeigen('Bild_2');">Bild 2 zeigen</a> |
<a href="javascript:zeigen('Bild_3');">Bild 3 zeigen</a>
<br>
<br>Mit einem Klick auf das Bild (hier: den Text) verschwindet es wieder.
<div id="test">
<div id="Bild_1" style="position:absolute; top:150px; left:50px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 1<br>in beliebiger<br>Größe und Position</div>

<div id="Bild_2" style="position:absolute; top:250px; left:150px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 2<br>in beliebiger<br>Größe und Position</div>

<div id="Bild_3" style="position:absolute; top:100px; left:350px; visibility:hidden" onclick="this.style.visibility = 'hidden'">Bild 3<br>in beliebiger<br>Größe und Position</div>
</div>
</body>
</html>
renee
 2006-12-15 09:30
#24947 #24947
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Ah, super! Danke!
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
esskar
 2006-12-15 15:02
#24948 #24948
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
um cpu zeit zu sparen, auch wenn es nur die com client ist, würde ich die funktion aber so schreiben

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a;
function zeigen(bild) {
   if(a) {
      a.style.visibility = 'hidden';
   } else {
      var p = document.getElementById("test");
      for(var i = 0; i < p.childNodes.length; i++){
         var e = p.childNodes[i];
         if(e.nodeName == 'DIV') {
           e.style.visibility = 'hidden';
         }
      }      
   }
   document.getElementById(bild).style.visibility = 'visible';
   a = bild;
}
Froschpopo
 2006-12-15 18:12
#24949 #24949
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Noch besser wäre doch, wenns via AJAX bei Bedarf geliefert wird!
esskar
 2006-12-15 18:56
#24950 #24950
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
[quote=Froschpopo,15.12.2006, 17:12]Noch besser wäre doch, wenns via AJAX bei Bedarf geliefert wird![/quote]
dann aber cachen, wenn änderungen des einen nicht änderungen des anderen mitsichziehen.
wenn man schon js einsetzt, sollte man es auch einfach geschickt veinsetzen.
wenn ich z.b. den webmailer von 1&1 nutze, geht die computer cpu beim aktualisieren der inbox auf 100%
<< >> 10 Einträge, 1 Seite



View all threads created 2006-12-14 14:15.