master_p: 2 DIVs nebeneinander zum auf- und zuklappen!?

SELF-Forum

2 DIVs nebeneinander zum auf- und zuklappen!?

master_p
– Informationen zu den Bewertungsregeln

Moin,

ich habe ein Problem mit CSS und Javascript. Und zwar möchte ich zwei DIVs nebeneinander positionieren. Soweit kein Problem. Nun möchte ich aber das linke DIV (Navigation) per Javascript ausblenden können und das rechte DIV (Content) soll dafür über die ganze Breite gehen.

Kann man sowas darstellen, ohne in Javascript die Breite manuell anzupassen? Also ungefährt so:

Vorher:

  
 __________  _________________________  
!          !!                         !  
 ----------  -------------------------

Nachher:

  
_______________________________________  
!                                     !  
---------------------------------------

Hat dafür jemand eine Lösung parat?

Gruß aus Hamburg

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 2 DIVs nebeneinander zum auf- und zuklappen!?

    Ulysses
    – Informationen zu den Bewertungsregeln

    Hi!

    ich habe ein Problem mit CSS und Javascript. Und zwar möchte ich zwei DIVs nebeneinander positionieren. Soweit kein Problem. Nun möchte ich aber das linke DIV (Navigation) per Javascript ausblenden können und das rechte DIV (Content) soll dafür über die ganze Breite gehen.

    Ich nehme an, das linke DIV ist gefloatet und das rechte nimmt die restliche Breite ein. Dann reicht doch ein einfaches display: none; für des linke DIV.
    LG Ulysses

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. 2 DIVs nebeneinander zum auf- und zuklappen!?

    Alex
    – Informationen zu den Bewertungsregeln 
      
...  
<body onLoad="init()">  
<div id="naviDiv" style="display:block;">...</div>  
<div id="contentDiv" style="display:block;">...</siv>  
</body>  


      
function init() {  
 if(document.getElementById("naviDiv").style.display == "none") {  
  document.getElementById("contentDiv").style.width += document.getElementById("naviDiv").style.width;  
  document.getElementById("contentDiv").style.left = document.getElementById("naviDiv").style.left;  
 }  
}

    Beim Neuladen/Laden der Seite wird die Funktion "init" aufgerufen.
    Da du nicht schreibst, wann sich das "NaviDIV" ausbelndet (bei Klick, Laden ect.) habe ich diese Möglichkeit gewählt.

    Sonst musst du halt den "Auslöser" der Funktion anpassen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 2 DIVs nebeneinander zum auf- und zuklappen!?

      Kalle_B
      – Informationen zu den Bewertungsregeln

      function init() {
      if(document.getElementById("naviDiv").style.display == "none") {
        document.getElementById("contentDiv").style.width += document.getElementById("naviDiv").style.width;
        document.getElementById("contentDiv").style.left = document.getElementById("naviDiv").style.left;
      }
      }

        
Du meinst, ein ausgeblendetes div (display == "none") verrät seine Breite (+= document.getElementById("naviDiv").style.width;) ?  
  
Wie breit wird es wohl sein?  
  
Kalle
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 2 DIVs nebeneinander zum auf- und zuklappen!?

        Alex
        – Informationen zu den Bewertungsregeln

        Du meinst, ein ausgeblendetes div (display == "none") verrät seine Breite (+= document.getElementById("naviDiv").style.width;) ?

        Wie breit wird es wohl sein?

        Hast recht :)
        Ich darf raten? 0px ??? :)
        Dann muss man halt vor dem "dipslay:none" die DIV-Breite zwischenspeichern

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. 2 DIVs nebeneinander zum auf- und zuklappen!?

      master_p
      – Informationen zu den Bewertungsregeln

      Da du nicht schreibst, wann sich das "NaviDIV" ausbelndet (bei Klick, Laden ect.) habe ich diese Möglichkeit gewählt.

      Sonst musst du halt den "Auslöser" der Funktion anpassen.

      Ja, danke. Es passiert auf onclick, was ja letztendlich egal ist, wann es aufgerufen wird. Ich hab's jetzt mit Javascript umgesetzt. Schade, ich dachte, dass man sowas irgendwie nur per CSS hinbekommt.

      Ich nehme an, das linke DIV ist gefloatet und das rechte nimmt die restliche Breite ein. Dann reicht doch ein einfaches display: none; für des linke DIV.
      LG Ulysses

      Ja im Prinzip reicht das. Aber nicht, wenn man noch einen Abstand zwischen beiden will etc. Bei meiner Konstellation ging leider nur JS.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln