jQuery dropdown menu wont work in browser, works in jsfiddle

Question

So I tried to use code posted here somewhere (by users/1022305/trevor) but can't make it work in browser.

Here is the fiddle by the author of the code: http://jsfiddle.net/trevordowdle/S7n2b/

Tried to wrap jquery code like this:

var stop = true;
var hovered;
var timeout;


$(document).ready(function(){
    $('.nav').hover(
        function(){
            clearTimeout(timeout);
            stop = true;
            hovered = this;
            timeout = setTimeout(function(){
            if($(hovered).hasClass('nav_menu_link_drop')){
                $('.content').css('z-index',0);
                $(hovered).next('.content').css('z-index',5);        
                $(hovered).next('.content').slideDown(350);
                timeout = setTimeout(function(){
                    $('.content').not($(hovered).next('.content')).slideUp(350);  
                },200);
            }
            else
                $('.content').slideUp(350);    
            },400);
        },
        function(e){
            stop = false;
            clearTimeout(timeout);
            setTimeout(function(){
                if(!stop)
                    $('.content').slideUp(350);
            },500);
        }
    );
});

$(document).ready(function(){
    $('.content').hover(
        function(){
            stop = true;    
        },
        function(){

        }
    );
});

$(document).ready(function(){
    $('#nav_menu').hover(
        function(){

        },
        function(){
            timeout = setTimeout(function(){
                $('.content').slideUp(350);
            },200);
        }
    );
});

So above is an example with "$(document).ready(function(){", also tried wrapping with "$(window).load(function() {" and "$(function() {" - will not work.

There is no drop down effect at all.

Any suggestions?

Sorry! I have just edited my post. Now there is a valid Fiddle. HTML and CSS are exactly the same as in the fiddle. — Wuu, Jul 11 '14 at 03:35
You are probably trying to run the code before jQuery is loaded. — Felix Kling, Jul 11 '14 at 03:36
Arun P Johny - there is error in console indeed: "Uncaught ReferenceError: $ is not defined" — Wuu, Jul 11 '14 at 03:37
BuddhistBeast - yes, I did link to an external .js file in to which I pasted the code from fiddle. — Wuu, Jul 11 '14 at 03:38
Felix Kling - any suggestions of what should be modified then? — Wuu, Jul 11 '14 at 03:38
can you show us the complete html especially the code that include the jquery.js — strike_noir, Jul 11 '14 at 03:39
No, did you link to the actual jQuery website or anything that contains the literal framework for jQuery? Thank you @strike_noir for asking that! — BuddhistBeast, Jul 11 '14 at 03:39
BuddhistBeast, I have this "" just before tag is closed - just like in the fiddle html. — Wuu, Jul 11 '14 at 03:40
Please [**read the jQuery tutorial first**](https://learn.jquery.com/about-jquery/how-jquery-works/). It shows exactly how your document should be structured. — Felix Kling, Jul 11 '14 at 03:41
@FelixKling , this doesn't mean that he copied the code verbatim. OP split up his JavaScript to a different file and probably took out anything he didn't "need" from the HTML — BuddhistBeast, Jul 11 '14 at 03:41
@BuddhistBeast: If we can't assume that the jsfiddle contains the code the OP has, then we can't do anything at all. — Felix Kling, Jul 11 '14 at 03:43
I moved "" just before the link to the external .js file and it works now... such a stupid thing... Thanks for the tutorial - issue was the simplest matter :/ — Wuu, Jul 11 '14 at 03:46

jQuery dropdown menu wont work in browser, works in jsfiddle

0 Answers0