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?