Jquery not loading / running on Wordpress home page

Question

I'm hoping someone can help. I'm trying to get some animation on scroll working with a jQuery script I found. I think I've managed to get it to read $ and jQuery as Wordpress runs in NoConflict mode, but so far I am unable to get the script to do anything.

Here is the JS:

   jQuery(document).ready(function($) {
$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $('.revealOnScroll').addClass('.animated'); }

  $window.on('scroll', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('.animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('.animated ' + $this.data('animation'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        $(this).removeClass('.animated .fadeInUp .flipInX .lightSpeedIn')
      }
    });
  }

  revealOnScroll();
});

        });

I'm not great with jQuery, but any pointer would be great. I'm pretty sure the problem lies within the script and no classes are added or removed.

what is written in the console ?

mmm
– mmm

2016-03-26 11:21:52 +00:00
Commented Mar 26, 2016 at 11:21 — mmm
– mmm, Commented Mar 26, 2016 at 11:21

Mehul Gohil · Accepted Answer · 2016-03-26 14:46:44Z

You have initialized the script twice. Here is the updated script:

jQuery(document).ready(function($) {
var $window           = $(window),
win_height_padded = $window.height() * 1.1,
isTouch           = Modernizr.touch;

if (isTouch) { $('.revealOnScroll').addClass('.animated'); }

$window.on('scroll', revealOnScroll);

function revealOnScroll() {
    var scrolled = $window.scrollTop(),
    win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
        var $this     = $(this),
        offsetTop = $this.offset().top;

        if (scrolled + win_height_padded > offsetTop) {
            if ($this.data('timeout')) {
                window.setTimeout(function(){
                    $this.addClass('.animated ' + $this.data('animation'));
                }, parseInt($this.data('timeout'),10));
            } else {
                $this.addClass('.animated ' + $this.data('animation'));
            }
        }
    });
   // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
       var $this     = $(this),
       offsetTop = $this.offset().top;
       if (scrolled + win_height_padded < offsetTop) {
           $(this).removeClass('.animated .fadeInUp .flipInX .lightSpeedIn')
       }
   });
}

revealOnScroll();
});

UPDATE: This script is not working because you have used jQuery script inside Javascript which won't work. You need to use either javascript or jQuery.

revealOnScroll() is a javascript function while .each used inside this function is a jQuery function. Please be clear whether you want to use jQuery or javascript.

UPDATE 1:

Add this script after jquery.js which you have missed.

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>

Hope this helps!

Thanks Mehul Gohil, Ive just tried adding this and it doesnt seem to make a difference. Here is the link dev.silverfx.co.uk if you dont mind taking a look for me. Thank you — blackhill24
– blackhill24, Commented Mar 26, 2016 at 12:24
@Jonnygogo: I have added an update to my answer at the end. Please check. Thanks — Mehul Gohil
– Mehul Gohil, Commented Mar 26, 2016 at 13:23
I copied the code straight from here, codepen.io/benske/pen/yJoqz I didnt think i had made any changes and it works fine here? — blackhill24
– blackhill24, Commented Mar 26, 2016 at 14:35
Perfect @Mehul Gohil, i was convinced this was included already but clearly my mistake, thanks very much for you help! — blackhill24
– blackhill24, Commented Mar 26, 2016 at 16:26

Stack Exchange Network

Jquery not loading / running on Wordpress home page

1 Answer 1

Your Answer

Hot Network Questions

Jquery not loading / running on Wordpress home page

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions