I am creating a 'portal' type page a for a website whereby the initial 'landing' stage on the site contains a background image and very minimal content, but clicking a link entitled "about us" fires an AJAX command to load the page 'about.php' into a DIV called 'MoreDiv' - in addition, javascript commands are fired to set 'MoreDiv' to be visible, whilst also hiding the initial text div (called 'phototext') and an additional div called 'bottomlinks'. The file 'about.php' then contains a list of links that call AJAX to load content within a different Div called 'InnerContent'... this div is within 'MoreDiv' so that the list of links remains in place and only the bottom portion of the page changes. Within the list of links is a "Return to Home" link which fires javascript to set the visibility of 'MoreDiv' to None, and show the 'phototext' div and the 'bottomlinks' div, but also change the innerHTML of 'MoreDiv' to blank (null).
I have used history.pushstate to get the URL to look how I want, as the page is a PHP file and so directly entering the URL shown will load up the page with the correct sub-pages loaded into the respective Div's.
The problem I have now is how to use history.popstate to save these variations to the page in the browser history so that clicking the back button in the browser will change the content of the Div's....
Javascript:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
setVisibility('MoreDiv', 'none');
function ResetToHome(){
setVisibility('MoreDiv', 'none');
setVisibility('PhotoText', 'inline');
setVisibility('bottomlinks', 'inline');
history.pushState(null, null, "?home=y");
document.getElementById('MoreDiv').innerHTML = "";
}
function ahah(url,target) {
document.getElementById(target).innerHTML = ' Fetching page...<br>(slow? <a href="Javascript:dud()" onclick="ResetToHome();">Reset Page</a>)';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url) {
var target = "MoreDiv"
var ExtraDiv = 'Extra text here';
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AJAX Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function AjaxIt(url){
setVisibility('MoreDiv', 'inline');
setVisibility('PhotoText', 'none');
setVisibility('bottomlinks', 'none');
ahah(url,"MoreDiv");
history.pushState(null, null, "?page=about.php");
}
function haha(url) {
var target = "InnerContent";
document.getElementById(target).innerHTML = ' Fetching page...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {hahaDone(url);};
req.open("GET", url, true);
req.send("");
}
history.pushState(null, null, "?page="+url);
}
function hahaDone(url) {
var target = "InnerContent";
var ExtraText = 'extra text';
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText+ExtraText;
} else {
document.getElementById(target).innerHTML=" AJAX Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
And then the pages has the following HTML in the page (main page and about.php marked respectively):
MAIN PAGE
<div ID="PhotoMain" name="PhotoMain" class="PhotoMain" style="position:relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; min-width:600px; max-width:60%">
<p><img src="http://www.ukastle.co.uk/discussion/gallery/image.php?album_id=67&image_id=2640" class="MainImage" ID="MainImage" name="MainImage" style=" -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; max-width:100%;"/></p>
<div name="MoreDiv" ID="MoreDiv" style="position: absolute;top: 10px; left: 15px; width: 95%; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; visibility:none; display:none;">text</div>
<div name="PhotoText" ID="PhotoText" style="position: absolute;top: 15px; left: 15px; width: 400px; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;"><h1>Welcome</h1>
Welcome to the website. this page is being built<br /><br />
<br /><br /><a href="Javascript:dud()" onclick="AjaxIt('/about.php')">About Us</a> </div>
<div name="bottomlinks" id="bottomlinks" style="width=100%; position: absolute;bottom: 15px; left: 15px;margin: 0;padding: 0;list-style-type: none;text-align: center; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;">
<p style="display: inline; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; font-size:1.1em;">This is currently a test style.</p></div>
</div>
ABOUT.PHP
<div style="position:relative;">
<div name="Linklist" id="Linklist" style="position: absolute;top: 50px; left: -10px; width: 35%; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:1px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; text-align:left;">
<ul class="QuickLinks">
<li><span><a href="?page=tc" onclick="haha('/tc.php'); return false;">Terms of Use & Privacy Policy</a></span></li>
<li><span><a href="?page=cg" onclick="haha('/cg.php'); return false;">Guide Page</a></span></li>
<li><span><a href="?page=mm" onclick="haha('/mm.php'); return false;">Management</a></span></li>
<li><span><a href="?page=lp" onclick="haha('/lp.php'); return false;">Links</a></span></li>
<li><span><a href="javascript:dud();" onclick="ResetToHome(); return false;">Return to main page</a></span></li>
</ul>
<div name="InnerContent" id="InnerContent" style="position: absolute;top: 350px; width:275%; max-height:95%; left: 0px; font-size:1em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; text-align:left; margin-bottom:30px;"><h2>About The Site</h2>
This is a page where we say stuff about Bob behind his back! Bob has funny feet!</div>
So that's the basic setup of the page (some text put in just to fill the space)... so how can I get the history.popstate to work so as to keep the current javascript/AJAX based links in place but also change the content (and visibility) of the respective DIV's based on the history state? Thanks.
(ps. in addition, I would like to be able to use the 'return to home' link to reset any changes made to the URL using history.pushstate... as currently I cannot get it to do anything, even changing the URL to add "?home=y")
