my javascript in external html is not loading

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;
}

Answers


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.


Need Your Help

Android Google Directions API multiple routes

java android google-maps google-directory-api

With google directions API v3 can you can multiple routes for the same location? if yes can someone please explain how can I do it, or any tutorials please? Right now I have only 1 route.

Generic Method for Numeric Types

vb.net generics extension-methods numeric

In VB.NET if I want to have an extension method for numerical variables of different types (Integer, Long, Decimal, Double) I always have to define multiple methods for these:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.