adding jquery – missing something in this code?

[tussle]

Hi
I have added jquery through a posted example, worked fine.

I am trying to add another and followed all the steps exactly, but the js just won't work for a timeline. I tripled check the process .

1. Added html and css (renders fine)

2. Created .js directory and saved file as scroll.js - jquery is first word, then uploaded to js folder in child theme.

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

$(window).scroll(function() {
$('.container p').each(function() {
var scrollTop = $(window).scrollTop(),
elementOffset = $(this).offset().top,
distance = (elementOffset - scrollTop),
windowHeight = $(window).height(),
breakPoint = windowHeight * 0.9;

if (distance > breakPoint) {
$(this).addClass("more-padding");
}
if (distance < breakPoint) {
$(this).removeClass("more-padding");
}
});
});

});

4. Added this to functions.php to enqueue

//* Enqueue scroll rotating script
add_action( 'wp_enqueue_scripts', 'enqueue_scroll' );
function enqueue_scroll() {
wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'jquery' ), '1.0.0', true );

}

The jquery effects do not work.

Any ideas? Thank you.

http://codepen.io/jm/pen/GlICH

[Brad Dalton]

Its hard to test because as soon as you embed code in webpage it breaks unless you wrap it in pre or code tags or better still, a Github Gist.

What happens if you replace this

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

with this:

jQuery(function( $ ){

( Untested )

---

Tutorials for StudioPress Themes.

[tussle]

Thanks!
Very strange, I replaced the one line with yours, it worked, then changed to what I had, that worked too. I don't know the issue. I cleared cache multiple times. But many thanks.

I did not know about pre tags for code, appears fine in my browser but made note. I will test a few more code examples and hope they work. Thanks.

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

$(window).scroll(function(){				 
	$('.container p').each(function(){
    	var scrollTop     = $(window).scrollTop(),
        	elementOffset = $(this).offset().top,
       		distance      = (elementOffset - scrollTop),
			    windowHeight  = $(window).height(),
			    breakPoint    = windowHeight*0.9;

			if(distance > breakPoint) {
				$(this).addClass("more-padding");	
			}  if(distance < breakPoint) {
				$(this).removeClass("more-padding");	
			}
	});
});

});

//* Enqueue scroll rotating script
add_action( ‘wp_enqueue_scripts’, ‘enqueue_scroll’ );
function enqueue_scroll() {
wp_enqueue_script( ‘scroll’, get_stylesheet_directory_uri() . ‘/js/scroll.js’, array( ‘jquery’ ), ‘1.0.0’, true );

}

[Author]

Posts