JSFiddle - React, Tailwind, and code Playground

by jrweinb

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="yensdesign, tutorial, ajax, jquery, javascript, load content" />
    <meta name="description" content="How to load content via AJAX in jQuery - yensdesign.com"/>
    <title>Pixeltree</title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.social-res.com/pixel/css/main.css" />
    <!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
    <![endif]-->
    
</head>
<body>
    <div id="container">
        <div id="content_container">
            <div id="top">
                <h1><a href="/">Pixeltree</a></h1>
            
                <span class="clear"></span>
            </div>
            
            <div id="content_white">
                    <div id="coming_soon">
                        <span id="coming_soon_span"><strong>Coming Soon!</strong> Our new <strong>HTML 5</strong> website is under construction and will launch in September 2011.</span>
                    </div>
                    
            
                    <div id="content_container2">
                            <ul id="menu">
                                <li id="nav1"><a>Web Design</a></li>
                                <li id="nav2"><a>Social Apps</a></li>
                                <li id="nav3"><a>Mobile Apps</a></li>
                                <li id="nav4"><a>Social Strategy</a></li>
                            </ul>
                            <span class="clear"></span>
                            
                            
                            <div id="loading" style="display:none">
                                <img src="http://www.social-res.com/pixel/css/images/ajax-loader.gif"...

CSS

/******* 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, ol, ul, li, 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;
}
body {
background: #fff url(http://www.social-res.com/pixel/css/images/little_pluses-trans.png);
font-size: 12px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
margin: 0pt;
cursor: default;
overflow: hidden;
}
table {
border-collapse: separate;
border-spacing: 0pt;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
input, textarea, select {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
strong {
font-weight: 700;
}
ul {
list-style: outside;
}
a {
cursor: pointer;
color: #296ba5;
text-decoration: none;
}
.clear {
clear: both;
height: 0;
visibility: hidden;
display: block;
}
/******* /GENERAL RESET *******/
/******* REUSE *******/
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: #6ea6fb;
}
h2 {
font-size: 22px;
}
#container {
width: 1024px;
margin: 0pt auto;
color: #fff;
background-image: url(http://www.social-res.com/pixel/css/images/whitey-trans.png);
border-right: 1px solid rgba(144,144,144,0.39);
border-left: 1px solid rgba(144,144,144,0.39);
height: 800px;
}
/******* /CONTAINER *******/
/******* TOP *******/
#top {
padding: 20px 0 0 0;
margin: 0 auto 16px;
}
#top h1 a {
background: transparent url(http://www.social-res.com/pixel/css/images/pixeltree_logo-trans.png) no-repeat scroll left top;
display: block;
float: left;
height: 79px;
text-indent: -999999px;
width: 269px;
position: relative;
left:...

JavaScript

$(document).ready(function(){
    //References
    var sections = $("#menu li");
    var loading = $("#loading");
    var content = $("#content");
    var all_sections = $("*");
    var selected ="#nav1 a";
    $("#menu li").children("#nav1 a").css("background-position", "left 0px");  

    $('#menu li').hover(function() {
   $(this).children("a").not(selected).css("background-position", "left -72px");
}, function() {
   $(this).children("a").not(selected).css("background-position", "left -36px");
});
    
    //Manage click events
    sections.click(function(){
        //show the loading bar
        showLoading();
        
        //load selected section
        switch(this.id){
            case "nav1":
                selected = "#nav1 a";        
                sections.children().not("#nav1 a").css("background-position", "left -36px");    
                sections.children("#nav1 a").css("background-position", "left 0px");                        
                content.hide();
                content.load("external.html", delayedHide);
                break;
            case "nav2":
                selected = "#nav2 a";        

                sections.children().not("#nav2 a").css("background-position", "left -36px");
                sections.children("#nav2 a").css("background-position", "left 0px");
                
                content.hide();
                content.load("external2.html", delayedHide);
                break;
            case "nav3":
             selected = "#nav3 a";        

                sections.children().not("#nav3 a").css("background-position", "left -36px");
                sections.children("#nav3 a").css("background-position", "left 0px");
                content.hide();
                content.load("external.html", delayedHide);
                break;
            case "nav4":
              selected = "#nav4 a";        

                sections.children().not("#nav4 a").css("background-position", "left -36px");
        ...