✔ Verschachtelte div's per js erstellen

H

herrgarnele

Erfahrenes Mitglied
Hallo zusammen!

Ich habe auf meiner Seite für die Seiten links, rechts und unten per CSS einen Schlagschatten generiert:
Code: 
<div id="main">
    <div id="shadow_left">
        <div id="shadow_right">
            <div id="shadow_bottom">
                <div id="shadow_leftbottom">
                    <div id="shadow_rightbottom">                
                        <div id="wrapper">
                            content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Nun wird das ganze aber ganz schön unübersichtlich, deshalb möchte ich das per js generieren. Mein (erfolgloser) Versuch bisher schaut so aus (bitte nicht lachen):
Code: 
<script language="text/javascript">
    document.body.onload = function() {
    var shadowleft = document.createElement("div");
    shadowleft.id = "shadow_left";
    var shadowright = document.createElement("div");
    shadowright.id = "shadow_right";
    var shadowbottom = document.createElement("div");
    shadowright.id = "shadow_bottom";
    var shadowleftbottom = document.createElement("div");
    shadowright.id = "shadow_leftbottom";
    var shadowrightbottom = document.createElement("div");
    shadowright.id = "shadow_rightbottom";
    var wrapper = document.getElementById("wrapper");
    var wrapperCopy = wrapper.cloneNode(true);
    var parentWrapper = wrapper.parentNode;
    shadowright.appendChild(wrapperCopy);
    parentWrapper.insertBefore(shadowleft, wrapper);
    parentWrapper.insertBefore(shadowright, wrapper);
    parentWrapper.insertBefore(shadowbottom, wrapper);
    parentWrapper.insertBefore(shadowleftbottom, wrapper);
    parentWrapper.insertBefore(shadowrightbottom, wrapper);
    parentWrapper.removeChild(wrapper);
    }
</script>
Leider tut sich da gar nix... :(
Hilfe!!
 
Code: 
<script language="text/javascript">

"text/javascript" ist kein korreker Wert für das language-Attribute, dort müsstest du nur "javascript" notieren.
Dieses Attribut ist aber eh überflüssig, lt. HTML ist dort das type-Attribute vonnöten:
Code: 
<script type="text/javascript">

Code: 
document.body.onload = function()
  1. sollte das Skript im <head> stehen, erzeugt das einen Fehler, weil der <body> dort noch nicht bekannt ist
  2. document.body.onload ist nur begrenzt browserkompatibel, verwende besser window.onload
 
Hallo Sven,
danke erstmal für die Antwort.

"text/javascript" ist kein korreker Wert für das language-Attribute, dort müsstest du nur "javascript" notieren.
Dieses Attribut ist aber eh überflüssig, lt. HTML ist dort das type-Attribute vonnöten:
Zum Vergrößern anklicken....
Ups, im Eifer des Gefechts bzw. nach Stunden durchgewurschtel hab ich das wohl verhaspelt.

sollte das Skript im <head> stehen, erzeugt das einen Fehler, weil der <body> dort noch nicht bekannt ist
Zum Vergrößern anklicken....
Das heisst ich hantiere da zu einem Zeitpunnkt mit getElementById rum, wo noch nicht mal der body existiert..
Demzufolge müsste es doch aber funktionieren, wenn ich das script innerhalb des body platziere?
Ich habs an allen möglichen Stellen versucht, aber es will einfach nicht :(
 
Das heisst ich hantiere da zu einem Zeitpunnkt mit getElementById rum, wo noch nicht mal der body existiert..
Zum Vergrößern anklicken....

Jo Meista :-)
Demzufolge müsste es doch aber funktionieren, wenn ich das script innerhalb des body platziere?
Ich habs an allen möglichen Stellen versucht, aber es will einfach nicht :(
Zum Vergrößern anklicken....

Entscheidend ist weniger, wo es steht, sondern wann es ausgeführt wird.
Wenn du es bei window.onload startest, ist das Dokument fertiggeladen und alles bekannt.

Du hast dort aber noch einen anderen Fehler.
insertBefore() platziert alle divs hintereinander und nicht verschachtelt, wie du es brauchst.(mach mal einen Rahmen um jedes div, dann siehst du es)

Hier mal nen Ansatz, wie es klappen könnte:
Code: 
<html>
<head>
<title>Test</title>

<style type="text/css">
<!--
div{border:2px dotted red;padding:5px;}
-->
</style>
</head>
<body>
<div id="wrapper">content</div>
<script type="text/javascript">
<!--
function shadowed(obj)
{
  obj_=obj.cloneNode(true);
  shadows=['shadow_left','shadow_right','shadow_bottom','shadow_leftbottom','shadow_rightbottom'];
  
  for(i=shadows.length-1;i>=0;--i)
    {
      node=document.createElement('div');
      node.className=shadows[i];
      node.appendChild(obj_);
      obj_=node;
    }   
   
  obj.parentNode.replaceChild(obj_,obj);
  
}
shadowed(document.getElementById('wrapper'));
//-->
</script>
</body>
</html>

Die Funktion erwartet als Parameter das mit dem Schatten zu vesehende Element als Objekt, durch dessen Übergabe kannst du die Funktion beliebig oft im Dokument einsetzen.
Statt den div's IDs zu vergeben, hab ich den Klassennamen gesetzt...da ID eindeutig sein muss....du müsstest dann halt im CSS-Teil den die Selektoren entsprechend ändern.
 
Hi Sven!

Wow, vielen Dank für den Code!
Funktioniert wunderbar und ist - ganz guter Coder - auch noch universell einsetzbar! :)

Ich verstehe window.onload nur immer noch nicht ganz.
Das ist ein Event-Handler, der den Code ausführt, sobald der Browser das ganze Fenster geladen hat.

Angenommen, ich habe den Code in eine externe .js ausgelagert.
Dann müsste ich den doch mit
Code: 
window.onload=shadowed(document.getElementById('wrapper'));
ausführen können, oder?
Wenn das gesamte Fenster geladen wurde, sollte doch auch der #wrapper bekannt sein?

PS.: Post um 3:09 - wann schläfst Du denn Junge? :p
 
herrgarnele hat gesagt.:
Ich verstehe window.onload nur immer noch nicht ganz.
Das ist ein Event-Handler, der den Code ausführt, sobald der Browser das ganze Fenster geladen hat.
Zum Vergrößern anklicken....

Jo, genau
herrgarnele hat gesagt.:
Angenommen, ich habe den Code in eine externe .js ausgelagert.
Dann müsste ich den doch mit
Code: 
window.onload=shadowed(document.getElementById('wrapper'));
ausführen können, oder?
Zum Vergrößern anklicken....

Wo der Code steht, ist egal...beim onload sind auch alle Skripte geladen, egal wo sie stehen.
Dein Code haut so nicht ganz hin, da dieser bereits während des Lesens der Zeile ausgeführt wird, korrekt müsste es bspw. so lauten:
Code: 
window.onload=function(){shadowed(document.getElementById('wrapper'));}

Den Unterschied kannst du mal hier ausprobieren:
Code: 
<script type="text/javascript">
<!--
window.onirgendwas=alert('Test1');
window.onirgendwas=function(){alert('Test2');}
//-->
</script>
Obwohl es keinen Event "onirgendwas" gibt, erhältst du einen alert "Test1"...weil die erste Zeile bereits während des Einlesens des Dokumentes ausgeführt wird, unabhängig vom Event, dem sie zugewiesen wurde.

PS.: Post um 3:09 - wann schläfst Du denn Junge?
Zum Vergrößern anklicken....
am Liebsten auf Arbeit :suspekt:
 
Goddammit,
ich habs auch schon versucht mit
Code: 
window.onload=function{shadowed(document.getElementById('wrapper'))};
allerdings hab ich hinter der function die leere () vergessen :-(
Oh Mann, js verzeiht aber auch gar nix..

Vielen Dank für Deine Hilfe, wieder was gelernt!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück