Change url and update content of page without reload

Question

it is concerning my final year project on web development. i want to change the contents of my page without reloading the page- i know this can be achieve using css /ajax or jquery but that would be only by hide and show or replaceWith() in jquery. i want the url to be change as well. i want to achieve something like this page https://www.khanacademy.org/computing/computer-programming - when the user clicks on INTRO TO JS:Drawing and animation you will see the url and content of page changes but page does not reload.

a GUIDE will be appreciated. thank you

a small draft:

**MY header.php**

 <script language="javascript" src="jquery-1.4.4.min.js"></script> <script> $(function(){ $("a[rel='tab']").click(function(e){ //e.preventDefault(); /* if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; if commented, html5 nonsupported browers will reload the page to the specified link. */ //get the link location that was clicked pageurl = $(this).attr('href'); //to get the ajax content and display in div with id 'content' $.ajax({url:pageurl+'?rel=tab',success: function(data){ $('#content').html(data); }}); //to change the browser URL to 'pageurl' if(pageurl!=window.location){ window.history.pushState({path:pageurl},'',pageurl); } return false; }); }); /* the below code is to override back button to get the ajax content without reload*/ $(window).bind('popstate', function() { $.ajax({url:location.pathname+'?rel=tab',success: function(data){ $('#content').html(data); }}); }); </script> <div id='menu'> <a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | <a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | <a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div> 

my menu1.php (menu2 and 3 are of same code)

 <?php if($_GET['rel']!='tab'){ include 'header.php'; echo "<div id='content'>"; } ?> menu1 content in menu1.php <?php if($_GET['rel']!='tab'){ echo "</div>"; include 'footer.php'; }?> 

i want when i click on the link - the link disappear and it displays only teh content like "menu1 content in menu1.php" only and nothing else on the page

Answer 1

If you are using a chrome browser, just right clik on that div and use option "inspect element". These are handy tools for web developers. The link you mentioned is just a hyperlink and since it is very simple static page under same domain, using same resources (css,js), its loading very fast and you are getting an impression that there is no page load.

Answer 2

I believe this script which I copy pasted from the linked site explains how they replace the url. To track location they are using localStorage to track page location and other stuff. Go to the page and navigate to the link you referred to. Then open up console and type localStorage. When you press Banana you will see what I am saying.

You can do this by

localStorage.setItem( "itemName", item )
localStorage.getItem( "itemName" )

Below is the sourced code

<script type="text/javascript">
(function() {
        // If we arrived via a Facebook callback, it might have appended #_=_
        // to our URL. This can confuse our Backbone routers, so get rid of it.
        // http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url
        if (window.location.hash === "#_=_"){
            if (history.replaceState) {
                history.replaceState(null, null,
                        window.location.href.split("#")[0]);
            } else {
                window.location.hash = "";
            }
        }
    })();
</script>