Creating and structuring the index page

Question

I have a test website www.lemonbrush.com is has the two menu items "Home" and "About".

When we click on the "About" menu, the About page is loaded dynamical, which is great, but when I type the About page's url directly http://www.lemonbrush.com/about.html into the address bar, my whole plan goes for six.

I need some guidance in how shall I structure and load the pages so that the whole header and navigation are included even when we use the direct URL in the address bar.

My skills are HTML and Javascript.

Please see the following screen shots.

Answer 1

so, since i thought it would be nice for my project, to have a usable browser history and bookmarkable subpages, i yesterday tried the approach from my comments of the OP.

step 1: change the anchors in your navigation bar to something like that:

<a href="#index">home</a>
<a href="#about">about</a>

needles to say, that they don't need to be inside the same parent element. those links could be anywhere.

step 2: remove the on click handler from your script, that reacts on the navigation bar clicks!

step 3: create a function, to listen to the onhashchange event. (this has to be done once, on the main html page)

//create a function for the onhashchange event
window.onhashchange = function()
{
    //check if a location hash is used
    if(window.location.hash != null) 
    { 
        //store current location hash in a variable
        requestedPage = location.hash;
        //remove the '#' from the location hash value
        requestedPage = requestedPage.replace('#','');

        //load content from subpage into your content frame
        $('#contentFrame').load('./' + requestedPage + '.html', function( response, status, xhr ) 
        {
            //catch 'file not found' errors and load start page
            if ( status == "error" ) {
                $('#mainPanel').load('./start.html');
            }
        });
};

for your page, you have of course to adapt, use the correct selectors and the correct file names.

you then would call your page via www.mydomain.com, and every subdomain via www.mydomain.com/#subPage

Answer 2

When you're clicking the menu item you are updating the page with the data, but when you are going to the link directly you are just getting the data. one way around this is to have common elements for the page, ie. navigation menus, In a javascript file and then use a script tag with a link where you want it on the page.