Instantanious page load

[smoker]

Alright heres what im trying to do. I want to have several links on the top of my page which when clicked change the content of the page instantly. I want to have 2-4 phpbb forums on my page all preloaded and when the user click on a link on the top of my page it instantly switches forums.
How should i go about doing this. I guess my question is how do I preload several pages and then access them instantly with a click.

The site where i got this idea from is
http://www.replublican-talk.net/ Thanks for any help you can give me on where to start.
-Smoker

[kdjoergensen]

What about 4 hidden iframes with the boards loaded into each. each iframe should be layered on top of each other using absolute positioning. once a link is clicked the proper iframe is hidden/shown.

[kjmc]

you can use DIVS. have each DIV with the same coordinates. one DIV for each page. and set their properties to invisible, and have their z-indexes set to 0, so that they are all on the same virtual layer, and then with each click, change the particular property of that DIV to visible.

[smoker]

I like the idea of using divs with the same coordinates. Any idea on where I could learn how to do somthing like that?
-Smoker

[smoker]

ok i think i will use div, how do I make a javascript mouse click change the visiblility in a div tag?
-Smoker

[smoker]

This script doesnt display all the divs in the same spot
<SCRIPT LANGUAGE="JavaScript">
function page1change()
{
document.all.page1.style.visibility="visible";
document.all.page2.style.visibility="hidden";
document.all.page3.style.visibility="hidden";
}
function page2change()
{
document.all.page1.style.visibility ="hidden";
document.all.page2.style.visibility ="visible";
document.all.page3.style.visibility ="hidden";
}
function page3change()
{
document.all.page1.style.visibility="hidden";
document.all.page2.style.visibility="hidden";
document.all.page3.style.visibility="visible";
}
</SCRIPT>

<table border width=100%>

<tr>
<td>

<DIV ID="page1" STYLE="position:relative; top: 0%; left: 0%; z-index: 0; width: 200px; height: 200px; visibility:visible">
Page1
</DIV>
<DIV ID="page2" STYLE="position:relative; top: 0%; left: 0%; z-index: 1; width: 200px; height: 200px; visibility:hidden">
Page2
</DIV>
<DIV ID="page3" STYLE="position:relative; top: 0%; left: 0%; z-index: 2; width: 200px; height: 200px; visibility:hidden">
Page3
</DIV>
</td>
</tr>
<tr>
<td>
<A HREF="javascript:page1change();">page1</a><A HREF="javascript:page2change();">page2</a><A HREF="javascript:page3change();">page3</a>
</td>
</tr>

[smoker]

This is what ive got so far but it doesnt work
http://www.islavistahome.com/javascript/test.php

[Jon Hanlon]

What's visability? The ability to shop?!?