my javascript in external html is not loading

Question

ok so in order here is my code

/* index.html */

<!-- jQuery Scripts -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>  
    <script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script>
    <link href="http://tdr.host22.com/scripts/tdr.css" rel="stylesheet" type="text/css">
    <!-- Div Layout -->
    <div id="container">
     <div id="dp">my DP here</div>
     <div id="hrefs">
      <ul id="menu">
        <li><a id="home">Home</a></li>
        <li><a id="about">About Me</a></li>
        <li><a id="shop">My Shop / Wishlist</a></li>
        <li><a id="friend">My Friends</a></li>
        <li><a id="vids">Wicked Videos</a></li>
        <li><a id="music">Music Playlist</a></li>
        <li><a id="pics">My Pictures</a></li>
        <li><a id="ranks">My Rankings</a></li>
        <li><a id="stuff">Random Stuff</a></li>
        <li><a id="read">Read Messages</a></li>
        <li><a id="leave">Leave a Message</a></li>
      </ul>
     </div>
     <div id="content">
     TDR Content
      <div id="loading">  
       <img src="images/loading.gif" alt="Loading..." />  
      </div>
     </div>
    </div>

/* li.js */

$(document).ready(function(){
 //References
 var sections = $("#menu a");
 var loading = $("#loading");
 var content = $("#content");

 //Manage click events
 sections.click(function(){
  //show the loading bar
  showLoading();
  //load selected section
  switch(this.id){
   case "home":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #home_section", hideLoading);
    content.slideDown();
    break;
   case "about":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #aboutme_panel", hideLoading);
    content.slideDown();
    break;
   case "shop":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #shop_section", hideLoading);
    content.slideDown();
    break;
   case "friend":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #friend_section", hideLoading);
    content.slideDown();
    break;
   case "vids":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #vids_section", hideLoading);
    content.slideDown();
    break;
   case "music":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #music_section", hideLoading);
    content.slideDown();
    break;
   case "pics":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #pics_section", hideLoading);
    content.slideDown();
    break;
   case "ranks":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #ranks_section", hideLoading);
    content.slideDown();
    break;
   case "stuff":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #stuff_section", hideLoading);
    content.slideDown();
    break;
   case "read":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #read_section", hideLoading);
    content.slideDown();
    break;
   case "leave":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #leave_section", hideLoading);
    content.slideDown();
    break;
   default:
    //hide loading bar if there is no selected section
    hideLoading();
    break;
  }
 });

 //show loading bar
 function showLoading(){
  loading
   .css({visibility:"visible"})
   .css({opacity:"1"})
   .css({display:"block"})
  ;
 }
 //hide loading bar
 function hideLoading(){
  loading.fadeTo(1000, 0);
 };
});

/* sections.html */

<div id="home_section">
Home haha
</div>
<!-- About Us -->
<div id="about_section">  
<script type='text/javascript'><!--
imvu_avatar_name = "TheDarkRaver";
imvu_panel_name = "aboutme_panel";
imvu_section_name = "mp_left";
imvu_panel_width = 590;
imvu_panel_height = 459;
//--></script>
</div>

/* tdr.css */

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baseline;
}
/*Removing Bullets*/
#menu {
  padding:0;
  margin:0;
  width:0;
}
#menu li { 
list-style-type:none; 
display: inline;
} 
/*Menu Link Style */
#menu a, #menu a:visited {
  position:relative; /* ADDED */
  display:block;
  width:9em;
  cursor: crosshair;
  border:1px solid orange;
  font-family:cursive, sans-serif;
  font-size:0.7em;
  text-align:center;
  text-decoration:none;
  background:transparent;
  color:orange;
  padding:0.25em;
}
#menu a:hover {
 color:red;
 border:1px solid red;
}
#container {
 position:relative;
 width: 700px;
 height:400px;
 background-color: transparent;
 border: 1px;
 border-color:orange;
 border-style: dotted;
 margin: 0pt auto;
}
#hrefs {
 width:0px;
}
#content {
 position: absolute;
 top:0px;
 left:9.8em;
 width:580px;
 height:100%;
 border:1px solid #0066CC;
 background-color:transparent;
 background-image:  url("../images/cont.png");
 background-repeat: repeat;
 overflow: auto;
 color: #000000;
 line-height: 1.3em;
 font-size: 12px;
}
#dp {
 position:absolute;
 bottom:0px;
 left:0px;
}
#loading{  
     text-align: center;  
     visibility: hidden;  
}  
.clear{
 clear: both;
 height: 0;
 visibility: hidden;
 display: block;
}

Answer 1

Like Nick said, you probably aren't including jQuery, are there any errors in Firebug or anything like that?

Also, you might want to consider replacing most of your huge switch with something more like:

content.slideUp();
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
content.slideDown();

Edit: To be more clear about this last part, first go into your markup and change:

<li><a id="about">About Me</a></li>

into

<li><a id="aboutme">About Me</a></li>

This is because in your javascript you're showing a section called 'aboutme'... best to just keep the names matching.... then delete your entire switch and replace it with:

content.slideUp();
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
content.slideDown();

So the entire javascript portion of your code becomes (with some other improvements):

$(document).ready( function() {
  var sections = $("#menu a");
  var loading = $("#loading");
  var content = $("#content");

  function showLoading() {
    loading.css( {
      visibility: 'visible',
      opacity: 1,
      display: 'block'
    } );
  }

  function hideLoading(){
    loading.fadeTo(1000, 0);
  }

  sections.click( function() {
    showLoading();
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
    content.slideDown();
  } );
} );

As you can see, this code doesn't even need comments because it's so short and concise.

Also, reading through this, it seems you almost certainly have other problems... The animations wont happen the way you expect, slideUp is asynchronous meaning that it will start sliding up and then immediately load, you probably don't want this behavior so look into jQuery's method of chaining animations (via callbacks, see the docs for slideUp , for example), or take a look at jQuery 1.4's delay method.

Answer 2

I don't see you loading jQuery anywhere...you have to include the library itself at some point before your code, like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>    
<script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script>

Answer 3

Have you tried opening http://tdr.host22.com/scripts/li.js in your browser? You should be able to downloade the file directly.

Maybe you accidentally enabled some user authentication on your scripts folder?

I would also recommend using a path without the domain name, ie /scripts/li.js, so that you don't have to change it when the site is moved to another domain.

Answer 4

The JavaScript in sections.html is inside <div id="about_section">

content.load("http://tdr.host22.com/sections.html #home_section", hideLoading); will only load <div id="home_section"> from sections.html

To load the JavaScript from sections.html try this

content.load("http://tdr.host22.com/sections.html #about_section", hideLoading);