jQuery iterate through function multiple times with different params

Question

For the site I am working on I need to add a class to an element as it scrolls into view. There are multiple elements on the page which this needs to work for.

I have setup a fiddle displaying how it works: http://jsfiddle.net/e8qX9/35/

Below is the part which is causing me an issue:

if ($('#one').doesExist()) { // checks if element exists
    $(window).scroll(function () { // on scroll
        addInView('#one', 'slideleft', 0.2); // run function with params
    });
    addInView('#one', 'slideleft', 0.2); // run function again on page load
}

if ($('#two').doesExist()) {
    $(window).scroll(function () {
        addInView('#two', 'slideright', 0.5);
    });
    addInView('#two', 'slideright', 0.5);
}

if ($('#three').doesExist()) {
    $(window).scroll(function () {
        addInView('#three', 'slideup', 0.2);
    });
    addInView('#three', 'slideup', 0.2);
}

if ($('#four').doesExist()) {
    $(window).scroll(function () {
        addInView('#four', 'slidedown', 0.5);
    });
    addInView('#four', 'slidedown', 0.5);
}

if ($('#five').doesExist()) {
    $(window).scroll(function () {
        addInView('#five', 'slideleft', 0.2);
    });
    addInView('#five', 'slideleft', 0.2);
}

I was wondering if there was a better way of running this function multiple times, both when the page loads and when it scrolls. I thought about creating a multidimensional array and looping through it, but can't quite get my head around it.

Thanks

score 0 · Answer 1 · answered Nov 20 '13 at 12:16

Well, on the array looping part, you can have this

$('section[id]').each(function(i, e){
    $(window).scroll(function() {
        addInView(e, 'slideleft', 0.2);
    });
    addInView(e, 'slideleft', 0.2);
});

Where section[id] matches all section element that has an id. You should use a css class and try to avoid id's as much as posible.

The each iterates on those elements using a function with i = index and e = element.

Other than that, you are registering a scroll event on the window for each element you have, and that is not good. Its preferable to register only one event and in there do the necesary work. Maybe finding another event type (not sure if this would work http://api.jquery.com/visible-selector/)

score 0 · Answer 2 · answered Nov 20 '13 at 12:19

(function($){

$.fn.gAppear = function(options){

    var defaults = {
        slideDuration: 0.2,
        slideDirection: "slideleft"
    };

    options = $.extend(defaults, options);

    var appear = $(this); 

    $(window).scroll(function () {
        addInView(appear, defaults.slideDirection, defaults.slideDuration);
    });
   addInView(appear, defaults.slideDirection, defaults.slideDuration);


    function isScrolledIntoView(elem, vpoffset) {    
        var docViewTop = $(window).scrollTop();
         //$(elem).text(docViewTop);
        var docViewBottom = docViewTop + $(window).height();
         //$(elem).text(docViewBottom);
        var elemTop = $(elem).offset().top + ($(elem).height()*vpoffset);
        $(elem).text(docViewBottom+" "+elemTop);
        return (docViewBottom >= elemTop);

    }

    function addInView(trigger, cssClass, vpoffset) {
        if (isScrolledIntoView(trigger, vpoffset)) {
            if (!$(trigger).hasClass(cssClass)) {
                $(trigger).addClass(cssClass);
            }
        }
    }

};

})(jQuery);

//Instantiate

$('#one').gAppear({ slideDirection: "slideright", slideDuration: 0.1 });

$('#two').gAppear({ slideDirection: "slideleft" });

jQuery iterate through function multiple times with different params

2 Answers2