View Full Version : pop up - tab windows

01-12-2003, 11:27 AM
A number of sites have pop up windows with Tabs, which look extremely good and operate very well e.g the site http://www.dabs.com/home.asp has product information displayed in this fashion. The BBC also used them for census figures.

Does anybody know if this done by an applet and if so is there somewhere to get the required code?

01-12-2003, 02:48 PM
You only have to use layers and a simple hide/show javascript function. That's all, no applets.

01-12-2003, 05:11 PM
Dear Bjorn, with 6 or seven Wimbledon titles to your name you are entitled to sound a bit uppity, but could you also direct me to a good site with source code - the examples I have seen have it hidden?

01-12-2003, 05:29 PM
:confused: Bjorn? wimbledon? sorry, I think that I don't understand you.

Anyway. You can see the source code of the popups in dabs.com; it's not hidden: just press the right mouse button and select "View source code", but as I said is as simple as hiding/showing layers

01-12-2003, 05:39 PM
thanks for that - got it at last.

re. Bjorn - see http://www.bjornborg.20m.com/

01-12-2003, 05:48 PM
Bjorn Borg. lol

01-13-2003, 12:11 PM

what do you mean by "layers" in this context? Surely not the layer element? By the way, where are these so-called "pop-ups" to be found? I'm puzzled... :(

01-13-2003, 12:31 PM
Ronald, scroll down on that page and click on the red buttons below "Newsdesk".
It's something like this:

<script type="text/javascript">
var prevDiv = null;
function showit(theDiv){
if (prevDiv != null){
eval("document.all." + prevDiv + ".style").visibility = "hidden";}
eval("document.all." + theDiv + ".style").visibility = "visible";
prevDiv = theDiv;}
<style type="text/css">.tab {position:absolute;visibility:hidden;}</style>
<a href="javascript:showit('aa');">aa</a>
<a href="javascript:showit('bb');">bb</a>
<a href="javascript:showit('cc');">cc</a>
<a href="javascript:showit('dd');">dd</a>
<a href="javascript:showit('ee');">ee</a><br>
<div id="aa" class="tab">aa</div>
<div id="bb" class="tab">bb</div>
<div id="cc" class="tab">cc</div>
<div id="dd" class="tab">dd</div>
<div id="ee" class="tab">ee</div>

01-13-2003, 03:29 PM
Ronald, any chance you could just add in whatever bit is required to make your eg code above work ,when I run it - it seems to want to load a nonexistent page instead of just showing what is below the tab text that I have added?

01-13-2003, 04:34 PM
Kokane, go to this page: http://www.dyn-web.com/dhtml/show-hide.html
and click on the Show/Hide layers link for an example

01-13-2003, 04:56 PM

01-14-2003, 09:53 AM
Ah, so we're talking about divs who's visibility is turned on and off. Got it.