Skip to content

What is this bar called?

Solved Customisation
  • @DownPW I’d put that CSS back. It’s set like that for a reason, so you’ll need to be more specific with the target so you can unset.

  • Sorry but I do not understand too much @phenomlab because if I keep this code, the reading bar does not work on smartphone

  • @DownPW what I mean is target from higher above so the CSS you apply to the end target is not the same as an existing element.

  • 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 🙂


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
  • 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

  • NODEBB: Nginx error performance & High CPU

    Solved Performance
    69
    14 Votes
    69 Posts
    6k Views

    @phenomlab

    Seems to be better with some scaling fix for redis on redis.conf. I haven’t seen the message yet since the changes I made

    # I increase it to the value of /proc/sys/net/core/somaxconn tcp-backlog 4096 # I'm uncommenting because it can slow down Redis. Uncommented by default !!!!!!!!!!!!!!!!!!! #save 900 1 #save 300 10 #save 60 10000

    If you have other Redis optimizations. I take all your advice

    https://severalnines.com/blog/performance-tuning-redis/

  • Top Ranked Forums

    Chitchat
    9
    3 Votes
    9 Posts
    570 Views

    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base.

    Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information.

    Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.

  • How to fix header side as boxed

    Solved Customisation
    10
    6 Votes
    10 Posts
    516 Views

    @phenomlab yes it caused a problem for mobile users.
    thank you for helping …

  • navigation bar is misplaced when the window gets smaller

    Solved Customisation
    23
    10 Votes
    23 Posts
    2k Views

    @DownPW sounds good.

  • NodeBB templates

    Locked Chitchat
    12
    4 Votes
    12 Posts
    981 Views

    Placing this here for reference
    https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher

    Further information and posts can be found at this link

  • NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    1k Views

    @phenomlab said in NodeBB Footer:

    @jac and you. Hope all is well and you recover quickly

    Thanks pal 😁🤝🏻