kostenloser Webspace werbefrei: lima-city

<canvas> aus <div> in anderes <div> "überführen"

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   esadat

   esadat hat kostenlosen Webspace.

   0:17, 27.12.2012

   Hallo zusammen,
   
   ich habe ein ziemlich umfangreiches Canvas erstellt, das ich in einen DIV-Container gepackt habe. Außerdem habe ich verschiedene Divs, die abwechselnd gedisplayed (von display='none' zu display='') werden können.
   
   Nun benötige ich jedoch das Canvas auch in weiteren DIV-Containern. Zwar könnte man das Canvas mehrmals erstellen, das würde jedoch ziemliche Rechenkapazitäten und Ladezeiten hervorrufen.
   
   Gibt es eine Möglichkeit, das Canvas per JS einem anderen DIV-Container zuzuweisen, sodass ich das Canvas nur 1x erstellen muss und trotzdem in verschiedenen DIV-Containern dargestellt werden kann?
   
   

   ...
   <div>
   <div style="display:none;">
   <canvas>
   </div>
   </div>
   ...
   <div>
   //canvas soll per JS z.B hierhin verschoben werden, bzw. in diesem DIV angezeigt werden
   </div>
   ...

   
   
   Evtl. über parent oder sowas?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. copynpaste

   

   copynpaste hat kostenlosen Webspace.

   5:18, 27.12.2012

   Hallo,
   
   erstmal eine Frage: Haben deine DIV's auch irgendwelche Bezeichner, also Id's, Klassen, Namen? Denn dann ist es um einiges leichter dein Problem zu lösen.
   Darum gehe ich jetzt von folgendem Szenario aus: Das DIV in das dein Canvas hineingeschoben wird bekommt die Id "newDiv" und das Canvas selber die Id "canvas".
   
   

   //plain JavaScript
   document.getElementById("newDiv").appendChild(document.getElementById("canvas"));
   
   //JQuery
   $('#newDiv').append($('#canvas'));

   
   
   Beides sollte funktionieren (2. natürlich nur wenn die JQuery Library eingebunden ist).
   Dieser Code bewirkt, dass dein Canvas verschoben wird, aus dem ersten ins zweite DIV.
4. Autor dieses Themas

   esadat

   esadat hat kostenlosen Webspace.

   12:57, 27.12.2012

   Hi,
   
   cool danke, das funktioniert sogar ohne jq :)
   
   

   function opendiv(objekt){
   document.getElementById(objekt).appendChild(document.getElementById('canvas'));

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?