Clonen von Seitenelementen

**penizillin** · 19.06.2007, 13:19

javascript ist nicht java.

und "geht nicht" und "ohne erfolg" sind keine problembeschreibungen.

der weg ist jedoch richtig.

**wahsaga** · 19.06.2007, 13:20

Re: Clonen von Seitenelementen

Original geschrieben von Pantheon
Soll beispielsweise ein und dasselbe Bild an zwei verschiedenen Slots zur gleichen Zeit angezeigt werden, so geht das über die oben genannte Funktion nicht.

Das geht nicht nur mit der Funktion nicht, sondern überhaupt nicht.
Wenn du ein Bild zwei mal darstellen willst, benötigst du auch zwei HTML-Bildobjekte.

Ich hab schon etwas mit der JS-Funktion "cloneNode" experimentiert, allerdings bislang ohne Erfolg.

Dann "experimentiere" weiter, und viel Erfolg :-)

Bei weiteren Problemen dann aber bitte eine adäquate Beschreibung liefern, und kein "funzt nicht".

**Pantheon** · 19.06.2007, 22:20

Das Javascript != Java, also ganz so der Nuub bin ich wieder auch nicht

Diese Info war nur zur einleitenden Erläuterung.

Also, hier mal das Problem "ausführlicher" anhand einer Beispieldatei. Diese spiegelt die aktuelle Lage wieder. Bitte schlagt mich nicht wg. dem HTML-Part - war auf die schnelle - quick and dirty - dient nur zur Veranschaulichung

.

PHP-Code:


<html>

<head>

<script type="text/javascript">

function show(slot, element){  

  //Element beziehen

  id=document.getElementById(element); 

  //sichtbar schalten

  id.style.display="block";

  //Slot beziehen

  var targetSlot = document.getElementById(slot);

  //Element einfügen

  targetSlot.appendChild(document.getElementById(element));  

}

</script>

</head>



<body>

<button onclick="show('slot1','test')">Anzeige in Slot1</button>

<button onclick="show('slot2','test')">Anzeige in Slot2</button>

<img id="test" src="bild1.jpg" style="display:none" />

<div id="slot1" style="position:absolute; top:100px; left; 100px; width=100px; height=100px; background-color:#0000FF" />

<div id="slot2" style="position:absolute; top:200px; left; 100px; width=100px; height=100px; background-color:#FF0000" />

</body>

</html>

Durch appendChild in dem einen Slot wird logischerweise das Bild vom anderen "Slot" abgezogen, sofern es hier zuvor zur Anzeige gebracht wurde. Ich würde nun gerne etwas in der Art realisieren, dass nur ein Abbild des Ausgangselements (hier also img 'test') zur Anzeige kommt, womit das appendChild-Problem behoben wäre. Daher dachte ich mir, ich erstelle in der show-Funktion zunächst eine Kopie des original Elements und die Sache passt.

Wenn du ein Bild zwei mal darstellen willst, benötigst du auch zwei HTML-Bildobjekte.

Einer meiner folgenden Versuche sah so aus:

PHP-Code:


<html>

<head>

<script type="text/javascript">



var cloneCounter = 0;



function show(slot, element){  

  var clone = document.getElementById(element).cloneNode(true);

  clone.id = element + cloneCounter;

  //sichtbar schalten

  clone.style.display="block";

  //Slot beziehen

  var targetSlot = document.getElementById(slot);



  //Slot leeren

  var childs = document.getElementById(slot).childNodes;

  for (i=0; i<childs.length; i++){

    document.getElementById(childs[i].id).removeChild();

  }



  //Element einfügen

  targetSlot.appendChild(clone);  

  cloneCounter++;

}

</script>

</head>



<body>

<button onclick="show('slot1','test')">Anzeige in Slot1</button>

<button onclick="show('slot2','test')">Anzeige in Slot2</button>

<img id="test" src="bild1.jpg" style="display:none" />

<div id="slot1" style="position:absolute; top:100px; left; 100px; width=100px; height=100px; background-color:#0000FF"></div>

<div id="slot2" style="position:absolute; top:200px; left; 100px; width=100px; height=100px; background-color:#FF0000"></div>

</body>

</html>

Die Doppelanzeige funktioniert also. Jetzt brauche ich nur noch etwas um die DIVs vor der Anzeige zu "entleeren".

**prego** · 20.06.2007, 18:21

schnellste Methode:

PHP-Code:


div.innerHTML = '';

Clonen von Seitenelementen