jsfiddle code working but when in demo page is not

Question

I am testing this fiddle written by @Ilan Biala

It adds a submenu in a menu using jquery 1.9.0, onDomReady and Normalized css as you can see on the jsfiddle. For instance the html is:

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

the result is:

enter image description here

But there is an issue, I am adding the code to a server I have access, and Added the lines:

<link rel="stylesheet" type="text/css" href="css/menu.css"  />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

to emulate those in jsfiddle. The html is:

 <!doctype html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"  />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>
</body>
</html>

So, as you can see the submenu is not working, what could be causing the glitch?

I am suspecting different issues:

Maybe the onDomReady property that wraps the code so it will run in onDomReady window event, if so How do I indicate that on code :

$(document).ready(function() { //ADD ALL THE JS CODE IN menu.js });
The Normalized css, but that is suposed to make a reset....
Theres is an issue in the jquery 1.9.0, maybe the order the using js are placed...

What do you think?

Zaheer Ahmed · Answer 1 · 2013-01-20T17:47:22.613

2

yes you are right;

onDomReadycode is:

$(document).ready(function(){
//your code
})

as if you change the event in jsfiddle to body wrap it would not work.

edited Jan 20 '13 at 17:47

answered Jan 20 '13 at 17:41

Zaheer Ahmed

28,160
11
74
110

So if I understand I should put `` in the html, or in the menu.js I do `$(document).ready(function(){ // the menu.js functions })` which option? – edgarmtze Jan 20 '13 at 17:51
open menu.js and write at top of file at start $(document).ready(function(){ and at the end of file put }); – Zaheer Ahmed Jan 20 '13 at 17:57

score 1 · Accepted Answer · answered Jan 20 '13 at 18:13

See the same fiddle here modified to work with what you want: JS Fiddle Link

Its the exact same fiddle that you posted, just onDomReady set to "no wrap (head)" and JavaScript code wrapped in ready function. This makes it work with the HTML you have posted.

// jQuery(document).ready(function($) {
jQuery(function($) {
 ....
 // your code
});

So, as an answer, when you have jQuery loaded in head tag of your html document, you need to use .ready() API of jQuery and wrap all your code for any DOM manipulation in the ready function

jsfiddle code working but when in demo page is not

2 Answers2