[Template] fhs-anchorific-pure

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 3504
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Template] fhs-anchorific-pure

Post by frase » Tue Feb 07, 2017 11:44 pm

deeseecee wrote:Leider ist dann beim Klicken auf den 'Link mit dem Anker' das Sprungziel nicht die H2-Überschrift, sondern deutlich darunter. Dadurch ist die H2-Überschrift nicht mehr zu sehen.
Der springt schon völlig richtig - nur der fixe Header liegt über der Überschrift.
Da habe ich im Moment nicht mal 'ne Idee ...
:evil:

Vielleicht ein "Hack":
Setze doch in den Abschnitt darüber ein (unsichtbares) Ankerziel.
(das verändert sich aber mit der Bildschirmgröße)
deeseecee wrote:aber ich bin manchmal faul
Na, ich erst.
deeseecee wrote:Aber das alles so schön zu verpacken, wie Du es dann gelöst hast (https://cmsimpleforum.com/viewtopic.php ... =10#p57624), das ist dann doch momentan zu hoch für mich...
Das war auch für mich ziemlich hoch :?
Da habe ich das Polyglott-Plugin ziemlich "verbogen".
Es findet sich sicher jemand, der das vom Prinzip her mal als Template-AddOn bastelt.
Oder Christoph baut es gleich so als Option in Polyglott ein?

cmb
Posts: 13396
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: [Template] fhs-anchorific-pure

Post by cmb » Wed Feb 08, 2017 1:07 am

frase wrote:Der springt schon völlig richtig - nur der fixe Header liegt über der Überschrift.
Ja, das ist ein fieses Problem. Eine Patentlösung dafür gibt, es soweit ich weiß, nicht. Interessant könnte die Lösung für CMSimples Adminmenü sein. `margin-top` kann u.U. auch helfen. Und ansonsten bleibt noch JavaScript als Fallback.

Und natürlich ist zu überlegen, ob man fixe Bereiche oben auf der Seite braucht – an der Seite und unten machen sie zumindest beim Anchor-Anspringen weniger Probleme.

PS:
frase wrote:Oder Christoph baut es gleich so als Option in Polyglott ein?
Ich hab's zumindest schon mal vermerkt. :)
Last edited by cmb on Wed Feb 08, 2017 1:09 am, edited 1 time in total.
Reason: PS hinzugefügt
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3200
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: [Template] fhs-anchorific-pure

Post by Tata » Wed Feb 08, 2017 9:57 am

Wäre es nicht möglich folgendes

Code: Select all

<script>
  function scrollWin() {
      window.scrollBy(0, window.innerHeight-100); //change the value if needed
  }
</script>
mit Link verbunden und die definierte Headerhöhe in eine Variable setzen, so dass die dan im Skript benutzt würde, um den Sprung richtig zu positionieren? Es bleibt doch einProblem mit responsiven Seiten. Da aber könnte ein Anchor am Content DIV stehen, so dass die Seite springt erst zum Content mit dem vertikalen Abstand und dann innerhalb Content zu der verlinkte Seite.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 3504
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Template] fhs-anchorific-pure

Post by frase » Wed Feb 08, 2017 10:13 am

Tata wrote:Wäre es nicht möglich folgendes
...
mit Link verbunden und die definierte Headerhöhe in eine Variable setzen, so dass die dan im Skript benutzt würde, um den Sprung richtig zu positionieren?
So, oder so ähnlich ginge es bei internen Links.

Bei externen Deep-Links geht das wohl nicht(?)
Z.B. ich will meinem Freund die Adresse zur 2. Überschrift schicken
Link: example.com#2.Überschrift&xxx
Da müsste man die Headerhöhe (xxx) wissen.

cmb
Posts: 13396
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: [Template] fhs-anchorific-pure

Post by cmb » Wed Feb 08, 2017 11:03 am

frase wrote:Bei externen Deep-Links geht das wohl nicht(?)
Z.B. ich will meinem Freund die Adresse zur 2. Überschrift schicken
Link: example.com#2.Überschrift&xxx
Da müsste man die Headerhöhe (xxx) wissen.
Und selbst wenn man die Headerhöhe wüsste, könnte man die andere Site nicht per JS manipulieren (jedenfalls ist das zu hoffen). Das ist aber auch gar nicht die Zuständigkeit des Verlinkenden, sondern des Verlinkten.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3200
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: [Template] fhs-anchorific-pure

Post by Tata » Wed Feb 08, 2017 12:14 pm

Wie wäre es dann mit Setenüberschrifften? Ich meine, den Content DIV mit z-index absolut zu positionieren und den Überschrifften den vertikalen Abstand zuzuordnen?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Holger
Site Admin
Posts: 3236
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: [Template] fhs-anchorific-pure

Post by Holger » Thu Feb 09, 2017 12:02 am

frase wrote: Der springt schon völlig richtig - nur der fixe Header liegt über der Überschrift.
Da habe ich im Moment nicht mal 'ne Idee ...
Wie wäre es mit:

Code: Select all

//Smooth scroll to ID on pageload / reload
var hash = window.location.hash;
if (hash.length) {
    $('html, body').animate({
        scrollTop: $(hash).offset().top - 150}, 300);
}
Wenn du den Code einfach zusätzlich zu deinem bisherigem Scroll-Skript packst, sollte es eigentlich passen.
Gescrollt wird, mit den 150px Offset, aber nur beim Aufruf oder Reload der Seite.

deeseecee
Posts: 53
Joined: Tue Jan 22, 2013 1:22 pm
Location: Bochum, Germany

Re: [Template] fhs-anchorific-pure

Post by deeseecee » Thu Feb 09, 2017 8:53 am

Ein erster, schneller Test zeigt: es funktioniert!

Super, vielen Dank für die Lösung des Problems.

frase
Posts: 3504
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Template] fhs-anchorific-pure

Post by frase » Thu Feb 09, 2017 9:18 am

Hi Holger,
wieder mal genial!

Habe es mal eingefügt.
Test "von außen":
http://fhseidel.de/cmsxh/fhs-anchorific ... s-headings
Perfekt!

An dieser Stelle habe ich unter der Überschrift einen internen Link gesetzt: "HTML" -> führt zu "?Anwendung#id6_tipps"
Perfekt!

Wenn ich "normal" auf der Seite "Anwendung" bin (ohne #...) und dann händisch an die Adresse "#id6_tipps" anfüge, dann funktioniert es nicht.
Aber das ist ja auch unsinnig, wer macht das schon. Ziel sind ja Links zu IDs von woanders her.

Bei Viewport unter 980px verschwindet die Topnav. Dadurch ist der Header etwas kürzer und des Linkziel ist etwas zu weit unterhalb.
Das könnte man auch noch abfangen - aber das wäre übertrieben.

Wie gesagt: Ich wäre niemals auf eine solche Idee gekommen.
Danke Holger!
Last edited by frase on Thu Feb 15, 2018 9:53 am, edited 1 time in total.

frase
Posts: 3504
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Template] fhs-anchorific-pure

Post by frase » Thu Feb 09, 2017 10:04 am

Nachtrag:
Christophs Vorschlag von hier habe ich mal eingefügt.
Dazu habe ich einfach die "individuelle Konfiguration" im Template geändert:

Code: Select all

anchorText: '#',
Jetzt gibt es zu jeder Überschrift ein Linkziel zum Anklicken.
Wenn also jemand einen Deep-Link weitergeben will, dann muss er lediglich diese Link-Adresse kopieren.

Post Reply