quick dynamic site using jquery

a real quick example for my friend who was using iframes.

by Christopher Stephens

HTML

<div id="page">
    <div id="left-menu"> <a class="menu-item" href="/js/codemirror/mode/css/css.js">home</a>
 <a class="menu-item" href="/js/codemirror/mode/htmlmixed/htmlmixed.js">page 1</a>
 <a class="menu-item" href="/js/codemirror/mode/javascript/javascript.js">page 2</a>

    </div>
    <div id="content"></div>
</div>

CSS

a.menu-item {
    display:block;
}
#page > div {
    display:inline-block;
    padding:10px;
    margin:0;
    vertical-align:top;
}
#page {
    width:900px;
    border:1px black solid;
    margin: 0 auto;
}
#left-menu {
    width:276px;
    border:1px black solid;
}
#content {
    width:576px;
    border:1px black solid;
}

JavaScript

// this is simular to document onload basically it waits for your html to render before it runs.
$(function () {
    // loads the first menu option into the page on launch
    $("#content").load($(".menu-item:first").attr("href"));

    // this sets up a click listener, so any time something with the class menu-item is clicked this code runs.
    $(".menu-item").on("click", function () {
        // this is context sensitive, in this case its the element you clicked on
        var menuitem = this;
        var url = $(menuitem).attr("href");
        $("#content").load(url);
        // this cancels the default click operation
        return false;
    });
});


/*
// short version
$(function(){
    $("#content").load($(".menu-item:first").attr("href"));
    $(".menu-item").on("click", function(){
        $("#content").load($(this).attr("href"));
        return false;
    });
});
*/