Welcome to WebmasterWorld Guest from 3.85.245.126

Forum Moderators: open

Message Too Old, No Replies

Swap content in a div

using javascript

     
1:40 pm on Dec 8, 2003 (gmt 0)

Full Member

10+ Year Member

joined:May 13, 2003
posts:313
votes: 0


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?

6:50 pm on Dec 8, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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.

11:28 pm on Dec 8, 2003 (gmt 0)

Full Member

10+ Year Member

joined:May 13, 2003
posts:313
votes: 0


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

11:39 pm on Dec 8, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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...

6:39 pm on Dec 9, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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?

9:58 am on Dec 10, 2003 (gmt 0)

Full Member

10+ Year Member

joined:May 13, 2003
posts:313
votes: 0


how can i use this minus the images?

perhaps with the <li> element or something?

5:44 pm on Dec 10, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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>