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?

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

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/

edited May 23 '17 at 10:31

Community

1
1

answered Mar 24 '14 at 23:14

logikal

1,087
12
24

Just tried this for kicks and giggles.. Nothin'. I've read about this before, though. I appreciate the reply! – Michael Watson Mar 24 '14 at 23:19
as @Goose said, is there any console errors that would help us debug this? – logikal Mar 24 '14 at 23:20
1

Also, what browser are you using to test, could you setup a fiddle, link to a demo? – logikal Mar 24 '14 at 23:21
Using latest version of Chrome, there are no console errors. I did a more thorough check, though, and in spite of updating the aforementioned file it appears that the page is still being rendered with the old one.. Cleared ExpressionEngine cache (did nothing). Edit: Well, its a server cache deal. So I shoved the jquery into the inline code until I'm done working on it so I can at least do proper testing. Server will catch up eventually I suppose. – Michael Watson Mar 24 '14 at 23:28
when you include the script, append ?v=1 to the end of the filename, this should cause the new version of the script not to be read from cache. – logikal Mar 24 '14 at 23:36

Jquery drop down not firing on server, works on desktop

1 Answers1