...

View Full Version : pop up - tab windows



kokane
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?

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

kokane
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?

Borgtex
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

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

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

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

ronaldb66
01-13-2003, 12:11 PM
Borgtex,

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

MCookie
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:

<html>
<head>
<title></title>
<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;}
</script>
<style type="text/css">.tab {position:absolute;visibility:hidden;}</style>
</head>
<body>
<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>
</body>
</html>

kokane
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?

MCookie
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

kokane
01-13-2003, 04:56 PM
:thumbsup: THANKS & GOODNIGHT

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum