Sprungnavigation

[cymon]

Ich wende beim Orlando-Theme eine Sprungnavigation an, da ich das Theme lediglich für einen One-Pager einsetze.
Mein sichtbarer Header beim Scrolling ist 70px hoch - leider habe ich es nicht geschafft, bei den Anker-Punkten der Navigation diese 70px zu "kompensieren". Somit verschwindet der Beginn des Inhaltes des entsprechenden Navigationspunktes leider immer hinter der Navigation. Kann ich dies mittels CSS lösen?
Danke und Grüsse
Cymon

[Tim]

Mittels CSS geht es nur mit zusätzlichen Paddings in den Elementen, die angesprungen werden. Setze besser ein Javascript ein, was zu dem Anker scrollt. Da kann man einen offset angeben.

[Truni]

Bin auch auf der Suche nach einer guten Lösung für den Kopfbalken-Versatz.
Tim Gibts auf einem Theme von dir ein Musterscript, das man einsetzen kann für diesen Header-Anker-Versatz?

Danke dir

[Tim]

Bin auch auf der Suche nach einer guten Lösung für den Kopfbalken-Versatz.
Tim Gibts auf einem Theme von dir ein Musterscript, das man einsetzen kann für diesen Header-Anker-Versatz?

Danke dir

Quasi in jedem Theme mit stickyheader und onepage Layout.

Ich hab mir mal dieses kleine Script als Snippet gebaut:

jQuery(document).ready(function()
                {
                    // scroll to anchors
                    jQuery('a[href*=#]').click(function(e){
                        e.preventDefault();
                        var $this = jQuery(e.target);
                        var target = jQuery('#'+$this.attr("href").split('#')[1]);
                        if(!target)
                        {
                            return false;    
                        }
                        jQuery("html, body").animate({scrollTop: target.offset().top - 100}, 500);
                        return false;
                    });
                });

Die - 100 sind der Versatz

[Truni]

Danke Tim – wollte es mal einbauen, aber nach ein paar Fehlermeldungen habe bemerkt, dass wenn man im von uns verwendeten Theme (im Beispiel Orphan) einem Artikel eine ID vergibt, automatisch im Frontend dann «wrap_ID» als ID ausgegeben wird.

Dieses «wrap_ID» ist das Ziel der Sprungmarke für den Unternavigations-Link. Hat den Versatz drin und funktioniert, cool!

[Bensh86]

Hallo liebes Forum,

für die meisten hier ist der Code wahrscheinlich selbst erklärend. Mir fällt es leider nicht so leicht. Normalerweise schraube ich an Motorrädern und erstelle eher selten eine Homepage

Kann mir jemand eine kurze Anleitung geben, wie ich den Code verwende? Ich würde die Sprungnavigation gerne mit dem Tab Modul verwenden, um gerade bei der mobilen Ansicht, direkt zum Inhalt des Tabs zu springen. Nur leider gibt es hier ja keine Möglichkeit die Links zu vergeben.

Ich verdwende das Eclipse Theme mit Contao 4.

Wäre klasse, wenn mir hier jemand weiterhelfen könnte.

Danke und Grüße

Benny

[Tim]

Also der Code muss irgendwie erstmal in die Seite. Eclipse hat eine scripts.js (cto_layout/scripts). Dort wäre eine Möglichkeit. Im Grunde arbeitet das dann selbstständig.
Ein html Anker ist eine CSS-ID, die von einem Link via Hash angesprochen wird. https://wiki.selfhtml.org/wiki/HTML/...terne_Verweise

Mir fällt es leider nicht so leicht. Normalerweise schraube ich an Motorrädern und erstelle eher selten eine Homepage

Ja, das glaube ich und verstehe ich, dass dann dann nicht so leicht ist. Aber man muss es auch andersherum betrachten. Ich hab von Autos keine Ahnung und muss daher in die Werkstatt fahren

[Bensh86]

Vielen Dank, das hilft mir schon sehr weiter 👍

Ja, das glaube ich und verstehe ich, dass dann dann nicht so leicht ist. Aber man muss es auch andersherum betrachten. Ich hab von Autos keine Ahnung und muss daher in die Werkstatt fahren

Ja da hast du natürlich recht. Wenn es gar nicht mehr geht dann geh ich ja auch zum Profi. Mir macht es aber selbst auch Spaß und ich bin dabei meine Kenntnisse zu vertiefen und hoffe, dass ich euch nicht zu sehr mit meine Fragen nerve...

Nochmal Vielen Dank und schönen Abend noch.

[Bensh86]

Die Navigation mit den Ankern funktioniert, bis jetzt mal noch ohne "Smooth Scroll" aber es tut.

Ein großes Problem hab ich allerdings noch, da ich die Sprungnavigation beim Tab Modul einsetzen möchte:

Wie füge dem jeweiligen Tab den link hinzu?

z.B.: href="{{env::request}}#mein_anker"

[Tim]

Springe am besten zu dem Artikel, der die Tabs enthält.

[Bensh86]

Verstehe dein Antwort nicht so ganz. Ich möchte ja nicht zu den Tabs springen sondern zum Inhalt der Tabs.

Wenn ich auf den Tab klicke, dann soll er zur Überschrift des Inhalts dieses Tabs Scrollen.
Gerade wenn man die Seite auf einem kleinen Bildschirm öffnet, merkt man nicht, dass sich der Inhalt ändert, wenn man auf einen Tab tippt, da hier die Tabs alle untereinander dargestellt werden.

[Tim]

Über einen Anker einen Tab öffnen ist schon etwas höhere Javascript-Programmierung nötig. Ein Anker hat per se erstmal nichts mit einem Tab zu tun. Browser interpretieren Anker für Dich als Sprungmarke - das ist quasi HTML-Standard. Mehr nicht. Dass du damit den Inhalt eines Tabs öffnen willst, ist eine ganze andere Kategorie.

[Bensh86]

Bin mir nicht sicher ob wir uns richtig verstehen. Ich möchte nur, dass wenn man auf den jeweiligen Tab klickt, der Browser auf den Inhalt runter scrollt.
Der Anker selbst ist im Inhalt des Tab und dem Tab will ich den Link des Ankers zuweisen.

Hmmm, muss das wohl mal hier in die Jobbörse stellen...

[Tim]

Wenn der Tab-Reiter als Link angelegt ist mit einem href="#meinTabInhalt1" und das zum jeweiligen Tab-Inhalt passt (dort die CSS-ID meinTabInhalt1), könnte das sogar out of the box klappen.

[Bensh86]

Und genau da liegt mein Problem. Die Tab Reiter lege ich mit dem "Tabs (Start)" Modul an. Hier kann ich aber nur den Text und das Icon Auswählen.
Was habe ich noch für Möglichkeiten, um den Tab-Reiter mit einem Link zu versehen?