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

I have added it it just isn't posted for some reason i'm new to this site so far i don't like how the display code script works in the WYSIWYG i fixed the errors that were in while i was trouble shooting so it's back to it's "broken completed state" — Zeenjayli
– Zeenjayli, Commented Jan 20, 2010 at 14:36
Ok so now the code is correct again but if you check out tdr.host22.com and click about me you will notice it loads the whole site inside the div instead of loading the div #about_section in sections.html ... — Zeenjayli
– Zeenjayli, Commented Jan 20, 2010 at 15:40
ok fixed that issue but now it's doing the original issues loading the Div but blank no javascript. — Zeenjayli
– Zeenjayli, Commented Jan 20, 2010 at 15:41

rfunduk · Accepted Answer · 2010-01-20 21:15:32Z

3

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.

edited Jan 20, 2010 at 21:15

answered Jan 20, 2010 at 14:23

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zeenjayli Over a year ago

i'm new to JS so i have no idea how to do that

Zeenjayli Over a year ago

thanks duks i'll read up on the callbacks do u have any suggestion for loading the javascript tags in the dom instead of executing them when i click the link

Nick Craver · Accepted Answer · 2010-01-20 14:20:17Z

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>

answered Jan 20, 2010 at 14:20

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

3 Comments

Mottie Over a year ago

He is trying to load jQuery, but from google code (jqueryjs.googlecode.com/files/jquery-1.2.6.min.js). So it's trying to download it instead of providing the script.

Nick Craver Over a year ago

@fudgey: He is now :) There was no jQuery script reference when this was asked/answered :)

Zeenjayli Over a year ago

well i fixed all the code but as far as i can tell still not working.

Jan Aagaard · Accepted Answer · 2010-01-20 14:21:39Z

0

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, i.e. /scripts/li.js, so that you don't have to change it when the site is moved to another domain.

answered Jan 20, 2010 at 14:21

Jan Aagaard

11.2k8 gold badges49 silver badges86 bronze badges

Comments

Alpha Codemonkey · Accepted Answer · 2010-01-21 21:15:15Z

0

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

edited Jan 21, 2010 at 21:15

answered Jan 20, 2010 at 14:23

Alpha Codemonkey

3,27123 silver badges27 bronze badges

1 Comment

Zeenjayli Over a year ago

content.load("#aboutme_panel", hideLoading); isn't going to load anything. was a test for calling a hidden div panel directly off the imvu homepage

Collectives™ on Stack Overflow

my javascript in external html is not loading

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related