Ron: Wie würdet ihr das umsetzen?

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.

http://www.abspacker.de/test

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

  1. 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

    1. 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

      1. '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

        1. 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

      2. 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

        1. 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

  2. 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

    1. 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.

      1. 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.