Ask your WordPress questions! Pay money and get answers fast! (more info)

jQuery(document).scroll() not firing on my page, why?? WordPress

I am migrating a static HTML site to WordPress and for some reason jQuery(document).scroll() is NOT firing on the WordPress migrated page although the code is almost identical…

I have put up both versions of my code:

Non-wordpress code is on http://coffee.matgargano.com/ (works here, check out the console.log("?") in script.js that fires when you scroll on the page...


WordPress version is on http://test.matgargano.com/ (Does not work here, check out the console.log("?") in scripts.js that DOES not fire when you scroll on the page...)

Any help is greatly appreciated...

Answers (4)

2013-03-03

Duncan O'Neill answers:

Hi there,

in the version which works, you call the jquery-ui-1.10.0.custom.min.js BEFORE your jquery.scrollTo-min.js script. I'm guessing that this is the difference, because it seems likely that the scrollTo-min.js script depends on the jquery-ui.... script.

Try using [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]wp_enqueue_script[[/LINK]] to make the scrollTo-min.js depend on the jquery-ui script.

best,

2013-03-04

Francisco Javier Carazo Gil answers:

To be able to make one script depends on another do the next:

wp_enqueue_script(
'jquery-ui',
get_template_directory_uri() . '/js/YOUR_JQUERY_UI.js',
array('jquery')
);
wp_enqueue_script(
'scroll-to',
get_template_directory_uri() . '/js/YOUR_SCROLL_TO.js',
array('jquery', 'jquery-ui')
);

2013-03-04

WisdmLabs answers:

Hello Mackrider,

While the other approaches are definitely good and apt, this will simplify the steps even further.

If you have added scripts directly into your theme's header.php, then writing jquery.scrollTo-min.js below jquery-ui-1.10.0.custom.min.js should work. If it is coming through theme's code, then try appending following code at the bottom of functions.php residing in the theme's folder.


function adding_scrollto_script() {
wp_enqueue_script('theme-jquery', get_template_directory_uri().'/js/jquery.js');
wp_enqueue_script('theme-jquery-ui', get_template_directory_uri().'/js/jquery-ui-1.10.0.custom.min.js' , array('theme-jquery'));
wp_enqueue_script('scrollto-script-on-homepage', get_template_directory_uri().'/js/scripts.js', array('theme-jquery-ui'), false, true);
}

add_action('wp_enqueue_scripts', 'adding_scrollto_script');

2013-03-05

surefirewebserv answers:

WordPress Already comes with jquery. If all your trying to do is scroll, then this may be the easiest.

add_action('wp_enqueue_scripts','gs_enqueue_scripts');
function gs_enqueue_scripts () {
wp_enqueue_script('scrollto-script-on-homepage', get_template_directory_uri().'/js/scripts.js', array('jquery'), false, true);
}


Then in your scripts.js add no conflict code.

/*SMOOTH SCROLLING*/
jQuery(".scroll, .gototop a").click(function(event){
event.preventDefault();
jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top}, 500);
});


Edit the classes etc as it suits your site.