Jquery drop down not firing on server, works on desktop

Question

I was handed a script to update a web page for a client (another team member wrote the Jquery)and he handed me all of his test files. Running locally, the jquery drop down (very simple) worked just fine.

I ported over the code to ExpressionEngine, yet it doesn't do anything. I know that Jquery itself is functioning fine because the slider and other elements powered by it work appropriately. The drop down just doesn't do anything.

Curious, I inserted the Jquery function located in the function.js into the command line and it worked..

So, and correct me if I'm wrong here, it appears that its not running the function on load? Any ideas here?

$(window).load(function() {
    $('.slider').flexslider({
        animation: "slide",
        slideshowSpeed: 6000,
        animationSpeed: 800,
        pauseOnAction: false
    });

    $('.testimonials .flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 600000,
        animationSpeed: 800,
        pauseOnAction: false,
        directionNav: false
    });

    $('.nav li').hover(function() {
        $('.sub-menu', this).stop(true, true).slideDown();
    }, function() {
        $('.sub-menu', this).slideUp();
    });
});

^ Barebones simple. The only code that changed was the html (for the menu), the CSS (for styling sub elements) and this function.JS file.

Here is the 'old' version:

$(window).load(function() {
$('.slider').flexslider({
    animation: "slide",
    slideshowSpeed: 6000,
    animationSpeed: 800,
    pauseOnAction: false
});

$('.testimonials .flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 600000,
    animationSpeed: 800,
    pauseOnAction: false,
    directionNav: false
});

});

Such a miniscule issue, but it is holding me up. Any thoughts?

Answer 1

This probably wont make a difference, but try to change $(window).load(function() { to $(document).ready(funciton() { or $(function() {

Futher reading: window.onload vs $(document).ready()

window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera)

Also, make sure you surround your jQuery selectors in a if ($(selector).length) check, if they are not present on the page, it will cause an error and scripts will stop processing:

$(function() {
    if ($('.slider').length) {
        $('.slider').flexslider({
            animation: "slide",
            slideshowSpeed: 6000,
            animationSpeed: 800,
            pauseOnAction: false
        });
    };

    if ($('.testimonials .flexslider').length) {
        $('.testimonials .flexslider').flexslider({
            animation: "slide",
            slideshowSpeed: 600000,
            animationSpeed: 800,
            pauseOnAction: false,
            directionNav: false
        });
    };

    if ($('.nav li').length) {
        $('.nav li').hover(function() {
            $('.sub-menu', this).stop(true, true).slideDown();
        }, function() {
            $('.sub-menu', this).slideUp();
        });
    });

});

http://jsfiddle.net/p5JpP/1/