div ausblenden und platz frei geben ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausblenden
auto
beispiel
bild
blocken
browser
code
display
element
entscheid
farbe
funktion
http
kurzer text
platz
rutschen
schrift
target
text
url
-
Hallo
ich habe mehrer DIVs (ca. 10 Elemente) mit kleinen Inhalten untereinander, und bei Klick auf jedes einzelne Element soll dieses dann ausgeblendet werden, und den Platz (wo es war) wieder frei geben, so dass die darunter befindlichen Elemente (DIVs) nach oben rutschen, sobald das eine DIV ausgeblendet (der Platz frei) geworden ist.
Vereinfachtes Beispiel:
CSS
#infobox { margin:0 auto; width:170px; text-align:center; } .ibox { margin:2px auto; width:160px; text-align:left; background:#EEEE33; }
HTML:
<div id="infobox"> <div id="info123" class="ibox"> <p> kurzer Text oder Bild </p> </div> <div id="info124" class="ibox"> <p> kurzer Text oder Bild </p> </div> <div id="info125" class="ibox"> <p> kurzer Text oder Bild </p> </div> <div id="info126" class="ibox"> <p> kurzer Text oder Bild </p> </div> ... usw ... </div>
Bei Klick auf DIV id="info124" soll dieses ausgeblendet / unsichtbar werden.
aber es soll keine "Lücke" entstehen, sondern vom Inhalt darunter aufgefüllt.
Wie kann ich ein DIV durch Klick so ausblenden, dass die darunter befindlichen Inhalte sich an die Stelle verschieben, wo das (jetzt ausgeblendete) DIV vorher war (nach oben nach-rutschen)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ganz einfach, du setzt
.ibox{ display:inline-block; position:relative; float:left; }
Das sollte schon genügen
Edit: reihenfolge angepasst, kann bei manchen browsern sonst zu problemen führen. und IE7 und ältere browser können mit float nix anfangen
Beitrag zuletzt geändert: 17.6.2014 11:00:47 von sebulon -
Ich würde es z.B. so machen
beim klick das style auf "display:none;" setzen
<html> <head> <title>Beispiel</title> <meta charset="utf-8" /> <style type="text/css"> <!-- #infobox { margin:0 auto; width:170px; text-align:center; } .ibox { margin:2px auto; width:160px; text-align:left; background:#EEEE33; } .ibox2 {display:none;} =--> </style> <script type="text/javascript"> function ausblenden(element){ document.getElementById(element).className="ibox2"; } </script> </head> <body> <div id="infobox"> <div id="info123" class="ibox" onclick="ausblenden('info123')"> <p> kurzer Text oder Bild 123</p> </div> <div id="info124" class="ibox" onclick="ausblenden('info124')"> <p> kurzer Text oder Bild 124</p> </div> <div id="info125" class="ibox" onclick="ausblenden('info125')"> <p> kurzer Text oder Bild 125</p> </div> <div id="info126" class="ibox" onclick="ausblenden('info126')"> <p> kurzer Text oder Bild 126</p> </div> </div> </body> </html>
Beitrag zuletzt geändert: 26.6.2014 15:27:01 von robin -
ok, da jetzt schon ein vollständiger Vorschlag eingegangen ist und ich meinen alten beitrag nciht mehr editieren kann, würde ich eine Zeitgemäß saubere Methode mit jquery präsentieren wollen, robin, ich kopier mir einfach das raus was du schon geschrieben hast und bau es etwas um:
<html> <head> <title>Beispiel</title> <meta charset="utf-8" /> <style type="text/css"> #infobox { margin:0; width:170px; } .ibox { display:inline-block; position:relative; float:left; margin:0; padding: 0 5px; width:100%; text-align:left; background:#EEEE33; } .hidden { display: none; !important } </style> <script type="text/javascript" src="[Pfad_zu_jquery_framework]"> <script type="text/javascript"> $(document).ready(function(){ //Click-Event auf alle Elemente der Klasse ibox registrieren $(".ibox").click(function(event){ $(event.target.id).addClass("hidden"); }); }); </script> </head> <body> <div id="infobox"> <div id="info123" class="ibox"> <p> kurzer Text oder Bild 123</p> </div> <div id="info124" class="ibox"> <p> kurzer Text oder Bild 124</p> </div> <div id="info125" class="ibox"> <p> kurzer Text oder Bild 125</p> </div> <div id="info126" class="ibox"> <p> kurzer Text oder Bild 126</p> </div> </div> </body> </html>
zu den Styles:
Text-Align: Center bringt dir in der infobox gar nix, dafür müssten deine DIVs inline-Boxen sein, damit die sich nach der Definition richten. Das margin: auto würde eher was bringen, finde ich aber, ist eine Unschöne lösung. deswegen werf ich das auch mal raus.
Margin-Padding-Konflikt: wenn du beide Attribute in einem Verwendest, verursacht das in fast jedem browser andere side-Effekte, mit dem Resultat, dass es überall anders aussieht, nur nicht so, wie du es willst! deswegen entscheide dich für eines.
Das JavaScript wird nach beendigung des Seitenaufbaus ausgeführt, jquery sucht nach allen Elementen der KLasse iBox unf registriert die obige mini-Funktion bei Click-Event auf dieses Element. Vorsicht: es betrifft alle elemente ibox, also wenn woanders die teile gleich heißen, musst du den selektor spezifischer schreiben, wie zum Beispiel:
$("#infobox .ibox").click(function(event){ $(event.target.id).addClass("hidden"); });
Beitrag zuletzt geändert: 26.6.2014 16:00:26 von sebulon -
Hallo
einfach mit jQuery .click() Funktion und dann fadeOut()
$(document).ready(function(){ $( ".ibox" ).click(function() { var id = this.id; // ---- ID des Elements $("#" + id).css( "color", "red" ); // ---- Text-Farbe aendern $("#" + id).fadeOut("slow"); // ---- Element ausblenden }); });
hier das Beispiel http://jsfiddle.net/sLyTT/
dort wird bei Klick auf ein DIV bei diesem die Schrift auf rot gesetzt
und dieses angeklickte DIV wird ausgeblendet,
und die Anderen (darunter) rutschen nach oben .. keine Lücke
:=)
-
netwin schrieb:
Hallo
einfach mit jQuery .click() Funktion und dann fadeOut()
$(document).ready(function(){ $( ".ibox" ).click(function() { var id = this.id; // ---- ID des Elements $("#" + id).css( "color", "red" ); // ---- Text-Farbe aendern $("#" + id).fadeOut("slow"); // ---- Element ausblenden }); });
hier das Beispiel http://jsfiddle.net/sLyTT/
dort wird bei Klick auf ein DIV bei diesem die Schrift auf rot gesetzt
und dieses angeklickte DIV wird ausgeblendet,
und die Anderen (darunter) rutschen nach oben .. keine Lücke
:=)
this.id funktioniert nciht bei event-Ausgelösten funktionen, du musst über event.id ran... sonst bekommst du leer zurück -
hmmmm
mit event.target.id bekomme ich es nicht hin,
aber mit
geht esvar id = $(this).attr('id');
.... siehe: http://jsfiddle.net/sLyTT/1/
da ja die Klasse .ibox im gleichen DIV Tag steht wie die ID #info124
EDIT ... habs gefunden ....var id = event.currentTarget.id;
$(document).ready(function(){ $( ".ibox" ).click(function(event) { // var id = $(this).attr('id'); var id = event.currentTarget.id; $("#" + id).css( "color", "red" ); // ---- Text-Farbe aendern $("#" + id).fadeOut("slow"); // ---- Element ausblenden }); });
.... siehe: http://jsfiddle.net/sLyTT/2/
aber mit
gehts whl auchvar id = $(this).attr('id');
:=)
Beitrag zuletzt geändert: 26.6.2014 17:45:20 von netwin -
ja, ist etwas her, den Code zu posten, den ich hier schreibe, hab ich tagsüber keine Zeit... paar befehle versacken in den Erinnerungen, wenn man laufend zwischen 2 hochsprachen und 3 Scriptsprachen hin und her switcht... mein fehler...
Glaub die Problematik lag bei meiner Lösung auch an inneren Elementen, weil der dann den Handle von inenren Elementen bekommt, wenn zum beispiel ein Bild oder eine andere Struktur drin liegt... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
