mehrere DIVs mit gleichen Prefix ausblenden ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
array
ausblenden
beispiel
boxen
browser
code
datei
funktion
http
index
info
inhalt
position
start
string
suche
test
url
verschieben
vordergrund
-
Hallo
ich habe auf einer Seite die Möglichkeit, dass man sich
verschiedenen Info-Boxen (DIVs) ein-/aus- belnden kann. (öffnen / schließen)
Aber man muss jede eingeblendete DIV-Box einzeln (per Klick) wieder ausblenden (schließen)
Code-Beispiel:
<html> <head> <title>Homepage Titel</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> //<![CDATA[ function einblenden(boxid) { document.getElementById(boxid).style.display = "block"; } function ausblenden(boxid) { document.getElementById(boxid).style.display = "none"; } // ]]> </script> <style type="text/css"> <!-- .boxstyle1 { display:none; width:300px; height:200px; margin:0 auto; padding:10px; text-align:left; background:#FFFFCC; border:2px solid #AAAAAA; --> </style> </head> <body style="color:#000000; background:#EFEFEF;"> <div id="wrapper" style="text-align:center;"> <br> <br> <br> <p>OPEN: <a href="javascript:einblenden('info_box1');">DIV: <strong>info_box1</strong> einblenden</a> (öffnen) </p> <p>OPEN: <a href="javascript:einblenden('info_box2');">DIV: <strong>info_box2</strong> einblenden</a> (öffnen) </p> <p>OPEN: <a href="javascript:einblenden('info_box3');">DIV: <strong>info_box3</strong> einblenden</a> (öffnen) </p> <br> <br> <br> <div id="info_box1" class="boxstyle1" style="position:absolute; top:190px; left:50px;"> <h2>INFO Box Nr. 1</h2> <p>Hier ist der Inhalt .... </p> <p>CLOSE: <a href="javascript:ausblenden('info_box1');">DIV: <strong>info_box1</strong> ausblenden</a> (schließen) </p> <p>bla blabla ...</p> </div> <div id="info_box2" class="boxstyle1" style="position:absolute; top:190px; left:400px;"> <h2>INFO Box Nr. 2</h2> <p>Hier ist der Inhalt .... </p> <p>CLOSE: <a href="javascript:ausblenden('info_box2');">DIV: <strong>info_box2</strong> ausblenden</a> (schließen) </p> <p>bla blabla ...</p> </div> <div id="info_box3" class="boxstyle1" style="position:absolute; top:190px; left:750px;"> <h2>INFO Box Nr. 3</h2> <p>Hier ist der Inhalt .... </p> <p>CLOSE: <a href="javascript:ausblenden('info_box3');">DIV: <strong>box3</strong> ausblenden</a> (schließen) </p> <p>bla blabla ...</p> </div> <br> <br> <br> </div> </body> </html>
Ich suche jetzt eine Möglichkeit, wie ich mit einem einzigen Klick
alle DIVs (die ein bestimmtes Prefix haben) ausblenden (schließen) kann.
also es gibt nicht nur info_box<NR> sondern auch user_box<ID>
wie muss eine JavaScript function() sein, damit ich per 1x Klick
alle sichtbaren Boxen mit dem Prefix 'info_' ausblenden will
function closeboxes(prefix) { // wie alle DIVs mit dem 'prefix' in der ID ausblenden .... ? }
irgendwie mit Suche / Liste / Schleife mit allen IDs, die den 'prefix' als Teilstring haben ?
und auch noch eine function(), die auch einfach alle (egal welcher Prefix) ausblenden kann
... aber wie geht das .. alle sichbaren Boxen / bzw. nur die mit Prefix ... finden ... und ausblenden
wenn es überhaupt so machbar ist ??
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Machbar ist so etwas definitv. Die vorgehensweise ist ganz einfach: Du gibst jedem div, das du ausblenden willst, eine eigene Klasse (z. B. infobox) und dann sagst du, dass jedes div mit dieser Klasse ausgeblendet werden soll, bspw. mit jQuery.
Die Umsetzung bleibt dir überlassen ;)
Lg
mator -
mator-kaleen schrieb:
.. oder man überlässt den Fragenden nicht sich selbst, und gibt ganz einfach mal ein Scriptbeispiel, welches weder Klassenabhängig ist, noch jQuery braucht. ;)
Machbar ist so etwas definitv. Die vorgehensweise ist ganz einfach: Du gibst jedem div, das du ausblenden willst, eine eigene Klasse (z. B. infobox) und dann sagst du, dass jedes div mit dieser Klasse ausgeblendet werden soll, bspw. mit jQuery.
Die Umsetzung bleibt dir überlassen ;)
wmag schrieb:
Normalerweise wird soetwas mit Arrays realisiert, welche dann beliebig erweiterbar sind.
Ich suche jetzt eine Möglichkeit, wie ich mit einem einzigen Klick
alle DIVs (die ein bestimmtes Prefix haben) ausblenden (schließen) kann.
also es gibt nicht nur info_box<NR> sondern auch user_box<ID>
[...]
irgendwie mit Suche / Liste / Schleife mit allen IDs, die den 'prefix' als Teilstring haben ?
und auch noch eine function(), die auch einfach alle (egal welcher Prefix) ausblenden kann
Dein Beispiel mal in etwas modifizierter Form:
http://menschle.lima-city.de/testkram_fuer_bla/wmag/close_all_id_boxes.html
Den Quelltext kann ich in diesem Beitrag leider aufgrund der Zeichenbeschränkung noch nicht posten. -
mator-kaleen schrieb:
Mit jquery lässt sich das noch viel einfacher lösen:
Die vorgehensweise ist ganz einfach: Du gibst jedem div, das du ausblenden willst, eine eigene Klasse (z. B. infobox) und dann sagst du, dass jedes div mit dieser Klasse ausgeblendet werden soll, bspw. mit jQuery.$('[id^="info_box"]').hide(); -
jo, Danke!
also Klasse als Identifier ist denke ich eher nicht geeignet, hatte ich auch schon dran gedacht,
aber es gibt ja keinen Selector für ne Klasse ... document.getElementByClass()
sondern "nur" für IDs: document.getElementById() ... daher ja die Idee mit Prefix in der ID
Das mit dem Array ist ne gute Idee, vorallem die Box-Namen fortlaufende Nummern sind
und wenn die Box-Namen irgendwelche Zahlen / Strings sind,
dann kann ich ja auch das Array entsprechend (vorher) zusammen bauen
<div id="info_box_1234"> ... </div> <div id="info_box_3427"> ... </div> <div id="info_box_test2"> ... </div>
dann wohl so anfangen:
info_box_data = new Array( '1234', '3427', 'test2' );
dann als Funktion dann: ... Value von
... für Zusammenbau: ID-Stringinfo_box_data[i]
function alle_info_ausblenden() { for (i = 1; i < info_box_data.length + 1; i++) { document.getElementById('info_box_' + info_box_data[i] + '').style.display = "none"; } }
... und Zusammen mit den Prefix-String (hier: 'info') mit in Funktions-Aufruf als Parameter
function alle_info_ausblenden(prefix) { for (i = 1; i < info_box_data.length + 1; i++) { document.getElementById('' + prefix + '_box_' + info_box_data[i] + '').style.display = "none"; } }
... ich hoffe ich hab das jetzt richtig :)
denn ein bischen verwirrt war ich, weil Du aus<div id="info_box_1"> ... </div>
dann
in Deinem Beispiel gemacht hast<div id="info_box[1]"> ... </div>
... was ja sehr nach Array "aussieht", aber dann im JS doch quasi als "String" behandelt wird.
es sollte doch genauso als String mit _ (Unterstrich) funktionieren (für Zusammenbau: ID-String)
Das mit jquery sieht ja wirklich sehr viel einfachr aus :)
mit jQuery habe ich noch keine Erfahrung, nur mal kurz angeschaut, und schon was gefunden:
damit könnte man dann wohl auch noch eine Animation (Slide In/Out, Fade In/Out) machen
... aber kann jeder Browser mit jQuery, oder wie "mächtig" ist das, frisst das viel Performance ?
weiter muss ich mir noch was dazu überlegen,
wie ich die einzelnen Boxen auch "überlappend" machen kann,
und bei Klick die "aktivierte" Box in den Vordergrund stellen ... z-index ... wahrscheinlich
oder gleich so, dass man sie selbst frei am Bildschirm verschieben kann,
weil diese sonst (wie jetzt mit position:absolute; top/left) anderen Content der Seite überdecken,
der dann eben nicht mehr sichtbar ist, weil ja die Box an der Stelle darüber eingeblendet wurde ...
naja, erstmal Danke für die guten Anregungen ... ein/aus-blenden mit Array oder mit jQuery
-
wmag schrieb:
*öhm* nö?
denn ein bischen verwirrt war ich, weil Du aus<div id="info_box_1"> ... </div>
dann
in Deinem Beispiel gemacht hast<div id="info_box[1]"> ... </div>
... was ja sehr nach Array "aussieht", aber dann im JS doch quasi als "String" behandelt wird.
Das JS baut mit Hilfe von Strings durch eine Funktion das abzufragende Array zusammen.
Das mit jquery sieht ja wirklich sehr viel einfachr aus :)
Nicht jeder Browser kann mit jQuery, aber die meisten schon. Es ist sehr mächtig, und frisst in gängigen Systemen nicht viel Performance.
[...]
... aber kann jeder Browser mit jQuery, oder wie "mächtig" ist das, frisst das viel Performance ?
weiter muss ich mir noch was dazu überlegen,
Das geht automatisch: Die jeweils folgenden Boxen mit gleichem oder keinem z-index überlappen die vorherigen Boxen.
wie ich die einzelnen Boxen auch "überlappend" machen kann,
und bei Klick die "aktivierte" Box in den Vordergrund stellen ... z-index ... wahrscheinlich
Oder beides.
oder gleich so, dass man sie selbst frei am Bildschirm verschieben kann
Hier mal das JavaScript der Boxen in neuer Fassung:
var i=0, d=document, info_box = new Array(3), user_box = new Array(3); // infos/user ein/ausblenden function go(prefix,divShow){d.getElementById(prefix+'_box[' + i + ']').style.display=(divShow)?'block':'none';} function ShowHide(prefix,divShow){ if(prefix=='info'){for(i=1;i<info_box.length+1;i++)go(prefix,divShow)}else{for(i=1;i<user_box.length+1;i++)go(prefix,divShow)}} // ein/ausblenden einzelner Div's function showDiv(boxid,divShow){d.getElementById(boxid).style.display=(divShow)?'block':'none';}^^ Thats all.
Beispiel für das ein/ausblenden aller Info-Boxen:
<a href="javascript:ShowHide('info',1);"> <strong>Alle Infos</strong> einblenden</a> <a href="javascript:ShowHide('info',0);"> <strong>Alle Infos</strong> ausblenden</a>
Und alles zusammen (ein/ausblenden, verschieben, in Vordergrund holen) sieht dann so aus.
Viel Spaß beim fummeln.
Beitrag zuletzt geändert: 9.11.2012 17:44:16 von menschle -
Ich würde es mit CSS und class machen!
Javascript ist zum div ausblenden nicht so gut, da nicht jeder JS aktiviert hat!
(<div class="Hide">)
Hier eine Code für einen Spoiler
Du muss den Code nur ein wenig umschreiben!
http://pc-wunder.de/spoiler.php
Du kannst aber auch so etwas nehmen!
Unterstützt aber nur Google Chrome, da Google Chrome der modernste Browser ist
<details><summary>Spoiler</summary>PC-Wunder.de ist echt cool</details>
Beitrag zuletzt geändert: 9.11.2012 19:59:20 von hpage -
hpage schrieb:
Damit der TE nicht von dem grauenhaften Code und allen darin enthaltenen Unnötigkeiten verwirrt wird verweise ich auf den Thread, wo dieser Codeschnipsel herkommt: Link.
Ich würde es mit CSS und class machen!
Javascript ist zum div ausblenden nicht so gut, da nicht jeder JS aktiviert hat!
(<div class="Hide">)
Hier eine Code für einen Spoiler
Du muss den Code nur ein wenig umschreiben!
http://pc-wunder.de/spoiler.php
Wichtig hierbei ist aber, dass immer nur ein einziges div gleichzeitig ausgeklappt werden kann. Gruppenweises Ein- und Ausblenden kannst du hiermit nicht erreichen (was aber der TE haben möchte).
Beitrag zuletzt geändert: 10.11.2012 9:16:20 von hackyourlife -
Mal ehrlich
php-test2hpage,
Dein "Text" kann doch nun wirklich nicht als neuer Beitrag durchgehen, oder?
hpage schrieb:
Wie Du es machen würdest, mag ja schön und gut und annehmbar für Dich sein, hilft hier jedoch nicht weiter, denn:
Ich würde es mit CSS und class machen!
Javascript ist zum div ausblenden nicht so gut, da nicht jeder JS aktiviert hat!
Wer Javascript nicht aktiviert hat, bekommt erst gar keine Info-Boxen zu sehen - also müssen auch keine div´s ausgeblendet werden. Das wäre allenfalls für eine <noscript> -Lösung gut - worum es jedoch nicht ging - und was auch mit großem Aufwand und viel Quelltext verbunden wäre.
Hier eine Code für einen Spoiler
Also die Besucher einer Webseite zu einem bestimmten Browser nötigen, damit sie eine CSS-Lösung zu sehen bekommen, welche der TE gar nicht erfragte?
Du muss den Code nur ein wenig umschreiben!
[...]
Du kannst aber auch so etwas nehmen!
Unterstützt aber nur Google Chrome, da Google Chrome der modernste Browser ist
Nochmal zusammengefasst:
Die Info-Boxen sollen per Präfix Gruppenweise ansprechbar (in diesem Fall ein/ausblendbar) sein, und sich darüber hinaus einzeln verschieben und fokussieren (in den Vordergrund holen) lassen.
Vielleicht zauberst Du uns aber auch eine echte CSS-Lösung, welche dann alle oben genannten Bedingungen ohne Javascript erfüllt? Frage ist rhetorisch gemeint.
Beitrag zuletzt geändert: 10.11.2012 19:25:37 von menschle -
menschle schrieb:
Und alles zusammen (ein/ausblenden, verschieben, in Vordergrund holen) sieht dann so aus.
Viel Spaß beim fummeln.
Vielen Dank @menschle für das tolle Beispiel,
bei Dir funktioniert es auch
ABER wenn ich mir die Codes (der 4 Dateien: 1x .html und 3x .js) kopiere
und 1 zu 1 auf meinem Webspace teste, dann klappt dort nicht Alles ???? ... siehe: mein TEST hier
die DIVs einzeln einblenden und ausblenden fuktioniert immer
und ... alle info DIVs ein-/ oder ausblenden geht auch
aber - alle user DIVs ein-/ oder ausblenden funktioniert nicht ?
Auch bei "Alle DIVs einblenden" werden bei mir nur die info DIVs eingeblendet ?
Wenn ich die user DIVs einzeln eingeblendet habe, kann ich sie auch nur einzeln wieder schließen,
... auch wenn ich "Alle DIVs ausblenden" machen, oder "Alle user DIVs ausblenden" klicke,
dann bleiben die user DIVs immer sichtbar ?!? .. kann die user DIVs nur einzeln ein-/aus-blenden ???
Ich habe Dein Beispiel sieht dann so aus doch 1 zu 1 übernommen,
...... aber warum geht es dann bei mein TEST hier (nach 1 zu 1 copy+paste) zum Teil nicht ?!
hääää? ... ich nix verstehen .. gleicher Code, gleicher Browser aber unterschiedliches Verhalten
Beitrag zuletzt geändert: 10.11.2012 10:48:53 von wmag -
wmag schrieb:
^^ Ist nicht 1:1 kopiert.
Vielen Dank @menschle für das tolle Beispiel,
bei Dir funktioniert es auch
ABER wenn ich mir die Codes (der 4 Dateien: 1x .html und 3x .js) kopiere
und 1 zu 1 auf meinem Webspace teste, dann klappt dort nicht Alles ????
Ich habe Dein Beispiel sieht dann so aus doch 1 zu 1 übernommen,
In dem ShowDiv.js auf Deiner Seite ist in Zeile 9, Spalte 85 ein kleines Fehlerteufelchen.
...... aber warum geht es dann bei mein TEST hier (nach 1 zu 1 copy+paste) zum Teil nicht ?!
Dort steht..
else{for(i=1;i > user_box.length+1;i++)
> (Größer-als-Zeichen)
.. was nicht stimmen kann.
i hat den Startwert 1, und kann in der Schleife folglich nicht größer sein, als die Länge des Array mit dem Wert 3+1 (4).
Richtig ist es so:
else{for(i=1;i < user_box.length+1;i++)
< (Kleiner-als-Zeichen)
€dit:
Ach, was rede ich..
Habe das ShowDiv.js nochmal etwas ausgedünnt und übersichtlicher gestaltet. Nun lassen sich ganz leicht noch neue Präfixe hinzufügen.
Download Komplettpaket
;)
Beitrag zuletzt geändert: 10.11.2012 13:59:32 von menschle -
OK, mit der "neuen" ShowDiv.js funktioniert es
aber komisch, ich hatte den Code der "alten" ShowDiv.js
per copy+pase einfach 1 zu 1 kopiert, und nichts daran geändert
(außer eine Leerzeile oben und unten mit rein, was aber ja nichts ausmachen kann)
naja, egal wie und warum auch immer das < zu einem > wurde,
... jetzt geht es mit der "neuen" ShowDiv.js
und die eine Funktion aus ZIndex.js könnte man doch acuch
oben in die DragDivBox.js mit rein bauen, dann sind es nur 2 .js Dateien
finde es bischen übertrieben für die kleine Zindex-Funktion eine eigene .js Datei zu haben
Eine Kleinigkeit interessiert mich noch,
... wenn man eine DIV-Box verschoben hat, dann ausbledet und dann wieder einblendet,
erscheint sie wieder an der Position, wo man sie zuletzt hingeschoben hatte
Wunsch wäre also optional (weiterer Parameter), der (wenn = 1 / true) ... bewirkt,
dass beim wieder-einblenden die Box zurück an Ihrer Standard-Position erscheint
... geht warhscheinlich auch mit d.getElementById(boxid).style. ....
oder kann man die Position irgendwie anders einfach Reset (zu Start-Position) machen ?
Danke !! -
wmag schrieb:
Ja, am Einfachsten ist es, wenn du top und left wieder auf den Anfangswert setzt… den Anfangswert musst du dir dazu aber zuerst mal irgendwo so speichern, dass du ihn später wieder Abfragen kannst (für jedes Element).
... geht warhscheinlich auch mit d.getElementById(boxid).style. ....
oder kann man die Position irgendwie anders einfach Reset (zu Start-Position) machen ?
Beitrag zuletzt geändert: 10.11.2012 15:24:26 von hackyourlife -
wmag schrieb:
Es lassen sich durchaus auch alle JavaScripte zu einem JavaScript zusammenfassen - sowohl innerhalb der HTML, als auch extern.
und die eine Funktion aus ZIndex.js könnte man doch acuch
oben in die DragDivBox.js mit rein bauen, dann sind es nur 2 .js Dateien
finde es bischen übertrieben für die kleine Zindex-Funktion eine eigene .js Datei zu haben
Die Wahl der einzelnen, externen Scripte bietet lediglich den Vorteil des besser Verstehens, und auch dass je nach Bedarf auf einzelne Funktionen "auf die schnelle" verzichtet werden kann.
... wenn man eine DIV-Box verschoben hat, dann ausbledet und dann wieder einblendet,
Beides ( bzw. alles 3 :P ) wäre möglich.
erscheint sie wieder an der Position, wo man sie zuletzt hingeschoben hatte
Wunsch wäre also optional (weiterer Parameter), der (wenn = 1 / true) ... bewirkt,
dass beim wieder-einblenden die Box zurück an Ihrer Standard-Position erscheint
... geht warhscheinlich auch mit d.getElementById(boxid).style. ....
oder kann man die Position irgendwie anders einfach Reset (zu Start-Position) machen ?
Die dritte Möglichkeit wäre, es den User selbst entscheiden zu lassen.
(Bspw. die Auswahl des Users dann als Cookie speichern o.ä.) -
Für solche Ein-/Ausblendgeschichten finde ich angular recht interessant.
Hier mal die anfängliche Fragestellung umgesetzt.
Edit: ach her je, die Codehervorhebung lässt doch etwas zu wünschen übrig, daher:http://pastebin.com/9aVBSLRu
Beitrag zuletzt geändert: 10.11.2012 20:26:36 von milchreis -
→ gemeldet von XXX
das artet doch nun in diskussionen aus. ich bitte darum, dass die letzten beiträge (inkl. meine antworten) gelöscht werden, weil sie nicht weiter förderlich zum thema sind.
Gemeint sind die Beiträge, ab denen kein wirklich nennenswerter Mehrwert zur eigentlichen Fragestellung und der Problemlösung zu erkennen ist. Deshalb wird der Thread jetzt geschlossen, weil ausreichend Lösungen bekannt sind und die Diskussion zu weit von der eigentlichen Fragestellung abwich.
MfG Stephan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
