Inhalt in DIV mit Pfeilicons scrollbar machen

[Pit]

Hallo Forum,

nachdem es mir gelungen ist, eine Flexbox zu gestalten (hab ich die korrekt gemacht?), würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

Alle Beispiele im Netz sind aber an absolute Pixelwerte gebunden. Ich hätte es aber gerne, wenn sich die Gesamtbreite der beiden DIVs an der Viewportbreite orientiert und hier das rechte DIV vorgibt, wieviel Platz dem linken DIV übrig bleibt. Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

Hintergrund (für die, die es interessiert): In das linke DIV soll ein Suchfeld bzw. nach der Suche dann die verlinkten Suchergebnisse hinein. Der Rest des Viewports ist für den Inhalt, der u.a. dann über das Klicken der verlinkten Suchergebnisse erscheinen soll.

Geht das oder anders gefragt, wie macht man das?

Pit

[Gunnar Bittersmann]

@@Pit

Hallo Forum,

nachdem es mir gelungen ist, eine Flexbox zu gestalten (hab ich die korrekt gemacht?)

Wozu das <div id='gesamt'>? Das Ding gruppiert nichts; ist also überflüssig. footer kann die Flexbox sein. Das sagte ich doch schon.

Und display: -webkit-flex; /* Safari */ ist wohl ein verspäteter Aprilscherz?

würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

Ein Sehschlitz also. Und der soll nutzerfreundlich sein?

Es ist in den seltensten Fällen eine gute Idee, vohandene Browserfunktionalität mit eigenen UI-Elementen nachbauen zu wollen. Browser bieten bei Bedarf Scrollbalken an (overflow: auto).

Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

Was genau spricht gegen die browsereigenen Scrollbalken?

Geht das oder anders gefragt, wie macht man das?

Auf keinen Fall mit <div id="leftArrow">/<div id="rightArrow">.

div sind keine interaktiven Elemente – nicht per Tastatur bedienbar, um nur einen Makel zu nenenen. Wenn du interkative Elemente willst, willst du buttons.

LLAP 🖖

[Pit]

Hallo Gunnar,

nachdem es mir gelungen ist, eine Flexbox zu gestalten (hab ich die korrekt gemacht?)

Wozu das <div id='gesamt'>? Das Ding gruppiert nichts; ist also überflüssig. footer kann die Flexbox sein. Das sagte ich doch schon.

Und display: -webkit-flex; /* Safari */ ist wohl ein verspäteter Aprilscherz?

Nun sei doch nicht so streng mit mir. Woher soll ich denn wissen, ob die Safarigeschichte noch aktuell ist, wenn ich ein Tutorium lese?

würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

Ein Sehschlitz also. Und der soll nutzerfreundlich sein?

Ich finde schon und da ich derjenige bin, der es vor dem Nutzer verantworten muss... Wird doch bei Photoslidern permanent so gemacht, oder? Aber vielleicht kann ich mich auch mit einem Scrollbalken anfreunden, muss mal drüber nachdenken.

Es ist in den seltensten Fällen eine gute Idee, vohandene Browserfunktionalität mit eigenen UI-Elementen nachbauen zu wollen. Browser bieten bei Bedarf Scrollbalken an (overflow: auto).

Habe ich übrigens versucht und es ging nicht. Vielleicht habe ich etwas wie Nowrap vergessen?

Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

Was genau spricht gegen die browsereigenen Scrollbalken?

Eigentlich nur, dass er mir vertikalen Platz wegnimmt, mehr nicht.

Geht das oder anders gefragt, wie macht man das?

Auf keinen Fall mit <div id="leftArrow">/<div id="rightArrow">.

Nicht mein code, sagte ich ja.

div sind keine interaktiven Elemente – nicht per Tastatur bedienbar, um nur einen Makel zu nenenen. Wenn du interkative Elemente willst, willst du buttons.

LLAP

Pit

[Pit]

Habe ich übrigens versucht und es ging nicht. Vielleicht habe ich etwas wie Nowrap vergessen?

Nun habe ich wieder versucht, aber zb. Auf meinEM Androiden 4.1.2 wird gar kein Scrollbalken angezeigt, was wieder für die left−right Buttons spricht, oder ?

Pit

Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

Was genau spricht gegen die browsereigenen Scrollbalken?

Eigentlich nur, dass er mir vertikalen Platz wegnimmt, mehr nicht.

Geht das oder anders gefragt, wie macht man das?

Auf keinen Fall mit <div id="leftArrow">/<div id="rightArrow">.

Nicht mein code, sagte ich ja.

div sind keine interaktiven Elemente – nicht per Tastatur bedienbar, um nur einen Makel zu nenenen. Wenn du interkative Elemente willst, willst du buttons.

LLAP

Pit

[Matthias Apsel]

Hallo Pit,

Nun habe ich wieder versucht, aber zb. Auf meinEM Androiden 4.1.2 wird gar kein Scrollbalken angezeigt, was wieder für die left−right Buttons spricht, oder ?

Aber der Inhalt ist trotzdem scrollbar? Auf vielen mobilen Geräten werden gar keine oder nur sehr schmale, nur bei Bedarf erscheinende Scrollbalken verwendet. Und das ist auch gut so.

Alles, was du oder ich oder auch Gunnar da nachbauen können, wäre nur ein Nachbau und der ist immer schlechter als das Original, wobei es das Original gar nicht gibt.

Mit overflow verwendest du die Scrollbalken des Systems auch dann noch, wenn Designer sie ändern.

Bis demnächst
Matthias

[Auge]

Hallo

Und display: -webkit-flex; /* Safari */ ist wohl ein verspäteter Aprilscherz?

Nun sei doch nicht so streng mit mir. Woher soll ich denn wissen, ob die Safarigeschichte noch aktuell ist, wenn ich ein Tutorium lese?

Indem du lernst, mit Can I Use? umzugehen („aufgeschlagene“ Seite: Flexbox). Diese Seite wirst du bei Experimenten immer geöffnet haben und du wirst sie befragen, um zu ermitteln, in welchen Browserversionen Feature X unter welchen weiteren Voraussetzungen (z.B. eben Vendor-Präfixe) funktioniert.

Tschö, Auge

[Henry]

Hallo Auge,

Indem du lernst, mit Can I Use? umzugehen

Hilfreich aber nicht 100% verlässlich.

Gruss
Henry

[Auge]

Hallo

Indem du lernst, mit Can I Use? umzugehen

Hilfreich aber nicht 100% verlässlich.

Ja und? Was ist schon 100%-ig verlässlich?

Im Übrigen, wenn ich deine Postings in dem von dir verlinkten Thread lese, habe ich den Eindruck, dass du die mehrfachen Hinweise auf die Fußnoten tapfer ignoriert hast. Du hast dich ja auch nach diesen Hinweisen immer wieder auf die „angebliche“ Unterstützung von Hyphen durch den Chrome kapriziert, ohne mit irgendeinem Wort auf die in den Anmerkungen und der Fußnote genannten Einschränkungen einzugehen.

Ob Can I Use? speziell bei deinem Problem nicht verlässlich ist, lässt sich anhand deines Threads mMn nicht mit Sicherheit sagen.

Tschö, Auge

[Henry]

Hallo Auge,

Ja und? Was ist schon 100%-ig verlässlich?

war auch nicht abwertend gemeint, lediglich als Info im Hinterkopf behalten.

Im Übrigen, wenn ich deine Postings in dem von dir verlinkten Thread lese, habe ich den Eindruck, dass du die mehrfachen Hinweise auf die Fußnoten tapfer ignoriert hast. Du hast dich ja auch nach diesen Hinweisen immer wieder auf die „angebliche“ Unterstützung von Hyphen durch den Chrome kapriziert, ohne mit irgendeinem Wort auf die in den Anmerkungen und der Fußnote genannten Einschränkungen einzugehen.

Stimmt das? Nein:

was heißt Rechner, Android. Und das sollte laut Fußnote gehen.

Falls ihr etwas anderes aus der Fußnote heraus gelesen habt, wäre es schön gewesen mich darauf hin zu korrigieren. Da dies aber nicht erfolgt ist, dachte ich und denke das immer noch, dass es in der Kombi Android/Chrome, trotz Fußnote, nicht funktioniert.

Ob Can I Use? speziell bei deinem Problem nicht verlässlich ist, lässt sich anhand deines Threads mMn nicht mit Sicherheit sagen.

Sehe ich auch so, daher habe ich es ja gepostet, auch in der Hoffnung, hier Erfahrungswerte mit gleichen Kombinationen zu erhalten.

Gruss
Henry

[Auge]

Hallo

Du hast dich ja auch nach diesen Hinweisen immer wieder auf die „angebliche“ Unterstützung von Hyphen durch den Chrome kapriziert, ohne mit irgendeinem Wort auf die in den Anmerkungen und der Fußnote genannten Einschränkungen einzugehen.

Stimmt das? Nein:

was heißt Rechner, Android. Und das sollte laut Fußnote gehen.

Ah ja, habe ich jetzt auch gefunden (hättest du ruhig mal verlinken können).

Falls ihr etwas anderes aus der Fußnote heraus gelesen habt, wäre es schön gewesen mich darauf hin zu korrigieren.

Da steht aber mehr, als nur, dass es in der Kombination Android/Chrome funktioniert. Da wäre erstens die Einschränkung, dass nur der Wert auto unterstützt wird (ich gehe davon aus, dass du den benutzt) und zweitens, dass es ratsam ist, das Lang-Attribut für das Element html zu setzen, so übersetzt ich das zumindest. „It is advisable to set the @lang attribute on the HTML element …“ könnte (für mich und rein theoretisch) genausogut heißen, das Lang-Attribut für das HTML-Element, für das Hyphens gelten soll, zu setzen.

Eine letzte Einschränkung erwähnt der auf „Can I Use?“ verlinkte MDN-Artikel zu Hyphens. „In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available.“ Die Hervorhebung ist von mir. Keine Ahnung, ob das Wörterbuch vom Betriebsystem geliefert wird oder der Browser das mitbringt und ob das in jedem Fall installiert ist bzw. wegen nicht passender Spracheinstellung des Betriebssystems oder des Browsers nicht installiert ist.

Da dies aber nicht erfolgt ist, dachte ich und denke das immer noch, dass es in der Kombi Android/Chrome, trotz Fußnote, nicht funktioniert.

Korrigieren kann ich das jedenfalls nicht, aber Gunnar hat explizit geschrieben, dass Chrome Silbentrennung unterstützt. Seine Formulierung lässt mich eigene Erfahrungen vermuten.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Korrigieren kann ich das jedenfalls nicht, aber Gunnar hat explizit geschrieben, dass Chrome Silbentrennung unterstützt.

Auf macOS tut er das.

Seine Formulierung lässt mich eigene Erfahrungen vermuten.

Mit Android hab ich inzwischen weniger eigene Erfahrungen.

LLAP 🖖

[Matthias Apsel]

Hallo Pit,

Woher soll ich denn wissen, ob die Safarigeschichte noch aktuell ist, wenn ich ein Tutorium lese?

War es eins von uns?

Bis demnächst
Matthias

[Pit]

Hallo Matthias,

War es eins von uns?

Nein.

pit

[Pit]

Hallo,

würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

Ein Sehschlitz also. Und der soll nutzerfreundlich sein?

Vielleicht hast Du recht und ich blende den Inhalt besser über ein zusätzliches DIV ein, das der User dann bei Bedarf wieder wegklciken kann.

hierzu eine Frage:

Möchte ich über eine oder in eine Webseite ein DIV mit zusätzlichen Informationen einblenden, das auch bei Reloads (welcher Art auch immer) solange vorhanden sein soll, bis der User es aktiv ausblendet (über einen Button im DIV) oder er den Browser schließt, ist welche Technik die beste? Ich habe so etwas mal in einem anderen Zusammenhang genutzt und habe es seinerzeit über die damals ganz neue HTML5-Funktion local storage gelöst. Gibt es irgend etwas, was gegen eine Lösung hiermit spricht oder gibt es eine bessere Lösung?

Pit

[Gunnar Bittersmann]

@@Pit

Vielleicht hast Du recht und ich blende den Inhalt besser über ein zusätzliches DIV ein, das der User dann bei Bedarf wieder wegklciken kann.

hierzu eine Frage:

Möchte ich über eine oder in eine Webseite ein DIV mit zusätzlichen Informationen einblenden, das auch bei Reloads (welcher Art auch immer) solange vorhanden sein soll, bis der User es aktiv ausblendet (über einen Button im DIV) oder er den Browser schließt, ist welche Technik die beste?

Hierzu zwei Fragen

1. Das Ding ist inial da, Der Nutzer soll es ausblenden können. Soll sie es auch wieder einblenden können?
2. Wenn das Ding schon ausgeblendet wurde, soll es nache einem Reload weiterhin ausgeblendet oder wieder eingeblendet sein?

LLAP 🖖

[Pit]

Hallo Gunnar,

Hierzu zwei Fragen

1. Das Ding ist inial da, Der Nutzer soll es ausblenden können. Soll sie es auch wieder einblenden können?
2. Wenn das Ding schon ausgeblendet wurde, soll es nache einem Reload weiterhin ausgeblendet oder wieder eingeblendet sein?

Ansich war geplant, dass der User es nur 1 x ausblenden kann und bei Bedarf könnte er es ja über eine erneute Suche ohnehin wieder generieren. Aber Deine Rückfragen machen mich nachdenklich, da steckt womöglich eine gute Idee drin. Das DIV wird voraussichtlich eine Liste werden. Zudem wird sie draggable werden.

Ich würde sagen, der User kann die Liste wegklicken und sie bleibt weg, auch nach reload. Ich kann mir aber gut vorstellen, dass der User die Liste auch minimieren und maximieren kann, sodass sie ihm nicht die Sicht auf den rest der Website nimmt, wenn er die Liste im Hintergrund behalten will.

Ich denke nach wie vor, dass das mit local storage am besten zu realisieren ist, bin aber natürlich für Vorschläge offen. Die Frage ist natürlich auch, was genau im local storage abgelegt wird. Das Suchergebniss selber oder nur, dass eine offene Suche existiert und den dazugehörigen Suchbegriff.

Pit

[Gunnar Bittersmann]

@@Pit

Ich kann mir aber gut vorstellen, dass der User die Liste auch minimieren und maximieren kann, sodass sie ihm nicht die Sicht auf den rest der Website nimmt, wenn er die Liste im Hintergrund behalten will.

Das Auf- und Zuklappen ließe sich mit evtl. mit dem details-Element realisieren. ☞ Codepen

Du kannst auch einen zusätzlichen Schließen-Button einbauen. ☞ Codepen

Ich denke nach wie vor, dass das mit local storage am besten zu realisieren ist, bin aber natürlich für Vorschläge offen. Die Frage ist natürlich auch, was genau im local storage abgelegt wird. Das Suchergebniss selber oder nur, dass eine offene Suche existiert und den dazugehörigen Suchbegriff.

Nur, ob auf- oder zugeklappt (in meinem Beispiel den Wert des open-Attributs).

LLAP 🖖

[Pit]

Hi Gunnar,

Das Auf- und Zuklappen ließe sich mit evtl. mit dem details-Element realisieren. ☞ Codepen

Kannte ich bisher gar nicht. Ich hätte das jetzt über ein (un-)sichtbar machen der li-Ememente mit jquery gemacht (wird eh mitgeladen, daher kein zusätzliche Load) Aber ich schaue mir mal an, ob ich eine mit dem details-Element auch in Listen die li-Elemente verbergen kann.

Du kannst auch einen zusätzlichen Schließen-Button einbauen. ☞ Codepen

Na, den brauchts nicht wirklich. Es schließt ja über die Überschrift auch sehr schön. Aber mein Close-Button sollte ja auch gar nicht das Elemet einklappen, sondern das Div löschen.

Ich denke nach wie vor, dass das mit local storage am besten zu realisieren ist, bin aber natürlich für Vorschläge offen. Die Frage ist natürlich auch, was genau im local storage abgelegt wird. Das Suchergebniss selber oder nur, dass eine offene Suche existiert und den dazugehörigen Suchbegriff.

Nur, ob auf- oder zugeklappt (in meinem Beispiel den Wert des open-Attributs).

Ich denke, da muß zudem noch etwas mehr mehr rein. Denn der User soll innerhalb der Seite navigieren können, einen Reload durchführen können, usw. Dann muß die Seite aber 3 Dinge wissen:

1. DIV einblenden oder nicht?
2. DIV ein- oder ausgeklappt einblenden?
3. Was steht im DIV drin?

Pit

[Pit]

Dann muß die Seite aber 3 Dinge wissen:

1. DIV einblenden oder nicht?
2. DIV ein- oder ausgeklappt einblenden?
3. Was steht im DIV drin?

Pit

Habe mich nun doch gegen local Sorage entschieden. Grund: Ein cookie oder ein sessioncookie kann das, was ich benötige, genausogut und ist php-affiner.

Pit

[Matthias Apsel]

Hallo Pit,

Habe mich nun doch gegen local Sorage entschieden.
Grund: Ein cookie oder ein sessioncookie kann das, was ich benötige, genausogut und ist php-affiner.

Den schickst du aber durch die ganze Welt. Theoretisch verarbeitest du mit einem cookie personengebundene Daten. Zumindest könnten sie dir bekannt werden, was bei Verwendung des localStorage nicht der Fall ist.

Bis demnächst
Matthias