Skip to content

What is this bar called?

Solved Customisation
  • @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.

  • @DownPW Can you replace your function with this one and let me know?

    // 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');
            });
        });
    });
    
    
    
    /*
    Set pages where the progress bar should not be shown - see examples
    in below array, and ensure you follow the same syntax for any you need to 
    add
    */
    
    $(window).on('action:ajaxify.end', function(data) {
        $(document).ready(function() {
            var bar = $('.reading-meter');
            var thisURL = window.location.href;
            var checkURL = new Array("user", "notifications");
            var isFound = false;
            for (var i = 0, len = checkURL.length; i < len; i++) {
                if (thisURL.indexOf(checkURL[i]) > -1) {
                    isFound = true;
                    break;
                }
            }
            if (isFound) {
                //console.log("Page '" + checkURL[i] + "' is in URL - hide progress bar");
                bar.removeClass('show');
            }
        });
    });
    

    @cagatay reported something similar a while back IIRC and this was the solution.

    Thanks

  • nope sorry, same things

  • @DownPW hmm. Odd. I’ll have to take a look at that. Not seeing that here and I think that’s the same for @cagatay

  • @DownPW Can you try with this code?

    // 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
            function checkURL() {
                var thisURL = window.location.href;
                var checkArray = ["topic", "notifications", "user"];
                var isFound = false;
                
                for (var i = 0, len = checkArray.length; i < len; i++) {
                    if (thisURL.indexOf(checkArray[i]) > -1) {
                        isFound = true;
                        break;
                    }
                }
                
                return isFound;
            }
    
            // Function to update visibility based on URL and composer
            function updateVisibility() {
                if (checkURL()) {
                    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');
                    }
                }
            }
    
            // Call updateVisibility initially
            updateVisibility();
    
            // Bind updateVisibility function to the window's scroll event
            $(window).scroll(function() {
                updateVisibility();
            });
        });
    });
    
    
  • seems to be good my friend 🙂

  • @DownPW not sure if you’ve noticed, but (at least for me) the scroll to top function no longer works?

    EDIT - there is a bug in the above code. Please use this updated version

    // 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
            function checkURL() {
                var thisURL = window.location.href;
                var checkArray = ["topic", "notifications", "user"];
                var isFound = false;
                
                for (var i = 0, len = checkArray.length; i < len; i++) {
                    if (thisURL.indexOf(checkArray[i]) > -1) {
                        isFound = true;
                        break;
                    }
                }
                
                return isFound;
            }
    
            // Function to update visibility based on URL and composer
            function updateVisibility() {
                if (checkURL()) {
                    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');
                    }
                }
            }
    
            // Call updateVisibility initially
            updateVisibility();
    
            // Bind updateVisibility function to the window's scroll event
            $(window).scroll(function() {
                updateVisibility();
            });
    
    
            // 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');
            });
        });
    });
    
    
    
  • It’s funny I just realized it and I was going to share it here and I see your message!!
    Thanks you Mark @phenomlab 😉

    On the other hand, I have never been careful but I have the impression that the page is reloaded when you click on the button.
    I don’t know if it’s me but before, (on v2 perhaps?) we saw the page scroll from bottom to top after pressing the button

    I find this strange. I’ve never seen this on other sites using the same type of scroll to top

  • @DownPW you are right - it used to scroll to the top but I changed it because “scroll top” actually only applied to what was in the DOM at the time meaning that as data was being added, the “top” position was no longer a true representation and so the button had to be clicked multiple times to reach the “real” top.

  • Ok, thanks to confirm 🙂
    so I have no possibility of modifying it to display the same effect as on v2?

  • @DownPW it can easily be reverted, but I don’t want to maintain two sets of code. I’ll defer to others here for that final decision as I know it did cause some confusion.

  • no problem dude @phenomlab 🙂
    I put a modification here that seems to work as a reminder if you don’t mind.

    –> If yes, you can delete it.

    use $('html, body').animate({ scrollTop: 0 }, '300'); to smoothly scroll the page to the top when the #pageUp button is clicked. This code will provide a smooth scrolling effect from the bottom to the top of the page without reloading it.

    What do you think of this?

    // 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
            function checkURL() {
                var thisURL = window.location.href;
                var checkArray = ["topic", "notifications", "user"];
                var isFound = false;
                
                for (var i = 0, len = checkArray.length; i < len; i++) {
                    if (thisURL.indexOf(checkArray[i]) > -1) {
                        isFound = true;
                        break;
                    }
                }
                
                return isFound;
            }
    
            // Function to update visibility based on URL and composer
            function updateVisibility() {
                if (checkURL()) {
                    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');
                    }
                }
            }
    
            // Call updateVisibility initially
            updateVisibility();
    
            // Bind updateVisibility function to the window's scroll event
            $(window).scroll(function() {
                updateVisibility();
            });
    
            // Scroll to top when #pageUp is clicked
            $(document).on("click", "#pageUp", function(e) {
                $('html, body').animate({ scrollTop: 0 }, '300'); // Animate scrolling to top
                $('#progress-bar').width(0);
                pageUp.removeClass('show');
            });
        });
    });
    
  • @DownPW looks good to me.

  • @DownPW Just to circle back to this, the decision to reload the page instead of multiple scrolling / clicking was based on this discussion, which I’m including here for brevity

    https://community.nodebb.org/topic/17395/scroll-top-function?_=1695115491466


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
  • Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    1k Views

    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems.

    /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android }

    Once you’re in that rabbit hole, it’s impossible to get out 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

  • Rotating homepage icons, gifs?

    Solved Configure
    2
    3 Votes
    2 Posts
    237 Views

    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though 🙂

    The CSS for that is as below

    @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } }

    Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • navigation bar is misplaced when the window gets smaller

    Solved Customisation
    23
    10 Votes
    23 Posts
    2k Views

    @DownPW sounds good.

  • is "night mode" shifting the forum several pixels up?

    Solved Configure
    8
    4 Votes
    8 Posts
    631 Views

    @crazycells hmm. Good point. I actually use my own version of the dark mode plugin, so not entirely sure. However, I think the CSS is probably the same. I’m not at my PC currently but can check and advise later.

  • NodeBB templates

    Locked Chitchat
    12
    4 Votes
    12 Posts
    980 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

  • 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