Layout nachträglich verändern
0 
Beat
Layout nachträglich verändern
Gunnar BittersmannHallo,
ich habe über css ein 2 Spalten-Layout nach diesem Muster realisiert.
Gibt es eine praxisnahe Lösung dafür, das linke div in seiner Breite zu verändern und das rechte div entsprechend der vieportbreite "nachzuziehen"? Am liebsten sogar clientseitig umgesetzt? Ein Button "zuklappen"/"aufklappen" würde mir schon reichen.
Meine eigenen Lösungsansätze gehen bislang immer nur in die Richtung, eine neue style-datei zu laden. Aber zum einen ist das die serverseitige, sprich ungeliebte Lösung hierfür, zum anderen schaffe ich mir damit nur zusätzliche style-dateien an.
Deshalb suche ich nach einer neuen javascript-Lösung dafür.
Grüße und frohes Neues
Frank
P.S: JQuery lade ich ohnehin mit. Also falls jemand ein Plugin hierfür kennt, würde mich das auch freuen.
-
ich habe über css ein 2 Spalten-Layout nach diesem Muster realisiert.
Gibt es eine praxisnahe Lösung dafür, das linke div in seiner Breite zu verändern und das rechte div entsprechend der vieportbreite "nachzuziehen"? Am liebsten sogar clientseitig umgesetzt? Ein Button "zuklappen"/"aufklappen" würde mir schon reichen.
Wie Praxisnahe darf es sein?
Meine Testseite steht im Head der Message.
Teste mit und ohne JS.
Realisiert mit onload/onresize durch das umschreiben von Klassen.
Also einfach mal am Fenster rütteln.Meine eigenen Lösungsansätze gehen bislang immer nur in die Richtung, eine neue style-datei zu laden.
Unnötig.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
Ich habe mir Deine Seite angesehen und auch erkannt, was Du mir zeigen wolltest. Das ist aber nicht ganz das, was ich suche.
Mir wäre viel lieber ein Link im DIV-1, der dann DIV-1 auf ein Minimum reduziert und DIV-2 (des 2 DIV-Layouts) dann entsprechend vergrößert.
Grüße
Frank
-
Ich habe mir Deine Seite angesehen und auch erkannt, was Du mir zeigen wolltest. Das ist aber nicht ganz das, was ich suche.
Mir wäre viel lieber ein Link im DIV-1, der dann DIV-1 auf ein Minimum reduziert und DIV-2 (des 2 DIV-Layouts) dann entsprechend vergrößert.
Dein Sidebar wäre in dem Fall ein Float-Element mit unbestimmter Weite.
Seine Children sind der Link und ein Inhalt, den es ein/auszublenden gilt.Hierfür gibt es die reine CSS Lösung via :hover und display.
Sie lässt sich mit :target auch etwas besser handhaben.
Bei einem :target brauchst du im Inhalt des Sidebars noch einen Close Link, um den :target zu wechseln.
Ergänzen kannst du dies mit Javascript für MSIE7.
Ich bin jetzt nicht sicher, ob MSIE8 :target schon versteht.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
Ich bin jetzt nicht sicher, ob MSIE8 :target schon versteht.
Nö. So ein DummIE.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
Hi,
Mir wäre viel lieber ein Link im DIV-1, der dann DIV-1 auf ein Minimum reduziert und DIV-2 (des 2 DIV-Layouts) dann entsprechend vergrößert.
Wozu ein Link? Verwende jedes beliebige Element mit onclick-event, und greife mit JS auf die style-Eigenschaften Deiner Wahl zu, beispielsweise:
<p onclick="document.getElementById('myDivId').style.display='none'">mach wech</p>
Allerdings würde ich das lieber in eine Funktion auslagern, ist übersichtlicher. Als zweite Aktion, zusätzlich zu der im Beispiel, könntest Du dann die erste Spalte auf width:100% setzen.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,Verwende jedes beliebige Element mit onclick-event, und greife mit JS auf die style-Eigenschaften Deiner Wahl zu, beispielsweise:
Oder so, stimmt.
Ich habe in der Zwischenzeit an einem Lösungsansatz gebastelt, aber ich verstehe nicht, warum der nicht den gewünschten Effekt erziehlt.
Kann mir dabei einer einen Tip geben?
Grüße
Frank
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Test</title> <style type="text/css"> body { color:black; background-color:white; } #container { border:1px solid red; } #links { float:left; width:20em; border-bottom:1px dotted green; padding:1em; } #rechts { padding:1em; border-left:22em solid #f0f0f0; background-color:white; } p { margin:0; } </style> <script src="./js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var isShow = false; $(document).ready(function(){ // Prüft, ob das Dokument geladen ist $("button#openEx1").click(function(event){ // Bei Klick auf button#openEx1 if (isShow == false) { $('div#links').css({ float:left; width:20em; border-bottom:1px dotted green; padding:1em; }); $('div#rechts').css({ padding:1em; border-left:22em solid #f0f0f0; background-color:white; }); isShow = true; } else { $('div#links').css({ float:left; width:10em; border-bottom:1px dotted green; padding:1em; }); $('div#rechts').css({ padding:1em; border-left:12em solid #f0f0f0; background-color:white; }); isShow = false; } }); }); </script> </head> <body> <div id="container"> <div id="links"> <button id="openEx1">+ / -</button> <p> Lorem ipsum ... usw.</p> </div> <div id="rechts"> <p>Sed tincidunt ... usw.</p> </div> </div> </body> </html>-
Hi,
$('div#links').css({ float:left; width:20em; border-bottom:1px dotted green; padding:1em; });
Das steckt voller Syntaxfehler.
Javascript-Objekt übergeben: Name Wert als String (Name bräuchte kein String zu sein, dann müsste aber aus border-bottom borderBottom werden), Elemente werden kommasepariert (letztes Element _ohne_ Komma):
{'float':'left','width':'20em'}ABER: vermeide soviel Css-Zeugs im Javascript. Nutze Klassennamen, die Du mit addClass und removeClass toggelst.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo Joachim,
Javascript-Objekt übergeben: Name Wert als String (Name bräuchte kein String zu sein, dann müsste aber aus border-bottom borderBottom werden), Elemente werden kommasepariert (letztes Element _ohne_ Komma):
{'float':'left','width':'20em'}Erst einmal 1000Dank für Deine Hilfe. Denn darauf wäre ich nicht gekommen.
ABER: vermeide soviel Css-Zeugs im Javascript. Nutze Klassennamen, die Du mit addClass und removeClass toggelst.
Wäre auch für mich die bessere Lösung. Weil ich damit gleich ein weiteres Problem lösen könnte und mir einige css-Dateien in meinem Projekt ersparen könnte.
Ich hab daran auch den ganzen Tag versucht und probiert. Und auch in einigen anderen Beispielen hinbekommen, aber auf obiges Beispiel angewendet, ist es mir leider nicht gelungen.
Grüße, Frank
Gruesse, Joachim
-
ABER: vermeide soviel Css-Zeugs im Javascript. Nutze Klassennamen, die Du mit addClass und removeClass toggelst.
Wäre auch für mich die bessere Lösung. Weil ich damit gleich ein weiteres Problem lösen könnte und mir einige css-Dateien in meinem Projekt ersparen könnte.
Ich hab daran auch den ganzen Tag versucht und probiert. Und auch in einigen anderen Beispielen hinbekommen, aber auf obiges Beispiel angewendet, ist es mir leider nicht gelungen.
Kann mir dabei jemand helfen? Habe es bis gerade versucht, aber nicht umsetzen können. Den einzig einigermaßen brauchbaren Ansatz habe ich vor ca. 2 Std. versemmelt und habe ihn nicht mehr.
Bin grade etwas entnervt, obwohl ich ja einen funktionierenden Ansatz haeb. Aber der "addclass, removeclass, toggle"-Ansatz ist wirklich der, der besser ist.
Grüße, Frank
-
-
-
-
hi,
Mir wäre viel lieber ein Link im DIV-1, der dann DIV-1 auf ein Minimum reduziert und DIV-2 (des 2 DIV-Layouts) dann entsprechend vergrößert.
Wozu ein Link?Ein Link ist Praktisch, wenn man so eine Funktionalität auch über die Tastatur steuern lassen will.
Ich vermute, es liesse sich auch mit Javascript einrichten, dass ein Element per Tab-Taste angesprungen werden kann, aber wissen tue ich es nicht.mfg
-
Ein Link ist Praktisch, wenn man so eine Funktionalität auch über die Tastatur steuern lassen will.
Ich vermute, es liesse sich auch mit Javascript einrichten, dass ein Element per Tab-Taste angesprungen werden kann, aber wissen tue ich es nicht.Gibst du einem Element ein tabindex Attribut, so wird es (im FF) fokusierbar. Allerdings ist hier ein Link schon der geeignetere Ansatz.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
Allerdings ist hier ein Link schon der geeignetere Ansatz.
IMHO nein. Ein Button ist geeignet. Es soll ja keine andere verlinkte Seite geladen werden, sondern eine Aktion auf der aktuellen Seite ausgeführt werden.
Unnötig zu erwähnen, dass auch Buttons bei Navigation per Tab-Taste fokussiert werden.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
hi,
IMHO nein. Ein Button ist geeignet. Es soll ja keine andere verlinkte Seite geladen werden, sondern eine Aktion auf der aktuellen Seite ausgeführt werden.
Stimmt, und da man mittlerweile den IE < 7 ruhigen Gewissens vernachlässigen kann, stellt auch das Styling der Buttons kein Problem dar.
Ich ging davon aus, dass Buttons in ein Form-Element gehören und ohne invalide sind -- dem scheint nicht so zu sein.mfg
-
@@Malcolm Beck´s:
nuqneH
Ich ging davon aus, dass Buttons in ein Form-Element gehören und ohne invalide sind -- dem scheint nicht so zu sein.
http://www.w3.org/TR/html401/sgml/dtd.html#inline > http://www.w3.org/TR/html401/sgml/dtd.html#formctrl
'button' darf überall stehen, wo Inline-Inhalt erwartet wird.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
-
-