0

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;
    }
2
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by s32ialx
1

While I am asking for help how would i go about implementing my li.js switch to something like this...

You'd want to take advantage of what's called a fallthrough.

switch(this.id){
	case "home":
	case "about":
	case "shop":
	case "friend":
	case "vids":
	case "music":
	case "pics":
	case "ranks":
	case "stuff":
	case "read":
	case "leave":
		content.slideUp();
		content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
		content.slideDown();
		break;
	default:
		hideLoading();
	break;
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.