Hallo, Besucher der Thread wurde 1,2k aufgerufen und enthält 4 Antworten

letzter Beitrag von mipu am

[Template] Progress Bar on Scroll

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    viele kennen es bzw. haben es bereits auf einigen Internetpräsenzen gesehen. Die Rede ist von einer Progressbar, welche beim scrollen animiert am oberen Rand des Browsers angezeigt wird. Eine solche Progressbar lässt sich sehr einfach und mit wenig Quellcode bewerkstelligen. Zudem ist die Progressbar natürlich durch eigene CSS-Deklarationen an jedem Style anpassbar.

    Features

    • Animierte Progressbar
    • Individuell an Deinen Style anpassbar







    Demo


    Eine Live Demo kann auf Belarusinfo.de sowie auch hier bei WBB-Support im Stil WSC Light/Dark betrachtet werden ;)

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Das unachtsame bearbeiten von Templates kann zu einen Fatal-Error führen. Entsprechend dem sind vor jeglichen Änderungen ein Backup durchzuführen! Insofern keine Kenntnisse mit Templates vorhanden sind, so empfiehlt es sich einen Entwickler des Vertrauen zu kontaktieren.


    Benutzung

    1. Gehe zu Anpassung Templates + Template hinzufügen
    2. Gebe als Namen progressBar ein und füge den o.g. Html und JavaScript Quellcode ein.
      Der JavaScript Quellcode ist natürlich in <script></script>-Tags zu setzen!
    3. Gehe zu Anpassung Templates
    4. Wähle dort DEIN_STYLE und anschließend das Template __menu
      Sollte sich das Template __menu noch nicht in der Templategruppe Deines Style befinden, so ist dies über aus der Standard-Templategruppe in Deine Templategruppe zu kopieren.
    5. Füge im __menu-Template ganz oben in einer neuen Zeile folgenden Quellcode ein: {include file='progressBar'}.
      Sollte ein anderer Templatename wie unter Punkt 2 angegeben genutzt werden, so ist entsprechend der eigens gewählte Name zu nutzen!
    6. Gehe zu [tt]Anpassung Stil DEIN_STYLE Erweiterte Einstellungen
    7. Füge dort den o.g. CSS-Quellcode ein und passe diesen nach Deinen belieben an.
    8. Fertig!

    Alle die ein Stil mit seitlichen Menü benutzen, sollten nicht das Template __menu nutzen, sondern entweder das Template header bzw. pageHeader oder footer benutzen. Siehe in diesem folgenden Beitrag für weitere Informationen. Diejenigen die ein Stil von CLS-Design benutzen müssen u.a. noch weitere CSS-Deklarationen, wie im Beitrag von mipu geschrieben wurde, mit angeben!

    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots


    Gruss,
    Andreas

    Habe es mal als Demo hier in den Stil WSC Light/Dark eingesetzt.


    Statt das Template __menu habe ich es in das Template Header gesetzt {event name='beforePageHeader'}


    Habe die Höhe etwas erhöht, für besser Ansicht. :)

    mipu

    Das mit dem Template war, wie Du sicher von mir weißt, auch nur ein Beispiel. Natürlich kann dies auch in ein anderen Template wie von Dir genannt eingefügt werden. Je nach dem wo ein jener eben die Progressbar einbauen möchte. Möglich wäre dies zum Beispiel in folgenden Templates:

    • header bzw. auch pageHeader
      Dort vor der Zeile <div id="pageContainer" class="pageContainer">
    • __menu
      Dort vor der Zeile <nav>
    • footer
      Dort vor der Zeile </body>

    Letzteres (also bzgl. den Footer) natürlich nur, wenn jemand die Progressbar nicht ganz oben, sondern stattdessen ganz unten haben möchte ;)

    Der Vorteil beim nutzen des __menu-Templates ist lediglich der, dass damit die Progressbar direkt ins Menü intrigiert würde. Bei allen anderen würde überhalb des Menüs immer eine schmale oder breite (je nach höhe der Progressbar) Leiste zu sehen sein in welchen der Prozess der Progressbar angezeigt würde. Würde dies aber im Menü selbst intrigiert werden, so müsste man dem Menü selbst nur eine CSS-Deklaration margin-top: xyz; (je nach höhe der Progressbar) zuweisen, so dass die Progressbar direkt im Menü verläuft. Alternativ kann natürlich auch die Hintergrundfarbe der Progressbar so angepasst werden, so dass es den Anschein macht, als würde die Progressbar im Menü verlaufen.


    Alle die ein Stil mit seitlichen Menü benutzen, sollten nicht das Template __menu nutzen, sondern entweder das Template header bzw. pageHeader!


    Habe die Höhe etwas erhöht, für besser Ansicht.

    Das ist auch ein Punkt, welches ein jener selbst entscheiden sollte, in wie weit die Höhe der Progressbar angegeben wird. In meinen Beispiel habe ich mich einfach mal schlicht an die Höhe der Progressbar am Smartphone oder Tablet mit Android gerichtet. Je nach dem welchen Style genutzt wird, sollte die Progressbar natürlich noch, wie o.g., per CSS angepasst werden. Bei dem einen Stil mag sie schmaler besser aussehen und beim anderen Stil, wenn die Progressbar breiter dargestellt wird. Ich persönlich mag die schlichtere schmale Progressbar, wie auch die schmalere seitliche Scrollbar lieber, um damit mehr Platz für den Content frei zugeben. Zumal ohnehin kaum einer ein Blick auf die Scrollbar selbst wirft ;)


    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

    Dieses Thema enthält 2 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 2 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!