Skip to content

Issues with Progress Bar on v3

Solved Customisation
  • Faced some problem with v3 version as photo;

    image.png

  • @cagatay @DownPW ok, I think I have a solution that is also easily expanded upon. After looking into this in more detail, the calls between standard posts, categories, etc are handled differently when calling chats.

    Based on this, you should use the below modified progress bar js code (replace what you have)

    // Navigation / Scrollbar
    $(window).on('action:ajaxify.end', function(data) {
        var matched = false;
        $(document).ready(function() {
            var bar = $('.reading-meter');
            // Main progressbar function
            window.onscroll = function() {
                pageScroller();
            };
    
            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) + "%");
                
            $(window).scroll(function() {
            var bar = $('.reading-meter');
            var thisURL = window.location.href;
            var checkURL = new Array("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) {
                //console.log("Page '" + checkURL[i] + "' is in URL - hide progress bar");
                bar.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');
                } else {
                   bar.removeClass('show');
                }
                var x = $('[component="bottombar"]').css("bottom");
                var bpos = x.slice(0, -2);
                //console.log("Bottom bar position is " + bpos);
                $(document).ready(function() {
                    if ($(window).width() < 767) {
                        if (bpos == '0') {
                            $('.toAbove').attr('style', 'bottom: 50px !important');
                        } else {
                            $('.toAbove').attr('style', 'bottom: 0px !important');
                        }
                    }
                });
            }
            });
        }
        });
        $(document).on("click", "#pageUp", function(e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: 0
            }, '300');
        });
        $(document).on("click", "#pageDown", function(e) {
            e.preventDefault();
            $("html, body").animate({
                scrollTop: $(document).height()
            }, '300');
        });
    });
    

    Directly underneath, you should also add

    /*
    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("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) {
                //console.log("Page '" + checkURL[i] + "' is in URL - hide progress bar");
                bar.removeClass('show');
            }
        });
    });
    

    You’ll notice that both of these functions make use of arrays - here, it’s possible to state the page where you do not want the progress bar to trigger. For example

            var checkURL = new Array("topic", "notifications", "user");
    

    See how each URL component to check is in quotes (and comma separated) - you can add your own here, so for example, if you wanted to include an “about” page, you’d have

            var checkURL = new Array("topic", "notifications", "user", "about");
    

    This needs to be present in both functions to work properly.

    This code will prevent the progress bar firing on user, notifications, and topic but (as you can see) is easily extended to cover multiple locations.

    Try it out and let me know how you get on. It’s active here currently.

  • @cagatay That code isn’t to be used for v3. I’ll update the original post.

  • @cagatay I’m checking your site now and cannot see this issue ?

  • its happening sometime not everytime

  • @cagatay very odd - it shouldn’t trigger there at all !!

  • @cagatay said in Reading Meter Progress bar:

    its happening sometime not everytime

    Actually, I think I might know what this is. Does it appear after you’ve been scrolling through recent posts for example, then click on a PM to view that ? The output of NaN (Not a Number) usually means that what you are seeing is actually an artefact that should have been removed.

  • @cagatay Sorry - that’s not what I meant - can you confirm if that is the case? If it is, it’s a simple fix, but needs some new code on your site.

  • yes it happened as you explanied Mark.
    But not just it on phone the scrool not working and the page is freezing.

  • @cagatay That’s very strange. Perhaps you should remove it then for the time being. Something clearly isn’t right there.

  • @cagatay @DownPW looking for suggestions here. I’m able to replicate this issue (now that I better understand it), and to me, the best solution is for the progress bar to not fire on certain pages - clearly, chat is one of them, but there are others also I expect, and it’s this that I’d appreciate your feedback on.

  • @cagatay @DownPW ok, I think I have a solution that is also easily expanded upon. After looking into this in more detail, the calls between standard posts, categories, etc are handled differently when calling chats.

    Based on this, you should use the below modified progress bar js code (replace what you have)

    // Navigation / Scrollbar
    $(window).on('action:ajaxify.end', function(data) {
        var matched = false;
        $(document).ready(function() {
            var bar = $('.reading-meter');
            // Main progressbar function
            window.onscroll = function() {
                pageScroller();
            };
    
            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) + "%");
                
            $(window).scroll(function() {
            var bar = $('.reading-meter');
            var thisURL = window.location.href;
            var checkURL = new Array("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) {
                //console.log("Page '" + checkURL[i] + "' is in URL - hide progress bar");
                bar.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');
                } else {
                   bar.removeClass('show');
                }
                var x = $('[component="bottombar"]').css("bottom");
                var bpos = x.slice(0, -2);
                //console.log("Bottom bar position is " + bpos);
                $(document).ready(function() {
                    if ($(window).width() < 767) {
                        if (bpos == '0') {
                            $('.toAbove').attr('style', 'bottom: 50px !important');
                        } else {
                            $('.toAbove').attr('style', 'bottom: 0px !important');
                        }
                    }
                });
            }
            });
        }
        });
        $(document).on("click", "#pageUp", function(e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: 0
            }, '300');
        });
        $(document).on("click", "#pageDown", function(e) {
            e.preventDefault();
            $("html, body").animate({
                scrollTop: $(document).height()
            }, '300');
        });
    });
    

    Directly underneath, you should also add

    /*
    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("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) {
                //console.log("Page '" + checkURL[i] + "' is in URL - hide progress bar");
                bar.removeClass('show');
            }
        });
    });
    

    You’ll notice that both of these functions make use of arrays - here, it’s possible to state the page where you do not want the progress bar to trigger. For example

            var checkURL = new Array("topic", "notifications", "user");
    

    See how each URL component to check is in quotes (and comma separated) - you can add your own here, so for example, if you wanted to include an “about” page, you’d have

            var checkURL = new Array("topic", "notifications", "user", "about");
    

    This needs to be present in both functions to work properly.

    This code will prevent the progress bar firing on user, notifications, and topic but (as you can see) is easily extended to cover multiple locations.

    Try it out and let me know how you get on. It’s active here currently.

  • phenomlabundefined phenomlab has marked this topic as solved on
  • phenomlabundefined phenomlab referenced this topic on
  • @cagatay works as intended ?

  • it not works on topics but on the main page and chat yes working.

  • @cagatay perfect. That’s the exact behavior intended.

  • This post is deleted!
  • Your code works perfectly for chat on desktop bit not on mobile.
    I’m alone ?

  • @DownPW I think you might be, yes. Seems to work fine for me - @cagatay ?


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
  • Forum customisation

    Customisation
    11
    6 Votes
    11 Posts
    236 Views

    Thank you Mark, the changes look fantastic!!

  • Fancybox zoom

    Unsolved Customisation
    2
    0 Votes
    2 Posts
    57 Views

    @DownPW Technically, it should be possible with the addition of the below

    Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, },

    Meaning your code block becomes

    function fancybox() { if (top.location.pathname !== '/login') { $(document).ready(function() { $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]').addClass("noanimate"); }); }); Fancybox.bind( 'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]', { Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, }, } ); } }

    Note, that you just need to add/remove the elements in the toolbar you do not need. Obviously, zoomIn and zoomOut are the ones you are specifically interested in. However, if Fancybox detects that the image has already been zoomed as far as possible, then this will not work. You’d need an external library such as zoom.js to add this functionality, or perhaps simpler

    https://www.jacklmoore.com/zoom/

    A good example of how you’d make these two independent libraries work together is below

    https://codepen.io/ezra_siton/pen/VgrjKw

    It’s worth nothing that this specific code is based on Fancybox 3, so may need to be refactored to work with the latest version 5.

  • Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    2k Views

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

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

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

  • What is this bar called?

    Solved Customisation
    92
    36 Votes
    92 Posts
    8k Views

    This is good 👍

  • NodeBB v3 Vote Icon

    Solved Customisation
    9
    2 Votes
    9 Posts
    727 Views

    @phenomlab forget it, look likes good with your codes.

  • Mongo Eror with v3 beta-1

    Solved Customisation
    8
    4 Votes
    8 Posts
    385 Views

    @cagatay ok. You should use a copy of the production database or a completely new one. Never share a database between two instances of NodeBB.

  • Footer bar add center text

    Solved Customisation
    41
    8 Votes
    41 Posts
    4k Views

    @phenomlab said in Footer bar add center text:

    div#console-nav-tab

    Ah ok test with bottom: 0px !important; idem

  • [NODEBB] Help for my custom CSS

    Solved Customisation
    199
    39 Votes
    199 Posts
    32k Views

    I will test ASAP

    Many thanks my friend