Skip to content

What is this bar called?

Solved Customisation
  • for brand header or for progress bar ?

  • @DownPW progress bar.

  • @phenomlab

    I just tested by deleting all the custom CSS code and keeping only the following CSS code

    #pageUp {
      display: inline-block;
      background: var(--bs-body-component-active);
      width: 50px;
      height: 50px;
      text-align: center;
      border-radius: 0.375rem;
      position: fixed;
      bottom: 70px;
      right: 80px;
      transition: background-color .3s, opacity .5s, visibility .5s;
      opacity: 0;
      visibility: hidden;
    }
    #pageUp.show {
      opacity: 1;
      visibility: visible;
      z-index: 10000;
      color: var(--bs-body-navbar-color) !important;
    }
    a#pageUp.show:hover {
      background: var(--bs-dropdown-link-hover-bg);
      border: 1px solid var(--bs-border-color);
    }
    a#pageUp i {
        position: absolute;
        top: 32%;
        left: 35%;
    }
    .reading-meter {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        height: 2px !important;
    }
     
    div#readingposition {
        background-color: var(--bs-body-navbar) !important;
        color: var(--bs-body-color) !important;
        height: 2px;
        z-index: 1000;
    }
     
    .reading-meter-progress {
        border: 1px solid var(--bs-border-color);
        width: 100%;
    }
     
    .reading-meter-background {
        background: var(--bs-body-bg);
    }
     
    .reading-meter-progress-bar {
        background: var(--bs-progress-bg-bar);
        height: 2px;
    }
    input#percentage {
        display: none;
    }
     
    @media (max-width: 767px) {
        #pageUp {
            bottom: 60px;
            right: 30px;
          }
        }
     
     
     
     /* Menu Brand Header */
    @media (max-width: 767px)  {
      .socialicons {
        display: none !important;
      }
      [data-widget-area=brand-header] .d-none {
        display: inherit !important;
      }
      /* Button topic navbar header color */
      .sticky-tools .btn-ghost-sm i {
        color: var(--bs-alert-info-color) !important;
      }
    }
    

    There is clearly a conflict between his 2 codes.

  • What I don’t understand is that we have the same code and you don’t have this problem.

  • @DownPW this is the point I was trying to make about custom CSS.

  • @phenomlab

    I have find, it’s a zoom problem :

    If we zoom in on a page like the home page, even a tiny zoom invisible to the naked eye (which was my case), we end up with the bug described above.

    Solution: zoomed out to maximum

  • @phenomlab

    When I refresh the page or first visit, the Reading bar appear when she shouldn’t appear.
    An idea?

    Same things when I disable all the other custom CSS

    image.png

  • @DownPW Let me have a look.

  • It’s weird @phenomlab because I tested by removing all the custom css except the reading bar and it’s the same.

    Have you testing without custom css for see that ?

    On custom JS maybe ?

  • @DownPW I am able to reproduce this, yes. There are some CSS classes missing

    .reading-meter {
        visibility: hidden;
    }
    .reading-meter.show {
        visibility: visible;
    }
    

    I’ve added these on your DEV server and updated the original post. Sorry 😕

  • No problem my friend, I won’t complain 😉

  • I saw another bug.

    This bug occurs on the home page. No problem on recent page for example

    When you scroll down (to go to the bottom of the page) and then click on the button at the bottom right, it goes up automatically but the reading bar in the header does not disappear

    here a video :

    blink.gif

  • @DownPW thanks. Not sure why that happens - I’ve not noticed it before! Will check.

  • @phenomlab

    just for info, same bug on tags page and groups page

  • @DownPW Can you test this revised code for me please

    // Scroll to top function
    $(window).on('action:ajaxify.end', function(data) {
        var matched = false;
        $(document).ready(function() {
            var pageUp = $('#pageUp');
            var bar = $('.reading-meter');
            var perWidth = $('.reading-meter').width();
            
            // Main progressbar function
            function pageScroller() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
    
            document.getElementById("progress-bar").style.width = parseFloat(scrolled).toFixed(0) + "%";
            $('#percentage').val(parseFloat(scrolled).toFixed(0) + "%");
    
            // Prevent the mouse scroll wheel from scrolling down after the pageUp button is clicked
            if ($('#pageUp').is(':focus')) {
            event.preventDefault();
            }
        }
    
            // Bind the pageScroller function to the window's scroll event
            $(window).scroll(function() {
                pageScroller();
            });
    
            // Check the URL and composer visibility separately from the scroll event
            $(window).scroll(function() {
                var thisURL = window.location.href;
                var checkURL = ["topic", "notifications", "user"];
                var isFound = false;
                for (var i = 0, len = checkURL.length; i < len; i++) {
                    if (thisURL.indexOf(checkURL[i]) > -1) {
                        isFound = true;
                        break;
                    }
                }
                if (isFound) {
                    bar.removeClass('show');
                    pageUp.removeClass('show');
                } else {
                    // Exception here is that we don't want the scroll bar to show when the composer is active
                    if ($(window).scrollTop() > 0 && (!$('[component="composer"]').is(":visible"))) {
                        bar.addClass('show');
                        pageUp.addClass('show');
                    } else {
                        bar.removeClass('show');
                        pageUp.removeClass('show');
                    }
                }
            });
    
            // Scroll to top when #pageUp is clicked
            $(document).on("click", "#pageUp", function(e) {
                const firstTopic = $('[component="category/topic"][data-index="0"]');
                if (firstTopic.length) {
                    $("html").animate({
                        scrollTop: 0
                    }, '300');
                    return false;
                } else {
                    ajaxify.refresh();
                }
                $('#progress-bar').width(0);
                pageUp.removeClass('show');
            });
        });
    });
    
  • @phenomlab said in What is this bar called?:

    @DownPW Can you test this revised code for me please

    Yep !
    Done

    Seem to be good for me 🙂

  • Hello @phenomlab

    I find a bug 🙂

    For example, I’m on the home page and I scroll down.
    The button at the bottom right appears.
    If I then go directly to the chat for example, the button remains and interferes with navigation/chat

    Same for all notifications page

    We need a function to deactivate the button depending on the page/URL (chats, notifications, user) like you did for the reading meter bar

    blink2.gif

    My code :

    // Scroll to top function / Reading Meter Bar / 
    // Scroll to top function
    $(window).on('action:ajaxify.end', function(data) {
        var matched = false;
        $(document).ready(function() {
            var pageUp = $('#pageUp');
            var bar = $('.reading-meter');
            var perWidth = $('.reading-meter').width();
            
            // Main progressbar function
            function pageScroller() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
     
            document.getElementById("progress-bar").style.width = parseFloat(scrolled).toFixed(0) + "%";
            $('#percentage').val(parseFloat(scrolled).toFixed(0) + "%");
     
            // Prevent the mouse scroll wheel from scrolling down after the pageUp button is clicked
            if ($('#pageUp').is(':focus')) {
            event.preventDefault();
            }
        }
     
            // Bind the pageScroller function to the window's scroll event
            $(window).scroll(function() {
                pageScroller();
            });
     
            // Check the URL and composer visibility separately from the scroll event
            $(window).scroll(function() {
                var thisURL = window.location.href;
                var checkURL = ["topic", "notifications", "user"];
                var isFound = false;
                for (var i = 0, len = checkURL.length; i < len; i++) {
                    if (thisURL.indexOf(checkURL[i]) > -1) {
                        isFound = true;
                        break;
                    }
                }
                if (isFound) {
                    bar.removeClass('show');
                    pageUp.removeClass('show');
                } else {
                    // Exception here is that we don't want the scroll bar to show when the composer is active
                    if ($(window).scrollTop() > 0 && (!$('[component="composer"]').is(":visible"))) {
                        bar.addClass('show');
                        pageUp.addClass('show');
                    } else {
                        bar.removeClass('show');
                        pageUp.removeClass('show');
                    }
                }
            });
     
            // Scroll to top when #pageUp is clicked
            $(document).on("click", "#pageUp", function(e) {
                const firstTopic = $('[component="category/topic"][data-index="0"]');
                if (firstTopic.length) {
                    $("html").animate({
                        scrollTop: 0
                    }, '300');
                    return false;
                } else {
                    ajaxify.refresh();
                }
                $('#progress-bar').width(0);
                pageUp.removeClass('show');
            });
        });
    });
    
  • @DownPW thanks for reporting. Let me see if I can reproduce this.


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 💗

Related Topics
  • Unable to change icon in NodeBB navigation

    Tips
    1
    1 Votes
    1 Posts
    208 Views
    No one has replied
  • Difficult to move posts now, on mobile.

    Bugs
    16
    5 Votes
    16 Posts
    756 Views

    @DownPW Yes, it is. It’s set far too low meaning other elements with a higher preference will sit over the top of it.

  • Issues with Progress Bar on v3

    Solved Customisation
    48
    14 Votes
    48 Posts
    3k Views

    @Panda You could use the below

    .page-topic .pagination-block.ready { display: none; }
  • Footer bar add center text

    Solved Customisation
    41
    8 Votes
    41 Posts
    4k Views

    @phenomlab said in Footer bar add center text:

    div#console-nav-tab

    Ah ok test with bottom: 0px !important; idem

  • Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    665 Views

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • Blinking text Effect

    Customisation
    3
    5 Votes
    3 Posts
    460 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 😉

  • navigation bar is misplaced when the window gets smaller

    Solved Customisation
    23
    10 Votes
    23 Posts
    2k Views

    @DownPW sounds good.

  • Reading Meter Progress bar

    Locked Solved Customisation
    15
    9 Votes
    15 Posts
    1k Views

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