Wie würdet ihr das umsetzen?
Ron
- javascript
Hallo,
ich muss nach vorgaben etwas umsetzen.
Habe das auch getan und stehe vor einem Problem.
Der Safari macht nicht das was ich will.
Desweiteren bin ich mir auch sehr unsicher ob mein Lösungsweg überhaupt der richtige ist.
Deshalb auch meine Frage wie ihr das umsetzen würdet.
Ich habe ne Beispieldatei die man sich anschauen kann.
Vorgabe ist folgende:
Auf der Seite werden verschiedene Bildersammlungen (Vorschaubilder) gezeigt. Pro Headline eine Bildersammlungen. Die Bildersammlung kann aus bis zu 15 Bildern bestehen. (Später per CMS)
Wenn man auf die Seite kommt soll pro Headline nur die erste Reihe angezeigt werden. Wenn man rechts auf das plus klickt sollen alle weiteren zur Bildersammlung gehörenden Bilder angezeigt werden.
Und bei Minus wieder nur eine.
Gelöst habe ich das so:
Alle Bilder einer Bildersammlung befinden sich in einem Div welches eine Höhe einer Reihe besitzt. Es wird also nur eine Reihe angezeigt.
Bei Klick auf das Plus wird die Höhe des Divs geändert so das 2 oder mehr Reihen angezeigt werden.
Bei Klick auf das Minus wird die Höhe wieder auf die Höhe einer Reihe zurückgesetzt.
Ich weiss nicht, ob das die elegante Lösung ist, doch funktioniert sie auf dem PC Firefox, IE, Opera / Mac Firefox / Opera.
Der Safari zeigt zwar auch nur die erste Reihe an, lässt aber den Platz der nicht sichtbaren Reihen frei.
Vielleicht weiss aber jemand wie ich anders heran gehen könnte, da meine Lösung auch den Nachteil hat, das eine Höhe mitgegeben werden muss. Ich hätte es lieber, das das Div einfach alles anzeigt. Soviel wie Bider eben drin sind.
Der Code ist ja auf meiner Beispielseite zu finden...
Ich hoffe jemand kann mir helfen und mich aud den eichtigen Weg schicken....
Gruß Ron
Hi Ron,
ich denke, wenn du anstelle http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility@title=visibility = "hidden " / "visible" die Eigenschaft
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display = "block" / "none" verwendest, sollte dein Problem gelöst sein.
Grüße, dicon
Hallo dicon,
ich verwende ja kein visibility...
Jedenfalls nicht bei der Ebene um die es geht...
Die Ebene um die es geht ist ja die ganze Zeit sichtbar.
ich tue nur mit:
document.getElementById(welches).style.height=
den sichtbaren Bereich verändern.
Und der Safari macht eben Probleme damit das er für den unsichtbaren Bereich Platz lässt...
mit clip habe ich es auch schon versucht...
ging auch nicht..
Du findest meinen Ansatz auch richtig das auf diese art zu machen?
Noch ne Idee?
Eine äjnliche Antwort habe ich dem anderen Poster auch gegeben.
Also nicht wundern.
Komisch das ihr beide fast die gleiche Antwort gegeben habt...
Gruß Ron
Hi Ron,
ich denke, wenn du anstelle http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility@title=visibility = "hidden " / "visible" die Eigenschaft
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display = "block" / "none" verwendest, sollte dein Problem gelöst sein.Grüße, dicon
'n Abend Ron,
Eine äjnliche Antwort habe ich dem anderen Poster auch gegeben.
Also nicht wundern.
Wunder mich doch?! Deine Antworten sind für jeden sichtbar... egal, wem du
geantwortet hast... einfach mal ganz oben auf dieser Seite auf z.b. "Nested-Ansicht"
clicken.
ich verwende ja kein visibility...
ok, mein Fehler. Hab mir vorhin den Quellcode nicht genau angeschaut. "visibility"
hast du für die auf/zu-Button verwendet. Aber selbst dafür tät ich die dislplay-Eigenschaft
nehmen ;o)
document.getElementById(welches).style.height=
Was mir auf die schnelle aufgefallen ist: im Javascript würde ich in die Zeilen
à la "if(reihen=="") {reihen=192;}" auf jeden Fall noch px dazu setzen, also
{reihen = "AAApx";}. Probiers mal aus, ggf. ist das schon die Lösung. Glaub es
allerdings nicht.
Du findest meinen Ansatz auch richtig das auf diese art zu machen?
Ich find den Aufbau etwas unglücklich/kompliziert. Die Bildsammlung in einer
Mischung aus Tabelle und eingebetteten DIVs... Warum? Warum nicht das ein
oder(!) das andere? z.b. pro Sammlung ein umschließendes DIV mit zunächst
96px Höhe und dorthinein die Tabelle mit den Bildern direkt in den Zellen -
<td><img src=".../></td>. Dann änderst Du nur die Höhe des umgebenden DIVs.
Muss jetzt leider los... wenn der Syntax-Vorschlag von oben nichts brint (px)
oder jemand anderes einen konkreten Tip posten, machen wir morgen weiter.
Grüße, dicon
Hallo Dicon,
danke für deine Antwort.
Ich habe es hinbekommen.
Deine Hinweis wegen Tabelle hat geholfen.
Habe die Tabelle rausgeschmissen und durch divs ersetzt.
UNd selbst für das Problem mit der Höhe, habe ich ne elegantere Lösung gefunden.
Ich wusste nicht das .style.height="auto" auch funktioniert...
http://www.abspacker.de/test/index2.php
Jedenfalls vielen Dank für deine Antwort...
Gruß Ron
Ich find den Aufbau etwas unglücklich/kompliziert. Die Bildsammlung in einer
Mischung aus Tabelle und eingebetteten DIVs... Warum? Warum nicht das ein
oder(!) das andere? z.b. pro Sammlung ein umschließendes DIV mit zunächst
96px Höhe und dorthinein die Tabelle mit den Bildern direkt in den Zellen -
<td><img src=".../></td>. Dann änderst Du nur die Höhe des umgebenden DIVs.Muss jetzt leider los... wenn der Syntax-Vorschlag von oben nichts brint (px)
oder jemand anderes einen konkreten Tip posten, machen wir morgen weiter.Grüße, dicon
Hallo,
Da JavaScript hier ohnehin nötig zu sein scheint, würde ich mehr davon benutzen. Die eigentlich immer gleich aufgebauten HTML-Blöcke (div class=bildleiste) schreien geradezu nach einer dynamischen Erzeugung per Script.
Statt im Script nur die Eigenschaft .style.height dynamisch zu ändern, könnte es durch Änderung des ganzen Div-Blocks per Zuweisung .innerHTML = htmlBildleiste(bildLeisteNr) besser funktionieren.
Die Funktion htmlBildleiste() müsstest du dir halt basteln. Wenn man JavaScript gut kennt, kann das sehr elegant mit relativ wenig Code erledigt werden.
Gruß, Don P
Hallo,
danke für deine Ausführung.
Das ganze über .innerhtml zu machen hatte ich auch schon gedacht.
Schien mir aber fast noch uneleganter.
Und wollte ich eigentlich vermeiden.
Hab das jetzt denke ich auch ohne hinbekommen.
http://www.abspacker.de/test/index2.php
Hab die Tabelle rausgeschmissen, wie der andere Poster auch angemerkt hatte und sie durch divs ersetzt.
HAb auch rausgefunden das ich anstatt eine feste höhe bei vergrösserung zu geben einfach style.height="auto" verwenden kann.
So wird automatisch alles angezeigt, ohne das ich für jede sammlung angeben muss wieviele reihen (höhe in px) sie braucht.
Werde auf dieser Basis weiter machen.
Vielen Dank für deine Antwort...
Gruß Ron
Hallo,
Da JavaScript hier ohnehin nötig zu sein scheint, würde ich mehr davon benutzen. Die eigentlich immer gleich aufgebauten HTML-Blöcke (div class=bildleiste) schreien geradezu nach einer dynamischen Erzeugung per Script.
Statt im Script nur die Eigenschaft .style.height dynamisch zu ändern, könnte es durch Änderung des ganzen Div-Blocks per Zuweisung .innerHTML = htmlBildleiste(bildLeisteNr) besser funktionieren.
Die Funktion htmlBildleiste() müsstest du dir halt basteln. Wenn man JavaScript gut kennt, kann das sehr elegant mit relativ wenig Code erledigt werden.
Gruß, Don P
Hallo Ron,
http://validator.w3.org/check?uri=http://www.abspacker.de/test/
vor allem die ersten drei Fehler sehe ich als kritisch an. Ohne doctype und mit ungültigem HTML muss man immer mit Überraschungen rechnen. Die fehlenden "ALT" solltest du natürlich auch einfügen, aber die sind in diesem Fall (glaube ich) nicht so kritisch.
Übrigens, was macht der Safari denn?
Gruß, Jürgen
Edit:
Übrigens, was macht der Safari denn?
hab es jetzt gelesen. Satz kann als gelöscht angesehen werden.
Gruß, Jürgen
PS Ich würde das Ein/Ausblenden auch mit display = "" bzw. "none" machen.
Hallo Jürgen,
ich verwende ja kein visibility...
Jedenfalls nicht bei der Ebene um die es geht...
Die Ebene um die es geht ist ja die ganze Zeit sichtbar.
ich tue nur mit:
document.getElementById(welches).style.height=
den sichtbaren Bereich verändern.
Und der Safari macht eben Probleme damit das er für den unsichtbaren Bereich Platz lässt...
Du findest meinen Ansatz auch richtig das auf diese art zu machen?
Oder jemand anderes?
Noch ne Idee?
Gruß Ron
Edit:
Übrigens, was macht der Safari denn?
hab es jetzt gelesen. Satz kann als gelöscht angesehen werden.
Gruß, Jürgen
PS Ich würde das Ein/Ausblenden auch mit display = "" bzw. "none" machen.