Question

I have created a jQuery window scroll-bar detector but when I re-size the browser window, in-turn changing the scroll-bar status, either from visible to not visible or vice-versa, the status notifier remains static. How can I keep the status notifier continuously updated on every re-size in a simple way without AJAX calls, via strictly javascript?

For further context, I am basically trying to come up with a solution for semi-infinite-scrolling if the content dosn’t exceed the window size. If one of you guys figures this out it will be very benifical for a lot of UI developers trying to incorporate the highly demanded and popular load-on-scroll effect. Thanks in advance. Here is my demo.

$(window).resize(function () {

    ///????

});

Answer 1

You can use so-called functions to achieve this. In Javascript, functions are actually objects and can be simply stored in variables and passed around as parameters.

Take this example:

//first define your function - maybe give it a better name than I did :)
var detectScrollbar = function () {
    if($(window).height() >= $(document).height()){
        $('#statusNotifier1').fadeIn("slow");
        $('#statusNotifier2').hide();
    }
    else
    {
        $('#statusNotifier1').hide();
        $('#statusNotifier2').fadeIn("slow");
    }
};

//call it initially
detectScrollbar();

//pass it to .resize() so it will be called when the event fires
$(window).resize(detectScrollbar);

You could put this whole thing into your $(document).ready();.

Have fun with the jsFiddle Demo. I hope all those sad UI developers will be dancing around with smiles on their face, celebrating :).