Skip to content
Sudonix

What is this bar called?

Solved Customisation
92 3 21.6k 1
  • DownPWundefined

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

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

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

    @DownPW thanks for reporting. Let me see if I can reproduce this.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

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

    @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

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    1
  • DownPWundefined

    nope sorry, same things

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

    nope sorry, same things

    phenomlabundefined

    @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

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

    nope sorry, same things

    phenomlabundefined

    @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();
        });
    });
});

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    2
  • DownPWundefined

    seems to be good my friend 🙂

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    seems to be good my friend 🙂

    phenomlabundefined

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

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    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

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    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

    phenomlabundefined

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

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    DownPWundefined 1 Reply
    0
  • 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 IT & Security Leadership
    Phenomlab Ltd

    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 IT & Security Leadership
    Phenomlab Ltd

    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 IT & Security Leadership
    Phenomlab Ltd

    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 IT & Security Leadership
    Phenomlab Ltd

    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 IT & Security Leadership
    Phenomlab Ltd

    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 IT & Security Leadership
    Phenomlab Ltd

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

    Export posts out of NodeBB into HTML and Markdown flat files -> Halo ITSM

    Guides nodebb python
    1
    3 Votes
    1 Posts
    569 Views
    No one has replied
  • Pandaundefined

    Spam spam spam

    Solved Configure nodebb
    6
    2 Votes
    6 Posts
    890 Views
    phenomlabundefined
    @Panda said in Spam spam spam: ok, yes Ive seen the queue, it shows IP, but doesnt have a field for comments from registrant. It’s not designed for that. It merely serves as a gateway between posts appearing on your form or not. @Panda said in Spam spam spam: It would be better if nodebb had this plugin included in ACP list, as not only then do you know its approved and should work, but many people cant or dont want to use CLI on the server That’s a question for the NodeBB devs but in all honesty you can’t not use the CLI when installing nodebb so to be this isn’t a big deal.
  • cagatayundefined

    Issues with Progress Bar on v3

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

    v3 & Harmony diary / thoughts / code snippets

    Announcements harmony v3.beta1 nodebb
    55
    5
    36 Votes
    55 Posts
    12k Views
    phenomlabundefined
    @DownPW I see why. The code relies on the existence of [component="topic/quickreply/container"] However, this by definition means that the below has to be enabled [image: 1679077966615-aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png] It will then work [image: 1679077992245-7fb38631-e0f3-46ef-b652-00929d927b13-image.png] For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component. The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on
  • 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
  • cagatayundefined

    Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    1k Views
    phenomlabundefined
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • Madchatthewundefined

    Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    3k Views
    phenomlabundefined
    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related
  • 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.