Skip to content

[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💗

  • 7 Votes
    8 Posts
    76 Views

    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check.

    EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right…

    .bottombar-nav { padding: 0px !important; }

    I’ve removed this so it reflects stock Harmony.

  • 5 Votes
    12 Posts
    297 Views

    @phenomlab hi Mark, no worries. I will definitely write my experience here… 🙂

    Unfortunately, I could not find time to try it yet.

  • hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    587 Views

    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function

    document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); })

    The CSS for start is below

    .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; }

    And this is the corresponding keyframe

    @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }

    It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.

  • 9 Votes
    32 Posts
    2k 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
    3 Posts
    367 Views

    @phenomlab

    I love it too

    @phenomlab said in Blinking text Effect:

    Has that “broken neon light” look that you see in films.

    It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too 😉

  • Reading Meter Progress bar

    Locked Solved Customisation
    15
    9 Votes
    15 Posts
    799 Views

    For anyone else following this thread, please see
    https://sudonix.com/topic/467/issues-with-progress-bar-on-v3

  • 9 Votes
    47 Posts
    4k Views

    @phenomlab said in RSS parser script [NodeBB]:

    @jac Not yet. Sorry. Have some other work commitments I need to prioritise. Hoping to get to this over the weekend.

    No worries at all mate, thanks 👍🏻

  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    65k Views

    @jac Given your departure away from your previous project, I’m going to close this thread… 🙂