Switching 3 DIV's with a link

[gringos]

I have the following layout:


Header that stretches across the top of the window
Left menu that alters the next 3 DIV's:
Middle content window
Right content window
Bottom content window (also stretches across the bottom)


So it is like:

=================
header
=================
|left || middle || right|
================
bottom
=================

So links in the left div need to change the middle, right and bottom divs.

Is there simple code for this, and if not, any solutions?

Thanks in advance,
Matt.

[rangana]

This could be done either through iframes or plain JS by manipulating CSS's display property. But without seing your code, it's difficult to whip one.

Show us what you've got so far.

You might also want to take a look on DD's Ajax Tabs Content:
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

[gringos]

Code is quite long, but you get the basic set out right?

They are arranged by CSS.

The links in the left div need to change the content inside the middle div, right div, and bottom div.

An entire switch of each of the div's is an option too, I am just stuck on the javascript/code.

[rangana]

If you would ask for a basic setup, here's a basic example:

<style type="text/css">
#left{float:left;width:300px;}
#middle{float:left;width:500px;}
#right{float:leftwidth:300px;}
#bottom{clear:both;}
</style>
<script type="text/javascript">
window.onload=function()
{
var li=document.getElementById('mylink').getElementsByTagName('li'),
middle=document.getElementById('middle'),
right=document.getElementById('right'),
bottom=document.getElementById('bottom'),
cCont=['Contents1','Contents2','Contents3','Contents4','Contents5'];
li[0].onclick=function()
{middle.innerHTML=cCont[0];right.innerHTML=cCont[0];bottom.innerHTML=cCont[0];}
li[1].onclick=function()
{middle.innerHTML=cCont[1];right.innerHTML=cCont[1];bottom.innerHTML=cCont[1];}
li[2].onclick=function()
{middle.innerHTML=cCont[2];right.innerHTML=cCont[2];bottom.innerHTML=cCont[2];}
li[3].onclick=function()
{middle.innerHTML=cCont[3];right.innerHTML=cCont[3];bottom.innerHTML=cCont[3];}
li[4].onclick=function()
{middle.innerHTML=cCont[4];right.innerHTML=cCont[4];bottom.innerHTML=cCont[4];}
}
</script>
<div id="header"><h1>Header</h1></div>
<div id="cont">
<div id="left">
<h1>Left</h1>
<ul id="mylink">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="middle">
<h1>Middle</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div id="bottom">
<h1>Bottom</h1>
</div>
</div>


But that would only change the content, other ways is to change the divs display, and a lot of ways (iframe is one), but since you can't show us any code, a basic set-up above might keep you going.

Hope it helps.

[gringos]

Hey, thanks a bunch mate that code was really helpful. I'm just hacking it up a bit so it fits in with my menu (I have a few layered lists, so I had to change it a bit). I will post the final code shortly in case someone else needs it.

Thanks again for all the help everyone,
Matt.

[gringos]

Ok, I have run into a bit of a snag here again.

The bottom frame has thumbnails of videos that once I click I need to change the middle frame and the right frame.

So, this is the code you gave me (I've edited it a little).

function menuFunction() {

/***** Menu Switches *****/

var li1=document.getElementById('menuSet1').getElementsByTagName('li'),
middle1=document.getElementById('mainContent'),
right1=document.getElementById('sidebar2'),
bottom1=document.getElementById('footer'),
cCont1=[
// Video [0]
'<h3>subtopic 1.1 video</h3>',
// Content [1]
'<h3>subtopic 1.1 content</h3>',
// Footer [2]
'<table width="519" border="0" cellpadding="3"><tr><td><div align="center"><ul id="videoSet1"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 1</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet2"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 2</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet3"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 3</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet4"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 4</p></a></li></ul></div></td></tr></table>',

// Video [3]
'<h3>subtopic 1.2 video</h3>',
// Content [4]
'<h3>subtopic 1.2 content</h3>',
// Footer [5]
'<table width="519" border="0" cellpadding="3"><tr><td><div align="center"><ul id="videoSet1"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 1</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet2"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 2</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet3"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 3</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet4"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 4</p></a></li></ul></div></td></tr></table>',

// Video [6]
'<h3>subtopic 1.3 video</h3>',
// Content [7]
'<h3>subtopic 1.3 content</h3>',
// Footer [8]
'<table width="519" border="0" cellpadding="3"><tr><td><div align="center"><ul id="videoSet1"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 1</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet2"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 2</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet3"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 3</p></a></li></ul></div></td><td><div align="center"><ul id="videoSet4"><li><a href="#" class="menusub3" onClick="#"><img src="images/video_thumb.jpg" border="0" /><p>Video 4</p></a></li></ul></div></td></tr></table>'
];

li1[0].onclick=function(){middle1.innerHTML=cCont1[0];right1.innerHTML=cCont1[1];bottom1.innerHTML=cCont1[2];}
li1[1].onclick=function(){middle1.innerHTML=cCont1[3];right1.innerHTML=cCont1[4];bottom1.innerHTML=cCont1[5];}
li1[2].onclick=function(){middle1.innerHTML=cCont1[6];right1.innerHTML=cCont1[7];bottom1.innerHTML=cCont1[8];}

As you can see, in each of the footer's for the 3 links, there is one big block of text. For some reason, it doesn't work unless you have it on one line. Anyways, it calls an id from a thing called "videoSet#" which is inside a function called videoFunction on top of this menuFunction and preloaded before the menuFunction is. It is ideally the same idea and almost the same code, just a bit less.

function videoFunction() {
var liv1=document.getElementById('videoSet1').getElementsByTagName('li'),
middlev1=document.getElementById('mainContent'),
rightv1=document.getElementById('sidebar2'),
cContv1=[
// Video [0]
'<h3>subtopic 1.1 video 1</h3>',
// Content [1]
'<h3>subtopic 1.1 content 1</h3>',
];

liv1[0].onclick=function(){middlev1.innerHTML=cContv1[0];rightv1.innerHTML=cContv1[1];}

This works fine when the page is first loaded and the footer div is in its primary state with its initial code in the body. But when you click one of the side links which replaces the 3 div's codes, then the footer links just do not work.

It seems like a small problem, but I have no idea what is going wrong. I have a feeling it isn't recognising the videoFunction javascript because of some reason, but if you look the code is identical, a straight copy and paste. I think it might just be an ordering thing :S

Thanks in advance,
Matt.

[gringos]

I should also add, I inspected the source, and the source seems to display what I expect it to, so im dumbfounded!