Swap content in a div

using javascript

[humpingdan]

im guessing most people have seen the AdobeStudio site,

http*//studio.adobe.com

does anyone know how they do the menus across the centre of the page where the tabbed buttons swap the content inside the div?

any suggestions?

[garann]

I didn't look at the script, but because both DIVs of content are present in the HTML when the page loads, I think they're just making one DIV invisible and one visible, depending on which button you've clicked.

You can easily view their Javascript at the URL in their source code. What they're doing could be as simple as sending the ID of the tab that should be in front and the ID of the one that should be in back, and the ID of the DIV that should display and the ID of the one that should be hidden. But you can check that out for yourself. If I were going to write it, it would look like this:

function swapPanes(tabInFront, tabInBack, contentToShow, contentToHide) {
document.getElementById(tabInFront).src = "highlightedTabImage.gif";
document.getElementById(tabInBack).src = "greyTabImage.gif";
document.getElementById(contentToShow).style.display = "block";
document.getElementById(contentToHide).style.display = "none";
}

They're probably doing something far more clever, but I hope that gets you started?
g.

[humpingdan]

has anybody got any other ideas for me as im not sure im up to ripping it out of the site!?!? not exactly javascript fluent!

Dan

[garann]

Oops, thought that said something else. :)

Did the code above not work? I can give more help, if you need it, but that function should do it...

[garann]

Hi Dan,

Sorry for the confusion. Here's the corresponding HTML:

...
<a href="javascript:swapPanes('newest','mostPop','newestContent','mostPopContent')"><img src="newest_highlightedTabImage.gif" id="newest"></a>
<a href="javascript:swapPanes('mostPop','newest','mostPopContent','newestContent')"><img src="mostPopular_greyTabImage.gif" id="mostPop"></a>
<br>
<div id="newestContent">
<b>Business Content</b>: blah blah blah...
</div>
<div id="mostPopContent" style="display:none;">
<b>Winter Wonderland</b>: blah blah yadda yadda...
</div>
...

What's happening there is that the tabs are image links. Pressing them calls the function from the other post, sending these arguments, in this order:
the ID of the tab image the user clicked, the ID of the other tab image, the ID of the DIV that corresponds to the tab the user clicked, the ID of the other DIV.

When the function is called, it highlights the clicked tab and brings its corresponding div to the front using the CSS display property.

Does that make more sense?

[humpingdan]

how can i use this minus the images?

perhaps with the <li> element or something?

[garann]

Probably the easiest way to use it for other elements is by defining two CSS classes they can switch between. You'd still assign the ID to the LI, or other type of element, and in the JavaScript, instead of saying

document.getElementById(tabInFront).src = "highlightedTabImage.gif";

you'd say

document.getElementById(tabInFront).className = "hilite";

where "hilite" is a class you've already defined.

So in your HTML you get..

<li class="hilite" id="newest"><a href="javascript:swapPanes(...)">Newest</a></li>
<li class="grey" id="mostPop"><a href="javascript:swapPanes(...)">Most Popular</a></li>