Loading the pages of a site in an iframe (=this white box) and putting the menu in a central (main) page (= the space surrounding this box). The menu 'stays there' on page change and the iframe's url is reflected in the address bar.
General:
A way to include a menu and/or other content on every page of your site. The content of each page is loaded in an iframe (= this white box). The URL of the iframed pages is reflected in the address bar, so the pages can be bookmarked.
On modern machines, there will be no screen flicker on page transition (most of the time), not even with Google Chrome.
Javascript
Put
this in
index.html (on this site, that's the name of the central page containing (1) the menu and (2) everything else you want to be 'always there').
Put
this in the iframed pages (on this site, the iframed pages are named
page1.html, page2.html and
page3.html).
:
-
Placing your menu: see first script above, body section.
-
Loading new pages in the iframe (the function is called 'preload' because the way we do it ensures that the pages are cached before they are actually accessed):
-
Loading from the central page (here:
index.html):
<a href="javascript: void(0)" onclick="
preload('some_page.html')">some_page</a>
<a href="javascript: void(0)" onclick="
preload('http://www.some_site.bla')">some_site</a>
(On this site,
some_page.html represents
page1.html, page2.html or
page3.html)
-
Loading from an iframed page (here:
page1.html, page2.html or
page3.html)
<a href="javascript: void(0)" onclick="
parent.preload('some_page.html')">some_page</a>
<a href="javascript: void(0)" onclick="
parent.preload('http://www.some_site.bla')">some_site</a>
If you want to use the options of a
select box to load content in the iframe, read
THIS.
Some final remarks:
The central page (containing tbe menu) and the iframed page that loads on page-entrance are called
index.html and
page1.html, respectively.
If you want to use this template while giving other names to the central page (for instance:
index.htm instead of
index.html) and to the page that loads in the iframe on site-entrance (for instance:
page1.htm instead of
page1.html), do the following:
- Rename index.html to index.htm and page1.html to page1.htm.
- In the newly renamed files, replace all occurrences of index.html with index.htm, and of page1.html with page1.htm.
If there's a flicker on page transition in IE, you probably have a big file serving as background-image on the central page (something like
body {background-image: url(your.jpg)}). Get rid of it and replace it with a div like:
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:-1"><img src="your.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;" alt=""></div>
Yes, we can indeed have links leading to pages from another domain. The foreign pages will load in the iframe and their URLS will be reflected in the address bar.
There's a history problem in IE if you use this locally (on your hard drive). But there's no problem on the Internet.
This may not (completely) work with the Google Chrome browser if you use this locally (on your hard drive). But there's no problem on the Internet.
© Arie Molendijk,
classical-music.tk