What is this bar called?

[phenomlab]

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

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

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

[DownPW]

No problem my friend, I won’t complain

[DownPW]

I saw another bug.

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

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

here a video :

[phenomlab]

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

[DownPW]

@phenomlab

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

[phenomlab]

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

[DownPW]

@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

[phenomlab]

@DownPW Thanks.

[DownPW]

[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

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

[phenomlab]

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

[phenomlab]

@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

[DownPW]

nope sorry, same things

[phenomlab]

@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

[phenomlab]

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

[DownPW]

seems to be good my friend

[phenomlab]

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

[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

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

[DownPW]

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