-1

I'm using this little gem from CSS Tricks to apply a class to elements once they appear in the viewport window, but it doesn't seem to be working with my WP based site...

(function($) {

$.fn.visible = function(partial) {

  var $t            = $(this),
      $w            = $(window),
      viewTop       = $w.scrollTop(),
      viewBottom    = viewTop + $w.height(),
      _top          = $t.offset().top,
      _bottom       = _top + $t.height(),
      compareTop    = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

})(jQuery);

var win = $(window);
var allMods = $(".work-thumb");

allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
        el.addClass("already-visible"); 
    } 
});

win.scroll(function(event) {

allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
    el.addClass("come-in"); 
} 
});

});

I can't for the life of me figure out what's going wrong.

Anyone have any ideas?

  • var win = $(window); should show up in your error console. – fuxia Dec 23 '13 at 16:40
  • @toscho It doesn't. That was my first port of call – Poisontonomes Dec 23 '13 at 16:43
  • the $ doesn't work with the WordPress version of jQuery, this should be showing up in your error console. most of the questions over in the related column to the right deal with this in one way or another, including this one you asked yourself. – Milo Dec 23 '13 at 23:33
0

See this question for an answer. You can do also

var $ = jQuery.noConflict()

before your script.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.