I put this hack into place a while back, but hadn't written about it. Prior to this new hack, in order for my other pages (such as about me, resume, etc) to maintain the same look and feel of the Blogger template, I was doing a lot of stuff on the server side with PHP. This new hack does most of the work on the client side by just loading the new page into the main div on the page. This reduces bandwidth and load time, and also reduces the server load (not that I get a lot of hits anyway).
This hack is handy if you have static pages that you want to link to from your main page, like I do. First, add this line to load in the main javascript code that does all the magic:
<script src="/changemain.js"></script>
You can actually see the code here. The XMLHttpRequest object is what allows loading information into the main section of the page without it having to reload. Google Maps, Gmail, and some other neat sites make extensive use of this function to provide a very efficient interface by reducing full page reloads. Next, add this line in the webpage where the start of the body is defined:
<body onload="home = document.getElementById('main').innerHTML">
This will "save" the main section of the page so that it can be restored later if other links are clicked. Whenever you have a new static page you want to load into the main section, just setup the href to use the changeMain function like this:
<a href="javascript:changeMain('/data/resume')">My Resume</a>
The file in /data/resume is what will be loaded into the main page. Of course, you can use any file you want. This works out great, because if I want to use a new template, all I have to do is add in the first two lines and for each new link use the changeMain function. There is one caviat to the hack. The files have to be located on the same server. So if you're hosting your blog on blogspot, this hack probably won't be very useful. Since I'm hosting my blog on my own server, I can place whatever files I want wherever I want.
There is also a slight "bug" that I need to write some code to handle. If you are on a different page other than the main page of the site (for example, one of the permalink pages), if you click the Home link, you end up with the main section of the page you loaded. I could probably write some JavaScript to handle this, but I'm too lazy. Feel free to the hack out and let me know what you think.
5/24/2005
Static Page Builder Hack
Subscribe to:
Posts (Atom)
