I’ve been trying for some time to come to grips with the concept of dynamically rendering pages so that bits of the content change without doing a refresh or rewrite.
There are a number of approaches to this with the obvious one being php. However a lot of coders find this whole php thing to be a bit intimidating, and want a way to make things happen without going down the road of learning that whole new language.
I started out working with iFrames and this is a brillant way to insert live updates and video and stuff into a page; but there are some frustrating limitations. Like for instance your iFrame stays the same size no matter what you squirt into it! Consider an Amazon aStore: the front page is about 600px high, but the actual shop pages are 1000px or more so either this pops up the dreaded scroll bars in your frame or else you have masses of white space.
I have found a way to make what I call Dynamic Divs - I.E., they expand or contract to fit the content linked to. This means you can have a fixed page with a block(<div>) of optional content that exactly fits the linked page.
It is an interesting hybrid mix of php, html and Javascript, but no coding skills are needed. Just copy’n'paste the code.
You need to name the file with a .php suffix to get the “php includes” to work, but it is basically simple html. The trick is to load the required page into a (not visible) storage div, extract it’s content into a variable with a little JavaScript, then write it into the div with the “document.getElementById(”alayer”).innerHTML” call. This reads the (hidden) file and writes it to the Dynamic Div.
See a demo of the technique here. (http://biznz.net/tutorials/liquiddiv.php) Roll over the top links to see the Dynamic Div in action
Here are the four elements that make this work.
1. divs to hold the page to be inserted
2. Javascript to read the data
3. OnMouseover code to insert the content.
4. An ID’d div to insert the new content into.
1. The “storage boxes” look like this:
<div id=”bin1" class=”bins”><?php include(’demo1.htm’) ?></div>
They have an ID and they need a style class set to display: none; so they are invisible, and there is a php include to load the file to be stored.
2. The Script to “read” the content into the variable looks like this:
<script language=’JavaScript’>
$con1 = document.getElementById(”bin1").innerHTML;
$con2 = document.getElementById(”bin2").innerHTML;
</script>
The script gets the “innerHTML” content of the Element “bin1" and stores it in the variable $con1, and so on.
3. The content can then be written to the page with an onMouseOver call like this:
onmouseover='document.getElementById(”alayer”).innerHTML=$con1;'
4. A Div (ID=aLayer) to receive the content:
<div id=”alayer” style=”width: 750px; background-color:#ffd; “><?php include(’demo0.htm’); ?></div>
Notes:
This technique works best on pages with plain text or simple html. If you load a page with SSI in it, it will fail, because it is not on the server anymore, thus the script can’t work inside a client side page. An embedded PHP include, for instance, can’t work after it has left the server.
Be aware that what you are doing here is nesting complete web pages inside each other. This can have some quite exciting results - for instance if you have style classes in one page, they may conflict with another.
This trick is ideal to dynamically change text and graphic content inside a box(div), but without doing a page refresh or re-writing the page.
