Jquery plugin not working on single pages

Question

I use a news ticker jQuery plugin to show the last posts.

The codes are in the header.php file and work fine on the home page, but not on single pages. The links are loaded but they don't move.

Here is the home page and here the single page.

Answer 1

Your Theme is enqueueing jQuery 1.7.2:

<script type="text/javascript" src="http://dayfun.ir/wp-content/themes/Sparks/lib/js/jquery.min.1.7.2.js"></script>

And WordPress is enqueueing jQuery 1.8.3:

<script type='text/javascript' src='http://dayfun.ir/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

See also, Frank's answer regarding jQuery no-conflict mode.

Edit

WordPress bundles a version of jQuery. You will inevitably encounter problems if your Theme (or a Plugin) enqueues a separate version of jQuery - whether by enqueueing that separate jQuery version along side the WordPress-bundled version, or else by deregistering the core-bundled version, and enqueueing a custom version.

Don't register a custom version of jQuery via your Theme or any Plugins. If you need to use jQuery, just use the core-bundled version, via:

wp_enqueue_script( 'jquery' );

Answer 2

All the jQuery code in WordPress needs to run in No Conflict mode: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

So in your case the initialization of the Plugin needs to be the following:

(function($) {
    $('.vertical-ticker').totemticker({
        row_height  :   '20px',
        speed       :   500,
        interval    :   1800,
        max_items   :   1,
        mousestop   :   true,
        direction   :   'down',
    });
})(jQuery);

Answer 3

You're getting a JS error when trying to load the ticker in the single page:

Cannot call method 'totemticker' of null.

It might be conflict with another plugin, or the totemticket script is not set to load in single pages.

Can you add parts of the header.php code? and perhaps the single.php code?

Answer 4

Had a similar issue on my site, solved it by creating a single js file with all the scripts that were earlier in the header and footer.. this somehow solved the issue in the inner pages.. Also noticed that I was loading jQuery twice as well, removed the extra jquery file (Note: this did not solve the issue)..