Skip to content
Sudonix

What is this bar called?

Solved Customisation
  • DownPWundefined

    @phenomlab

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

    PW and WS Spirit alive

    1
  • phenomlabundefined

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    👍
    1
  • DownPWundefined

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

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW Thanks.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    PW and WS Spirit alive

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

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1
  • DownPWundefined

    nope sorry, same things

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • 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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    2
  • DownPWundefined

    seems to be good my friend 🙂

    PW and WS Spirit alive

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

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

    @DownPW looks good to me.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Madchatthewundefined

    TNG + Nodebb

    General
    4
    0 Votes
    4 Posts
    129 Views
    phenomlabundefined

    @Madchatthew said in TNG + Nodebb:

    you have to try and use duck tape and super glue to change something to make it do what you want it to do

    I couldn’t have put that better myself.

  • crazycellsundefined

    Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    1k Views
    phenomlabundefined

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

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

    Once you’re in that rabbit hole, it’s impossible to get out of it.

  • cagatayundefined

    Header Menu After Upgrading V3.1.1

    Solved Customisation
    2
    2 Votes
    2 Posts
    188 Views
    phenomlabundefined

    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right.

    If you’d like to retain the original behavior, you can add this css class

    [data-widget-area="brand-header"] { justify-content: end; display: flex; }

    Further information here

    https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296

  • cagatayundefined

    Issues with Progress Bar on v3

    Solved Customisation
    48
    14 Votes
    48 Posts
    3k Views
    phenomlabundefined

    @Panda You could use the below

    .page-topic .pagination-block.ready { display: none; }
  • Pandaundefined

    Adding fileWrite to nodebb code

    Solved Configure
    16
    5 Votes
    16 Posts
    773 Views
    phenomlabundefined

    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.

  • crazycellsundefined

    navigation bar is misplaced when the window gets smaller

    Solved Customisation
    23
    10 Votes
    23 Posts
    2k Views
    phenomlabundefined

    @DownPW sounds good.

  • crazycellsundefined

    [NodeBB] First post customization

    Solved Customisation
    5
    4 Votes
    5 Posts
    711 Views
    crazycellsundefined

    @phenomlab thanks 🙏

  • JACundefined

    Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    742 Views
    phenomlabundefined

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation