This is my html(index.php):
<html>
<head>
<script type="text/javascript" src="sunto.js"> </script>
<link id="style" rel="stylesheet" type="text/css" title="other" href="styles.css">
<meta property="og:image" content="http://www.sunto.no/images/olive-141471_640.jpg"/>
<meta property="og:image" content="http://www.sunto.no/images/4130972679_c7c347959e_z.jpg"/>
<meta property="og:description" content="Sunto, Opplysningstjenesten din for mat">
<meta property="og:title" content="Sunto">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.sunto.no">
</head>
<body>
//this is my main menu //
<ul>
<li><a href="#page1" onclick="food('page1.php')">Page 1</a></li>
<li><a href="#page2" onclick="food('page2.php')">Page 2</a></li>
<li><a href="#page3" onclick="food('page3.php')">Page 3</a></li>
</ul>
<div id="text">her is changing text content</div>
</body>
This is 2nd html(page1.php): //this is my main menu //
<ul>
<li><a href="#page1" onclick="food('page1.php')">Page 1</a></li>
<li><a href="#page2" onclick="food('page2.php')">Page 2</a></li>
<li><a href="#page3" onclick="food('page3.php')">Page 3</a></li>
</ul>
<ul>
<li><a href="#Eco-food" onclick="food('Eco-food.php')">Eco-food</a></li>
// here is some problem //
<li><a href="#Other-food" onclick="food('Other-food.php')">Other-food</a></li>
</ul>
<div id="text">her is changing text content</div> //
This is my Ajax, sunto.js:
function food(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('text').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
The main menu works fine, this has html, and works with reloading, page 2 is possible to navigate directly to in the url-bar. Both menus are loaded in with ajax, and has the same main function name ; food(and different pages here). My second menu, is text files, only containig the text, for the div=text. Is it possible to have the code like this, and be able to navigate to, Eco-food, or other-food, through the url bar? And to go back and forward using the Back forward buttons, only works in pages 1-3, and not in my text files. I guess I am trying to keep my html in as few pages as possible, and still have the advantage, that I would if I change all my text files, to html pages?
You have to use URL hashes, and use javascript to interpret them and load the correct ajax resource.
As you already use hashes ( e.g. #page8 ), you already have the done the first step.
The second step is that you read onload the hash and make the ajax call.
function autoloadAjax(){
var page = location.hash;
pages(page.substring(1))
}
You need substring, because the hash contains the leading #.
You would put that code in the index page. /index.php#page8 would do the same as /index.php and click on button with href #page8.