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