Problem mit layern!

[Torben]

hallo leute!

habe nen problem mit einem layer, und zwar sieht das ganze so aus:

<div id="text">Das ist ein Test. Das ist ein Test.<div/>

<a onclick="toggle('text'); return false;" href="#">Ein/Aus</a>

function toggle( targetId )
{
  if (document.getElementById)
  {
    var target  = document.getElementById( targetId );

if (target.style.display == "")
    {
      target.style.display = "none"
    }
    else
    {
      target.style.display = ""
    }
  }
}

problem ist nur, dass das <div> element mehrfach auftrift auf meiner seite mit der gleichen id! wenn man das ganze dann ausblenden will wird aber immer nur das erste element ausgeblendet! die anderen bleiben trotz gleicher id! weiß einer was man dageben tun kann?

lg torben!

[Jan L.]

Hallo,

problem ist nur, dass das <div> element mehrfach auftrift auf meiner seite mit der gleichen id!

Ja, das ist ein Problem, weil das nicht erlaubt ist. Eine id muß
einmalig sein. Gib den Elementen verschiedene ids oder verwende eine
Klasse.

Gruß, Jan

[Daniel]

problem ist, es sollen mit einem klick verschiedene sachen ausgeblendet werden! geht sowas denn mit klassen? wenn ja - wie? was meinst du damit genau?

lg torben

[Jan L.]

Hallo,

geht sowas denn mit klassen?

Ja, sonst hätte ich es ja nicht vorgeschlagen ;-)

wenn ja - wie? was meinst du damit genau?

Was eine CSS-Klasse ist dürfte ja wohl klar sein, oder?

Wie du dir per JS alle Elemente, die zu einer bestimmten Klasse gehören,
holst verrät dir http://forum.de.selfhtml.org/archiv/2004/9/90330/#m541610

Alles weitere dürftest du selbst hinbekommenen, wenn du es mit deinem
Ansatz von oben kombinierst.

Gruß, Jan

[Torben]

also bedeutet das, dass ich in das <div> element auch noch class="kommentar" rein bauen soll, also:

<div id="kommentare" class="kommentare">

und die funktion mit in die datei.js aber wie dann beides verbinden?

[Jan L.]

Hallo,

<div id="kommentare" class="kommentare">

Du sollst statt id="kommentare" class="kommentare" verwenden, weil es
auf einer Seite nicht mehrere Elemente geben darf, die eine identische
id haben.

und die funktion mit in die datei.js aber wie dann beides verbinden?

Statt mit 'getElementById' (was dir, wie der Name schon sagt, nur ein
Element liefern kann) greifst du auf die Elemente mit
'getElementsByClassName' zu. Dann durchläuft dein Script eine Schleife,
in der für jedes Element, das die Funktion zurückgeliefert hat, die
display-Eigenschaft geändert wird.

Gruß, Jan

[Torben]

Nur wie muss ich das nun verbinden:

function toggle2( targetId )
{
  if (document.getElementsByClassName)
  {
    var target  = document.getElementsByClassName( targetId );

if (target.style.display == "")
    {
      target.style.display = "none"
    }
    else
    {
      target.style.display = ""
    }
  }
}

function getElementsByClassName(class_name)
{
  var all_obj,ret_obj=new Array(),j=0,teststr;
  if(document.all)all_obj=document.all;
  else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
  for(i=0;i<all_obj.length;i++)
  {
    if(all_obj[i].className.indexOf(class_name)!=-1)
    {
      teststr=","+all_obj[i].className.split(" ").join(",")+",";
      if(teststr.indexOf(","+class_name+",")!=-1)
      {
        ret_obj[j]=all_obj[i];
        j++;
      }
    }
  }
  return ret_obj;
}

[Jan L.]

Hallo,

Nur wie muss ich das nun verbinden:

Das habe ich dir schon erklärt:

Dann durchläuft dein Script eine Schleife, in der für jedes
Element, das die Funktion zurückgeliefert hat, die
display-Eigenschaft geändert wird.

var target  = document.getElementsByClassName( targetId );

In 'target' hast du jetzt ein Array, dessen Elemente du einzeln
ansprechen mußt.

Tip: schau dir die for-Schleife in der Funktion 'getElementsByClassName'
an. Etwas ganz ähnliches brauchst du in deiner Funktion auch noch.

So, jetzt aber mal selbst nachdenken ;-)

Gute Nacht, Jan

[Torben]

uff sry hab echt gar keine ahnung da kommen nur fehler bei rum!

[Torben]

problem ist, ich kann kein javascript und weiß deshalb nicht was wichtig ist bei den beiden funktionen und was nicht, deshalb kann ich es nicht verbinden! hmm naja

[Jan L.]

Hallo,

Hier die nötigen Änderungen an deiner Funktion:

function toggle2( targetId )
{

if (document.getElementsByTagName || document.all)

{
    var target  = document.getElementsByClassName( targetId );

for (i=0; i<target.length; i++) {
         if (target[i].style.display == "") {
           target[i].style.display = "none";
         }
         else {
           target[i].style.display = "";
         }
       }

}
}

[...]

Schau dir den Code und die Erklärungen, die ich gestern gepostet habe,
mal zusammen an und versuche es zu verstehen.
Wenn du vorhast weiterhin mit solchen Javascript-Sachen zu arbeiten,
solltest du dich zunächst mal mit den Grundlagen beschäftigen.

Gruß, Jan

[Struppi]

habe nen problem mit einem layer, und zwar sieht das ganze so aus:

<div id="text">Das ist ein Test. Das ist ein Test.<div/>

problem ist nur, dass das <div> element mehrfach auftrift auf meiner seite mit der gleichen id! wenn man das ganze dann ausblenden will wird aber immer nur das erste element ausgeblendet! die anderen bleiben trotz gleicher id! weiß einer was man dageben tun kann?

Das geht einfacher (wie schon erwähnt), wenn du eine CSS Klasse verwendest und dessen Eigenschaften änderst. Ich hab dir mal ein Beispiel gebacken:
http://home.arcor.de/struebig/computer/javascript/lib/test/css_beispiel.html
(ich hoffe mal es funktioniert, da ich momentan nur den IE 4 zu Verfügung habe)

du kannst hier die verschiedenen Eigenschaften der Klasse '.test' ändern (du musst das Textfeld verlassen).

Dahinter liegt das Modul css.js http://home.arcor.de/struebig/computer/javascript/lib/css.html und dort die Funktion setStyle( strStyle, strAttribut, strWert)

Struppi.

[Torben]

wenn du das unten meinst mit dem drop down menü, dann funzt das leider net

[Struppi]

wenn du das unten meinst mit dem drop down menü, dann funzt das leider net

wie gesagt ich hab hier einen IE 4

wenn ich dort auf der Seite http://home.arcor.de/struebig/computer/javascript/lib/test/css_beispiel.html in dem Selectfeld 'display' auswähle und in dem Texfeld 'none' eintrage und dann das Feld verlasse werden alle Elemente mit der Klasse '.test' ausgeblendet. Bei dir nicht?

Struppi.

[Jan L.]

Hallo,

http://home.arcor.de/struebig/computer/javascript/lib/test/css_beispiel.html

Funktioniert hier unter IE6 und Firefox 0.10.1 problemlos (auch wenn die
Seite unter IE6 etwas seltsam aussieht).

Gruß, Jan