Skip to content
Sudonix

What is this bar called?

Solved Customisation
92 3 20.7k 1
  • DownPWundefined

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

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

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

    phenomlabundefined

    @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.

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined

    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');
        });
    });
});

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

    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');
        });
    });
});
    phenomlabundefined

    @DownPW looks good to me.

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined DownPW

    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');
        });
    });
});
    phenomlabundefined

    @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

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    1
  • phenomlabundefined phenomlab

    @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.

    DownPWundefined

    @phenomlab said in What is this bar called?:

    @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.

    you are right @phenomlab the code I gave yesterday works but does the same thing as you described.

    here a mix of the 2 (scroll to top & scroll to top with refresh)

    // Scroll to top function (classic scroll to top)
$(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');
        });
    });
});

// Scroll to refresh function (for specific URLs)
$(window).on('action:ajaxify.end', function(data) {
    var refreshRoutes = ['/recent', '/unread', '/popular', '/top', '/solved', '/unsolved'];
    var currentRoute = ajaxify.data.url;

    if (refreshRoutes.includes(currentRoute)) {
        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();
        });

        // Function to update visibility based on URL and composer
        function updateVisibility() {
            // No need to check composer visibility for these routes
            if ($(window).scrollTop() > 0) {
                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 refresh when #pageUp is clicked
        $(document).on("click", "#pageUp", function(e) {
            ajaxify.refresh();
            $('#progress-bar').width(0);
            pageUp.removeClass('show');
        });
    }
});

    I found it interesting to keep the scroll effect on the home page

    The scroll to top with refresh is applied on the routes indicated in the script (/recent, /unread, etc.). The classic scroll to top applies to other pages and the scroll to top is disabled in chat, etc…

    For the previous script, I used the code from your v2 and doing myself but I’m not being a good JS developer, so this time I asked to ChatGPT to help me, sorry !

    I tested the code and it seems to work correctly without any bugs but could you check @phenomlab if this seems correct to you even if the code works?

    A machine will not replace humans in this regard. At least for now 🙂

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    @phenomlab said in What is this bar called?:

    @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.

    you are right @phenomlab the code I gave yesterday works but does the same thing as you described.

    here a mix of the 2 (scroll to top & scroll to top with refresh)

    // Scroll to top function (classic scroll to top)
$(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');
        });
    });
});

// Scroll to refresh function (for specific URLs)
$(window).on('action:ajaxify.end', function(data) {
    var refreshRoutes = ['/recent', '/unread', '/popular', '/top', '/solved', '/unsolved'];
    var currentRoute = ajaxify.data.url;

    if (refreshRoutes.includes(currentRoute)) {
        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();
        });

        // Function to update visibility based on URL and composer
        function updateVisibility() {
            // No need to check composer visibility for these routes
            if ($(window).scrollTop() > 0) {
                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 refresh when #pageUp is clicked
        $(document).on("click", "#pageUp", function(e) {
            ajaxify.refresh();
            $('#progress-bar').width(0);
            pageUp.removeClass('show');
        });
    }
});

    I found it interesting to keep the scroll effect on the home page

    The scroll to top with refresh is applied on the routes indicated in the script (/recent, /unread, etc.). The classic scroll to top applies to other pages and the scroll to top is disabled in chat, etc…

    For the previous script, I used the code from your v2 and doing myself but I’m not being a good JS developer, so this time I asked to ChatGPT to help me, sorry !

    I tested the code and it seems to work correctly without any bugs but could you check @phenomlab if this seems correct to you even if the code works?

    A machine will not replace humans in this regard. At least for now 🙂

    phenomlabundefined

    @DownPW 🙂 Love it - let me try this out!

    EDIT - Tried it, and there’s a couple of bugs. For example, if you use a custom page, scroll to the bottom, then use the back to top button, you have to scroll the mouse wheel down 16 times (if you do it quickly - depending on intervals it can be much less) before it’ll work properly. This is animation jitter as far as I can see where the animation does not complete on time and is therefore stuck in a loop.

    Have a look yourself here and see if you get the same experience

    https://sudonix.org/journey

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • phenomlabundefined

    Seems you can fix this by using e.preventDefault() see below

        // Scroll to top when #pageUp is clicked
    $(document).on("click", "#pageUp", function(e) {
        e.preventDefault(); // Prevent default behavior
        $('html, body').animate({ scrollTop: 0 }, '300'); // Animate scrolling to top
        $('#progress-bar').width(0);
        pageUp.removeClass('show');
    });

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined

    Not test on custom page. Test ASAP

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    Not test on custom page. Test ASAP

    phenomlabundefined

    @DownPW said in What is this bar called?:

    Not test on custom page. Test ASAP

    The above code change I provided seems to resolve the issue.

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    1
  • DownPWundefined

    This is good 👍

    PW and WS Spirit alive

    1
Log in to reply

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • cagatayundefined

    What’s going on with NodeBB?

    Performance nodebb script die
    8
    2 Votes
    8 Posts
    768 Views
    phenomlabundefined
    @cagatay That is quite the jump as importers from one forum platform to another are notoriously unreliable and could land up being quite costly if it requires managed services.
  • Pandaundefined

    Composer Zen icon?

    Solved Configure nodebb
    8
    1
    2 Votes
    8 Posts
    1k Views
    phenomlabundefined
    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used. If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!
  • cagatayundefined

    Issues with Progress Bar on v3

    Solved Customisation
    48
    1
    14 Votes
    48 Posts
    8k Views
    phenomlabundefined
    @Panda You could use the below .page-topic .pagination-block.ready { display: none; }
  • mventuresundefined

    NodeBB: The global Search option

    Solved Configure search nodebb
    5
    0 Votes
    5 Posts
    799 Views
    phenomlabundefined
    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it. The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.
  • DownPWundefined

    Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    9k Views
    DownPWundefined
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • DownPWundefined

    Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    953 Views
    DownPWundefined
    @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
  • crazycellsundefined

    Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    1k Views
    crazycellsundefined
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • RiekMediaundefined

    NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.