[NODEBB] Scroll Button

Solved Customisation
  • Hi @phenomlab

    I feel like I’ve been abused, but too bad, I’m starting…

    I saw that you had a scroll button that appears/disappears automatically.

    4f6552e9-d8ca-4284-adf2-6d0675f3e32c-image.png

    I see this is a JS/CSS/HTML code.

    I also saw that this button does not appear in the topics (probably acting as a duplicate with the existing one one NodeBB). I’m also interested with that element.

    On the other hand it’s very practical in the long page categories for example.

    Is it possible to share this code or not?

    Thanks in advance.

    Good evening!!

  • @downpw Of course it’s possible to share 🙂

    Here’s the CSS

     #btt {
        display: inline-block;
        background: rgba(0, 0, 0, 0.2);
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 4px;
        position: fixed;
        bottom: 50px;
        right: 30px;
        transition: background-color .3s, opacity .5s, visibility .5s;
        opacity: 0;
        visibility: hidden;
      }
      #btt.show {
      opacity: 1;
      visibility: visible;
      z-index: 10000;
      color: #ffffff;
    }
    a#btt.show:hover {
      box-shadow: inset 0px 0px 0px 1px #4F707A !important;
    }
      a#btt i {
          position: absolute;
          top: 32%;
          left: 35%;
      }
    

    Obviously, style to suit your own site

    And here’s the JS

    $(window).on('action:ajaxify.end', function (data) {
        var matched = false;
        var btn = $('#btt');
        var bar = $('.reading-meter');
        bar.removeClass('show');
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) {
                btn.addClass('show');
                bar.addClass('show');
            } else {
                btn.removeClass('show');
                bar.removeClass('show');
            }
            if (window.location.href.indexOf("topic") > -1) {
                if (matched == false) {
                    console.log("This is a topic, so hide the scroll top feature");
                    matched = true;
                }
                btn.removeClass('show');
            }
        });
        btn.on('click', function (e) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: 0 }, '300');
        });
    });
    

    Some points

    bar.addClass('show'); and bar.removeClass('show'); are only required if you are using the progress-meter code. Essentially, the two are designed to work together with the code above, but it won’t matter that much if you aren’t using the progress-meter (however, you may land up with some errors in the console).

  • @phenomlab said in [NODEBB] Scroll Button:

    Some points
    bar.addClass(‘show’); and bar.removeClass(‘show’); are only required if you are using the progress-meter code. Essentially, the two are designed to work together with the code above, but it won’t matter that much if you aren’t using the progress-meter (however, you may land up with some errors in the console).

    @phenomlab

    You talk about Reading meter bar at the bottom of the navbar isn’ it?

  • @downpw Yes, that’s correct.

  • Ok no problem Sir 😉

  • DownPWundefined DownPW has marked this topic as solved on
  • Add HTML Widget footer 😉

    <a id="btt" class=""><i class="fas fa-chevron-up"></i></a>
    
  • @downpw ooops. Forgot that. Thanks for adding.


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation💗

  • 15 Votes
    51 Posts
    160 Views

    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS

  • Widget | CSS customization

    Solved WordPress
    53
    17 Votes
    53 Posts
    167 Views

    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.

  • Nodebb icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    104 Views

    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.

  • 9 Votes
    32 Posts
    806 Views

    @DownPW said in Bottom footer navbar button extend:

    Oh my god, it’s beautiful mark

    I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept ♥

  • 5 Votes
    9 Posts
    1k Views

    @phenomlab

    Very very great Mark 😉
    Thanks again, It’s perfect now !

    –> I share my code that I modified.

    I’ve added French and English comments.
    If you see things to change Mark, don’t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • 2 Votes
    4 Posts
    224 Views

    @phenomlab said in How to set a signature in NodeBB?:

    @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below

    7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png

    You can set the signature by using https://domain.com/user/theuser/edit

    Mamy thanks Mark, I’ll set this up later 😁.

  • 0 Votes
    3 Posts
    282 Views

    @phenomlab many thanks Mark 😁.