what i would like to do is create a better user experiance by dynamicly replacing the content of an area on one page with the content of an area on another page. I have a dynamic jquery script that works on plain htm but does not work on the php blocks.
SCRIPT->

$(function() {

if(Modernizr.history){

var newHash = "",
$mainContent = $("#MainContent"),
$pageWrap = $("body"),
baseHeight = 0,
$el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("WWA_SideBar").delegate("a", "click", function() {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});

function loadContent(href){
$mainContent
.find("#InnerContent")
.fadeOut(200, function() {
$mainContent.hide().load(href + " #InnerContent", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("WWA_SideBar a").removeClass("current");
console.log(href);
$("WWA_SideBar a[href$="+href+"]").addClass("current");
});
});
}

$(window).bind('popstate', function(){
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});

} // otherwise, history is not supported, so nothing fancy here.


});

<- SCRIPT

How can this be achieved?
I've read about using global stacks, is it possible this way or is there a better way with PHP?

Any help would be appreciated.