jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen bearbeitet von Rolf B 06.12.2018 11:21 Hallo io, aus meiner Sicht bringen sticky headers, die mit JavaScript oder position:fixed oben am Rand schweben, mehr Ärger als Nutzen. Mein Lösungsvorschlag: passendes HTML Markup und CSS. KEIN JavaScript. ~~~html <body> <header> <h1>Hello Foo</h1> </header> <nav><a href="#reallyInteresting">Click Me, I'm great!</a></nav> <div id="scrollframe"> <main> <section>...</section> <section>...</section> <section>...</section> <section> <h2 id="reallyInteresting">And now for something really interesting</h2> <p>... some vewy intewesting text ...</p> </section> <section>...</section> <section>...</section> <section>...</section> </main> <footer> ... </footer> </div> </body> ~~~ Das wäre ein beispielhafter Seitenrahmen, wo mittendrin eine Section ist die aus der Navigation angesprungen wird. UM Header und Navigation oben zu lassen, mache ich in solchen Fällen aus dem Body eine Flexbox. Damit das gelingt, muss man die Standard-Margins und -Paddings von html und body etwas tweaken: ~~~css html { margin: 0; padding: 8px; height: 100vh; box-sizing: border-box; } body { margin: 0; height: 100%; display: flex; flex-direction:column; } ~~~ Sinn dieser Tweaks ist, in der height-Angabe nicht mit calc() herumrechnen zu müssen. Normalerweise hat der Body einen gewissen margin, den habe ich zum Padding des HTML gemacht und den Body auf margin:0 gesetzt (falls er bei Dir noch padding hat, musst Du ihm ebenfalls box-sizing:border-box geben damit height:100% nicht zu einem unerwünschten Scrollbar der Gesamtseite führt). Im Body befinden sich - bei meinem HTML - nun drei Boxen. Der header, die <nav>igation und das #scrollframe-Div. Ob Du dieses Div brauchst oder nicht ist eine Frage deines Seitendesigns. Soll der footer ebenfalls ständig sichtbar sein? Dann muss das div weg und <main> bekommt id="scrollframe". Auf kleinen Viewports kann das allerdings störend sein. @Gunnar Bittersmann: Ja, das div ist nervig, wenn der Footer mitscrollen soll. Aber ich wüsste nicht, wie man es weg bekommt. In der gezeigten Fassung werden header und nav oben bleiben. Nur der Inhalt von #scrollframe hat einen Scrollbar und kann verschoben werden. Dazu bekommt #scrollframe ein flex Attribut (header und nav brauchen keins, der Default ist okay für sie): ~~~css #scrollframe { flex: 1 1 auto; overflow-y:scroll; } ~~~ und natürlich noch mehr Styles, je nach deinen Layout-Wünschen. Klickst Du auf den Link, scrollt nur der #scrollframe-Inhalt. Der Link führt Dich auf ein jsFiddle, das das demonstriert: <https://jsfiddle.net/ckmruxhj/> Mit Grid statt Flexbox kannst Du auch auf diese Weise auch noch fixe Sidebars unterbringen. _Rolf_ -- sumpsi - posui - clusi
jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen bearbeitet von Rolf B 06.12.2018 11:30 Hallo io, aus meiner Sicht bringen sticky headers, die mit JavaScript oder position:fixed oben am Rand schweben, mehr Ärger als Nutzen. Mein Lösungsvorschlag: passendes HTML Markup und CSS. KEIN JavaScript. ~~~html <body> <header> <h1>Hello Foo</h1> </header> <nav><a href="#reallyInteresting">Click Me, I'm great!</a></nav> <div id="scrollframe"> <main> <section>...</section> <section>...</section> <section>...</section> <section> <h2 id="reallyInteresting">And now for something really interesting</h2> <p>... some vewy intewesting text ...</p> </section> <section>...</section> <section>...</section> <section>...</section> </main> <footer> ... </footer> </div> </body> ~~~ Das wäre ein beispielhafter Seitenrahmen, wo mittendrin eine Section ist die aus der Navigation angesprungen wird. UM Header und Navigation oben zu lassen, mache ich in solchen Fällen aus dem Body eine Flexbox. Damit das gelingt, muss man die Standard-Margins und -Paddings von html und body etwas tweaken: ~~~css html { margin: 0; padding: 8px; height: 100vh; box-sizing: border-box; } body { margin: 0; height: 100%; display: flex; flex-direction:column; } ~~~ Normalerweise hat der Body einen gewissen margin, den habe ich zum Padding des HTML gemacht und den Body auf margin:0 gesetzt (falls er bei Dir noch padding hat, musst Du ihm ebenfalls box-sizing:border-box geben damit height:100% nicht zu einem unerwünschten Scrollbar der Gesamtseite führt). Im Body befinden sich - bei meinem HTML - nun drei Boxen. Der header, die <nav>igation und das #scrollframe-Div. Ob Du dieses Div brauchst oder nicht ist eine Frage deines Seitendesigns. Soll der footer ebenfalls ständig sichtbar sein? Dann muss das div weg und <main> bekommt id="scrollframe". Auf kleinen Viewports kann das allerdings störend sein. @Gunnar Bittersmann: Ja, das div ist nervig, wenn der Footer mitscrollen soll. Aber ich wüsste nicht, wie man es weg bekommt. In der gezeigten Fassung werden header und nav oben bleiben. Nur der Inhalt von #scrollframe hat einen Scrollbar und kann verschoben werden. Dazu bekommt #scrollframe ein flex Attribut (header und nav brauchen keins, der Default ist okay für sie): ~~~css #scrollframe { flex: 1 1 auto; overflow-y:scroll; } ~~~ und natürlich noch mehr Styles, je nach deinen Layout-Wünschen. Klickst Du auf den Link, scrollt nur der #scrollframe-Inhalt. Der Link führt Dich auf ein jsFiddle, das das demonstriert: <https://jsfiddle.net/ckmruxhj/> Mit Grid statt Flexbox kannst Du auch auf diese Weise auch noch fixe Sidebars unterbringen. _Rolf_ -- sumpsi - posui - clusi
jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen bearbeitet von Rolf B 06.12.2018 11:28 Hallo io, aus meiner Sicht bringen sticky headers, die mit JavaScript oder position:fixed oben am Rand schweben, mehr Ärger als Nutzen. Mein Lösungsvorschlag: passendes HTML Markup und CSS. KEIN JavaScript. ~~~html <body> <header> <h1>Hello Foo</h1> </header> <nav><a href="#reallyInteresting">Click Me, I'm great!</a></nav> <div id="scrollframe"> <main> <section>...</section> <section>...</section> <section>...</section> <section> <h2 id="reallyInteresting">And now for something really interesting</h2> <p>... some vewy intewesting text ...</p> </section> <section>...</section> <section>...</section> <section>...</section> </main> <footer> ... </footer> </div> </body> ~~~ Das wäre ein beispielhafter Seitenrahmen, wo mittendrin eine Section ist die aus der Navigation angesprungen wird. UM Header und Navigation oben zu lassen, mache ich in solchen Fällen aus dem Body eine Flexbox. Damit das gelingt, muss man die Standard-Margins und -Paddings von html und body etwas tweaken: ~~~css html { margin: 0; padding: 8px; height: 100vh; box-sizing: border-box; } body { margin: 0; height: 100%; display: flex; flex-direction:column; } ~~~ Normalerweise hat der Body einen gewissen margin, den habe ich zum Padding des HTML gemacht und den Body auf margin:0 gesetzt (falls er bei Dir noch padding hat, musst Du ihm ebenfalls box-sizing:border-box geben damit height:100% nicht zu einem unerwünschten Scrollbar der Gesamtseite führt). Im Body befinden sich - bei meinem HTML - nun drei Boxen. Der header, die <nav>igation und das #scrollframe-Div. Ob Du dieses Div brauchst oder nicht ist eine Frage deines Seitendesigns. Soll der footer ebenfalls ständig sichtbar sein? Dann muss das div weg und <main> bekommt id="scrollframe". Auf kleinen Viewports kann das allerdings störend sein. @Gunnar Bittersmann: Ja, das div ist nervig, wenn der Footer mitscrollen soll. Aber ich wüsste nicht, wie man es weg bekommt. In der gezeigten Fassung wird der header oben bleiben und nur der Inhalt von #scrollframe hat einen Scrollbar und kann verschoben werden. Dazu bekommen #scrollframe ein flex Attribut (header und nav brauchen keins, der Default ist okay für sie): ~~~css #scrollframe { flex: 1 1 auto; overflow-y:scroll; } ~~~ und natürlich noch mehr Styles, je nach deinen Layout-Wünschen. Klickst Du auf den Link, scrollt nur der #scrollframe-Inhalt. Der Link führt Dich auf ein jsFiddle, das das demonstriert: <https://jsfiddle.net/ckmruxhj/> Mit Grid statt Flexbox kannst Du auch auf diese Weise auch noch fixe Sidebars unterbringen. _Rolf_ -- sumpsi - posui - clusi
jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen bearbeitet von Rolf B 06.12.2018 11:26 Hallo io, aus meiner Sicht bringen sticky headers, die mit JavaScript oder position:fixed oben am Rand schweben, mehr Ärger als Nutzen. Mein Lösungsvorschlag: passendes HTML Markup und CSS. KEIN JavaScript. ~~~html <body> <header> <h1>Hello Foo</h1> </header> <nav><a href="#reallyInteresting">Click Me, I'm great!</a></nav> <div id="scrollframe"> <main> <section>...</section> <section>...</section> <section>...</section> <section> <h2 id="reallyInteresting">And now for something really interesting</h2> <p>... some vewy intewesting text ...</p> </section> <section>...</section> <section>...</section> <section>...</section> </main> <footer> ... </footer> </div> </body> ~~~ Das wäre ein beispielhafter Seitenrahmen, wo mittendrin eine Section ist die aus der Navigation angesprungen wird. UM Header und Navigation oben zu lassen, mache ich in solchen Fällen aus dem Body eine Flexbox. Damit das gelingt, muss man die Standard-Margins und -Paddings von html und body etwas tweaken: ~~~css html { margin: 0; padding: 8px; height: 100vh; box-sizing: border-box; } body { margin: 0; height: 100%; display: flex; flex-direction:column; } ~~~ Normalerweise hat der Body einen gewissen margin, den habe ich zum Padding des HTML gemacht und den Body auf margin:0 gesetzt (falls er bei Dir noch padding hat, musst Du ihm ebenfalls box-sizing:border-box geben damit height:100% nicht zu einem unerwünschten Scrollbar der Gesamtseite führt). Im Body befinden sich - bei meinem HTML - nun zwei Boxen. Einmal der header, und das #scrollframe div. Ob Du dieses Div brauchst oder nicht ist eine Frage deines Seitendesigns. Soll der footer ebenfalls ständig sichtbar sein? Dann muss das div weg und der Footer braucht ein flex-Attribut. Auf kleinen Viewports kann das allerdings störend sein. @Gunnar Bittersmann: Ja, das div ist nervig. Aber ich wüsste nicht, wie man es weg bekommt. In der gezeigten Fassung wird der header oben bleiben und nur der Inhalt von #scrollframe hat einen Scrollbar und kann verschoben werden. Dazu bekommen #scrollframe ein flex Attribut (header und nav brauchen keins, der Default ist okay für sie): ~~~css #scrollframe { flex: 1 1 auto; overflow-y:scroll; } ~~~ und natürlich noch mehr Styles, je nach deinen Layout-Wünschen. Klickst Du auf den Link, scrollt nur der #scrollframe-Inhalt. Der Link führt Dich auf ein jsFiddle, das das demonstriert: <https://jsfiddle.net/ckmruxhj/> Mit Grid statt Flexbox kannst Du auch auf diese Weise auch noch fixe Sidebars unterbringen. _Rolf_ -- sumpsi - posui - clusi
jQuery Anfänger: Eigenen Eventhandler unmittelbar nach(!) Default-Aktion des Click-Events ausführen bearbeitet von Rolf B 06.12.2018 11:24 Hallo io, aus meiner Sicht bringen sticky headers, die mit JavaScript oder position:fixed oben am Rand schweben, mehr Ärger als Nutzen. Mein Lösungsvorschlag: passendes HTML Markup und CSS. KEIN JavaScript. ~~~html <body> <header> <h1>Hello Foo</h1> <nav><a href="#reallyInteresting">Click Me, I'm great!</a></nav> </header> <div id="scrollframe"> <main> <section>...</section> <section>...</section> <section>...</section> <section> <h2 id="reallyInteresting">And now for something really interesting</h2> <p>... some vewy intewesting text ...</p> </section> <section>...</section> <section>...</section> <section>...</section> </main> <footer> ... </footer> </div> </body> ~~~ Das wäre ein beispielhafter Seitenrahmen, wo mittendrin eine Section ist die aus der Navigation angesprungen wird. Die Navigation ist im Header, damit sie zusammen mit ihm oben bleiben kann. UM den Header oben zu lassen, mache ich in solchen Fällen aus dem Body eine Flexbox. Damit das gelingt, muss man die Standard-Margins und -Paddings von html und body etwas tweaken: ~~~css html { margin: 0; padding: 8px; height: 100vh; box-sizing: border-box; } body { margin: 0; height: 100%; display: flex; flex-direction:column; } ~~~ Normalerweise hat der Body einen gewissen margin, den habe ich zum Padding des HTML gemacht und den Body auf margin:0 gesetzt (falls er bei Dir noch padding hat, musst Du ihm ebenfalls box-sizing:border-box geben damit height:100% nicht zu einem unerwünschten Scrollbar der Gesamtseite führt). Im Body befinden sich - bei meinem HTML - nun zwei Boxen. Einmal der header, und das #scrollframe div. Ob Du dieses Div brauchst oder nicht ist eine Frage deines Seitendesigns. Soll der footer ebenfalls ständig sichtbar sein? Dann muss das div weg und der Footer braucht ein flex-Attribut. Auf kleinen Viewports kann das allerdings störend sein. @Gunnar Bittersmann: Ja, das div ist nervig. Aber ich wüsste nicht, wie man es weg bekommt. In der gezeigten Fassung wird der header oben bleiben und nur der Inhalt von #scrollframe hat einen Scrollbar und kann verschoben werden. Dazu bekommen header und #scrollframe flex Attribute: ~~~css header { flex: 0 0 auto; } #scrollframe { flex: 1 1 auto; overflow-y:scroll; } ~~~ und natürlich noch mehr Styles, je nach deinen Layout-Wünschen. Klickst Du auf den Link, scrollt nur der #scrollframe-Inhalt. Der Link führt Dich auf ein jsFiddle, das das demonstriert: <https://jsfiddle.net/a6h8o3yv/> Mit Grid statt Flexbox kannst Du auch auf diese Weise auch noch fixe Sidebars unterbringen. _Rolf_ -- sumpsi - posui - clusi
nicht angemeldet
