jQuery script is loaded but nothing happen

1 Views

Im using this script (following a video tutorial) but nothing happens and I have no error: 

$(document).ready(function () {

var scrollTop = $(window).scrollTop();
var windowSize = $(window).height();
var appart = 50;

display(scrollTop, windowSize);

$(window).resize(function(){
    var windowSize = $(window).height();
});

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    display(scrollTop, windowSize);
});

function display(scrollTop, windowSize){

    $('.wp-post-image').each(function(){

        var elemTop = $(this).offset().top;

        if($(this).css('opacity') === 0 && (parseInt(elemTop) <= parseInt(scrollTop + windowSize - appart))){

            $(this).fadeTo(2000,1);

        }   

    }); 

}   

});

Its supposed to display my content with transition when scrolling on the page (like lazy loading).

Read More

Im using wordpress.

I really don’t understand why it does not work.
Thank you.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Taken from this page of the WordPress Codex:

    The jQuery library included with WordPress is set to use the noConflict() mode to prevent compatibility issues with other JavaScript libraries that WordPress can use.

    In the noConflict() mode, the global $ shortcut for jQuery is not available, so you need to use:

    jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

    However, if you would prefer to use the short $ instead of jQuery, you can use the following wrapper around your code:

    jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

    Hope that helps.