Installation: Logo einblenden

Michael Löffler's Avatar

Michael Löffler

28 Sep, 2018 11:18 AM

Produkt: Tao Contao
Contao-Version: 3.4.4
Browser und Browserversionen: IE und Firefox

Hallo zusammen
Ein Kunde von mir hat eine Lizenz benatragt und hat nun noch eine Frage zu einem Feature, wie man das Umsetzen kann.

Oben links sehen Sie ein Logo, im Hauptbild des Sliders auch. Gerne würde der Kunde das obere Logo erst sehen, wenn man mit der Maus nach oben scrollt und das Hauptlogo aus dem Bild verschwindet, was im Slider enthalten ist.

Andere Möglichkeit wäre, wenn das Logo aus dem Slider über das Logo in der Navigation gelegt werden könnte (in den Vordergrund quasi), dann kann es beim hochscrollen entsprechend unter dem grauen Balken (dort wo Natel, eMail, Home und Facbook Icon etc sind) verschwinden und das Logo aus der Navigationsleiste erscheint dann darunter.

  1. Support Staff 1 Posted by RockSolid Theme... on 01 Oct, 2018 06:55 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Sie können das Logo bis zu einer bestimmten Position ausblenden lassen. Fügen Sie dafür bitte folgendes Skript in den Layouteinstellungen unter „Eigener JavaScript-Code“ hinzu:

    <script>
        function updateLogoOnScroll() {
            if (jQuery(window).scrollTop() > 200) {
                jQuery('.page-header .logo').css('display', '');
            }
            else {
                jQuery('.page-header .logo').css('display', 'none');
            }
        }
        jQuery(window).on('scroll resize', updateLogoOnScroll);
        updateLogoOnScroll();
    </script>
    
  2. 2 Posted by Michael Löffler on 01 Oct, 2018 08:35 AM

    Michael Löffler's Avatar

    Sehr geehrte Damen und Herren

    Super, dass hat ja bestens geklappt.
    Gerne hätte ich noch alternativ folgende Frage.....
    Anstelle ausblenden, kann ich das Logo in der grossen Grösse wie jetzt im Slider in den Navigationsbereich integrieren, ohne das der Navigationsbereich diese Grösse annimmt ?
    Sprich, das Logo ragt aus dem Navigationsbereich hinaus in den Slider und bleibt so gross beim raufscrollen bis der Slider weg ist und dann wird das Logo auch kleiner ?

    Hoffe Sie verstehen was ich genau meine :-)

    Besten Dank für diese Abschliessende Hilfe in diesem Bereich.

    Freundliche Grüsse
    Michael Löffler

  3. Support Staff 3 Posted by RockSolid Theme... on 02 Oct, 2018 06:42 AM

    RockSolid Themes's Avatar

    Ein solcher Effekt lässt sich z. B. mit folgendem JavaScript realisieren.

    <script>
        function updateLogoOnScroll() {
            if (jQuery(window).scrollTop() > 200) {
                jQuery('.page-header .logo').css('bottom', '');
            }
            else {
                jQuery('.page-header .logo').css('bottom', '-100px');
            }
        }
        jQuery(window).on('scroll resize', updateLogoOnScroll);
        updateLogoOnScroll();
    </script>
    

    Sollten Sie Unterstützung bei der Anpassung benötigen, stehen Ihnen unsere Partner gerne zur Verfügung. Eine Auswahl an Agenturen und Freelancer finden Sie in unserem Partnernetzwerk: https://rocksolidthemes.com/de/contao/service/agenturen

  4. 4 Posted by Michael Löffler on 03 Oct, 2018 10:14 PM

    Michael Löffler's Avatar

    Super, vielen Dank, genau das habe ich gesucht...

  5. 5 Posted by Michael Löffler on 03 Oct, 2018 10:16 PM

    Michael Löffler's Avatar

    Hallo Team

    Eine Abschlussfrage hätte ich doch noch...
    Wenn das Logo nun offen bleiben sollte, also nicht beim scrollen verkleinert werden soll.... Kann oder muss ich da das Script unten entsprechend anpassen oder wie kann man dies steuern ? Also dass das Logo immer etwas grösser als der Navigationsbalken ist und in den Slider reinkommt, beim scrollen aber gleich gross bestehen bleibt ?

    Vielen Dank für Eure Hilfe zu dieser Abschlussfrage...

    Freundliche Grüsse
    Michi

  6. Support Staff 6 Posted by RockSolid Theme... on 04 Oct, 2018 08:54 AM

    RockSolid Themes's Avatar

    Sie können anstatt der bottom-Eigenschaft die height-Eigenschaft setzen. Z. B. auf '170px' und ''.

  7. 7 Posted by Michael Löffler on 05 Oct, 2018 02:10 PM

    Michael Löffler's Avatar

    Vielen Dank..... Ein Wunsch ist dem Kunden noch in den Sinn gekommen ,welches er gerne getestet haben würde...

    Das Logo ist im Slider enthalten und beim raufscrollen wird es kleiner. Das haben Sie mir schon mittels dem entsprechenden Script mitgeteilt.
    Nun möchte er aber anstelle des "grossen" Logos (Gross im Sinne der Höhe des Image) anschliessend nur den Schriftzug als Logo in der Navigation sehen, dies aber erst, wenn der User den Slider nach oben gescrollt hat.

    Es sind also quasi zwei Logo's, eines im Slider das man hochscrollen kann und es etwas kleiner wird und ein zweites Logo nur mit dem Schriftzug der Firma, welches dann zum erscheinen kommt, wenn der Slider nicht mehr ersichtlich ist.

    Gibt es so eine Möglichkeit ?

  8. Support Staff 8 Posted by RockSolid Theme... on 08 Oct, 2018 07:23 AM

    RockSolid Themes's Avatar

    Ja, die Möglichkeit gibt es indem Sie das Skript von oben anpassen und das src-Attribut des Bildes austauschen je nach Scrollposition.

    jQuery('.page-header .logo img').attr('src', 'files/ihr-logo.png');
    
  9. 9 Posted by Michael Löffler on 31 Oct, 2018 11:47 PM

    Michael Löffler's Avatar

    Hallo

    Gibt es eine Möglichkeit beim TAO, dass sich das Logo gar nicht verändert beim scrollen ?
    Also immer gleich gross bleibt ?

    Ich habe es damit versucht:

    <script>
        function updateLogoOnScroll() {
            if (jQuery(window).scrollTop() > 0) {
                jQuery('.page-header .logo').css('height', '');
            }
            else {
                jQuery('.page-header .logo').css('height', '32px', '');
            }
        }
        jQuery(window).on('scroll resize', updateLogoOnScroll);
        updateLogoOnScroll();
    </script>

    Doch trotzdem sieht man hiermit immer noch, wie das Logo sich etwas verändert beim scrollen.

    Danke und Grüsse
    Michi

  10. Support Staff 10 Posted by RockSolid Theme... on 01 Nov, 2018 03:35 PM

    RockSolid Themes's Avatar

    Verwenden Sie dafür bitte folgenden CSS-Code:

    .logo {
        bottom: auto;
        height: 170px;
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac