Hi there,
I've been coding a site using JQuery to load different .html files into a content div on the page. Of course this means that the back and forward buttons don't do much to navigate within the site. I've done some research, and found a bunch of options like history, and even found this Stack Overflow question regarding my issue. Unfortunately I've spent two days now banging my head against my keyboard trying to get one of these jquery plugins to work. Can someone help me to implement one of these back/forward enabling plugins into my site? Your help would be huuuugely appreciated.
Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toward Maximum Independence</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="pagesstyle.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
<ul id="nav">
<li>
<a href="#">DONATE </a>
<ul>
<li><a href="#" id="donationform">Donation Form</a></li>
<li><a href="#" id="donateyourcar">Donate Your Car</a></li>
</ul>
</li>
<li><a href="#">GET INVOLVED</a>
<ul>
<li><a href="#" id="referaconsumer">Refer a Consumer</a></li>
<li><a href="#" id="upcomingevents">Upcoming Events</a></li>
<li><a href="#" id="prospectiveemployers">Prospective Employers</a></li>
<li><a href="#" id="takepoliticalaction">Take Political Action</a></li>
</ul>
</li>
<li><a href="#">OUR PROGRAMS</a>
<ul>
<li><a href="#" id="jobplacement">Job Placement</a></li>
<li><a href="#" id="fostercare">Foster Care</a></li>
<li><a href="#" id="independentliving">Independent Living</a></li>
<li><a href="#" id="projectconnect">Project Connect</a></li>
</ul>
</li>
<li><a href="#">WHO WE ARE</a>
<ul>
<li><a href="#" id="missionstatement">Mission Statement</a></li>
<li><a href="#" id="history">History</a></li>
<li><a href="#" id="boardofdirectors">Board of Directors</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="text">
<!--Content goes here -->
</div>
</div>
<div id="footer">
</div>
</body>
and my javascript:
jQuery.event.add(window, "load", initialize);
jQuery.event.add(window, "resize", initialize);
function initialize()
{
$('#header').css({'visibility':'visible'});
var h = $(window).height();
var w = $(window).width();
$('#header').css({'width': w, 'height': w*.190});
$('#nav a').bind("click", selectThis);
$('#leftcolumn a').bind("click", selectThis);
}
function selectThis()
{
var url='text/' + $(this).attr('id') + '.html';
$('#text').load(url);
}
It seems like it shouldn't be that hard, but I guess I just don't understand how it's supposed to work. My content div is called "#text", and all the links in the header pipe content into it. I've tried jquery.history, and jquery.address both extensively, and couldn't get them to work. Thanks again in advance for any advice or help, I really hope someone can help me out.