Tab / Folder, Can't find it Options

[tharpdevenport]

Okay, I don't actually need any help but finding it. I've tried word combinations and different words in Google, and I can't find it. It's frustrating. What I am looking for:


It's a box that has tabs at the top -- like a folder -- like you see in your hotmail account.
but unlike the hotmail account, when you click on a tab it doesn't load a new page. It stays on the same one. the content in each tabed folder is hidden until you click on it.

[Peter1968]

Sliding Doors maybe?

[Effovex]

This could be done in various ways - frames and javascript being the simplest.

It would be possible to do this quite reliably and with good accessibility in Javascript, I think. You just have to build the document as a normal, sequential document, and then use javascript onload to hide the data (using CSS) until the proper tab is clicked.

So basically, build a webpage with all the sections done sequentially, and have the tabs link to an internal anchor (#section), but then have javascript change the CSS for the various sections so have the appearance you want, and set each tab to dynamically change the CSS to each section when clicked.

I don't really have the time to build an example tonight, but that seems like an interesting project, I might build it over the weekend.

[Effovex]

The w3c's CSS validator actually does exactly what you want, I think.

http://jigsaw.w3.org/css-validator/

[tharpdevenport]

Cool, I think that's it. I'll have to give it a try later in hte week.

Thank you for your help. :-)


and no doubt you'll see me back complaining I can't get something to work. ;-)

[tharpdevenport]

Tried viewing the source of the Validator. That only served to confuse me.

[tharpdevenport]

Okay, I got one:

http://rejectedfilmscores.150m.com/WKGC/ProgramGuide.html


But I am having problems (as expected).


1. Ignore that black border line, I was just messing around and will delete it later. But what I am trying to do is that when you click on any of those tabs, the border stays under all the others except the one you clicked.

2. As per the Archive page:
http://rejectedfilmscores.150m.com/WKGC/Archive.html

I want corners on the ProgramGuide's TAB BOX's bottom like seen on Archive, but I have no idea how to achieve that when using DIVs. I always use a TABLE layout for that.

[Frederiek]

Your tabs are cut off and the background-image only takes up the width of the link, which is smaller than the image. The CSS you took from DynamicDrive doesn't use background images, so doesn't account for this. Just to get the CSS correct on the tabs, I'd suggest you go see the CSS menu's at CSSPlay or Listamatic from Maxdesign.

[tharpdevenport]

Here is what I am trying to achieve:
http://img407.imageshack.us/img407/504/tabexampledq9.png

Using another version, from likeListamatic, only puts me back at aquare one as I have no idea how to do what I want.

[tharpdevenport]

Couldn't I, say, do this and achieve the same thing:


Structure it with a TABLE; seven cells on top, one ColSpanning all 7 in the middle (for the info), and three cells on the bottom -- one in the middle and one on the two corners for the corners.

Then set STYLES appropriates, make the TABs images flips, and make them onClick to show info, which is somehow (beats me) hidden until clicked.


Couldn't this work? Because I'm still getting pretty much nowhere with this.

[Frederiek]

I got it to work, using Stu Nicholls (CSSPlay) article originally explained at webreference.com.

HTML:

CODE

<div id="ddtabs">
<ul class="menu">
<li><A href="#TAB1" onClick="">SUN</A></li>
<li><A href="#TAB2" onClick="">MON</A></li>
<li><A href="#TAB3" onClick="">TUES</A></li>
<li><A href="#TAB4" onClick="">WED</A></li>
<li><A href="#TAB5" onClick="">THURS</A>
<li><A href="#TAB6" onClick="">FRI</A>
<li><A href="#TAB7" onClick="">SAT</A></li>
</ul>
</div>

CSS:

CODE

#ddtabs {
  height: 37px;
}

.menu {
  display:table;          
  padding:0;
  margin:0 auto;
  font: 1em/3em arial, helvetica, sans-serif;
  white-space:nowrap;
  list-style-type:none;
}

* html .menu {
  display:inline-block;
  width:1px;
  padding:0 2px;
}

.menu li {
  display:table-cell;
}

* html .menu li {
  display:inline;
}

.menu a {
  display:block;
  background: url(TAB.GIF) no-repeat; /*normal state image*/
  color:#000;
  text-decoration:none;
  width:100px;
  height:35px;
  margin: 0 auto;
  text-align: center;
}

* html .menu a {
  display:inline-block;
  margin:0 -2px;
}

.menu a:hover {
  color:#08c;
  background: url(TAB.GIF) no-repeat; /*hover state image*/
}

a.current {
  color:#08c;
  background: url(TAB.GIF) no-repeat; /*current state image*/
  cursor:default;
}

[skincer]

I got it to work, using Stu Nicholls (CSSPlay) article originally explained at webreference.com.

HTML:

CODE

<div id="ddtabs">
<ul class="menu">
<li><A href="#TAB1" onClick="">SUN</A></li>
<li><A href="#TAB2" onClick="">MON</A></li>
<li><A href="#TAB3" onClick="">TUES</A></li>
<li><A href="#TAB4" onClick="">WED</A></li>
<li><A href="#TAB5" onClick="">THURS</A>
<li><A href="#TAB6" onClick="">FRI</A>
<li><A href="#TAB7" onClick="">SAT</A></li>
</ul>
</div>

CSS:

CODE

#ddtabs {
  height: 37px;
}

.menu {
  display:table;          
  padding:0;
  margin:0 auto;
  font: 1em/3em arial, helvetica, sans-serif;
  white-space:nowrap;
  list-style-type:none;
}

* html .menu {
  display:inline-block;
  width:1px;
  padding:0 2px;
}

.menu li {
  display:table-cell;
}

* html .menu li {
  display:inline;
}

.menu a {
  display:block;
  background: url(TAB.GIF) no-repeat; /*normal state image*/
  color:#000;
  text-decoration:none;
  width:100px;
  height:35px;
  margin: 0 auto;
  text-align: center;
}

* html .menu a {
  display:inline-block;
  margin:0 -2px;
}

.menu a:hover {
  color:#08c;
  background: url(TAB.GIF) no-repeat; /*hover state image*/
}

a.current {
  color:#08c;
  background: url(TAB.GIF) no-repeat; /*current state image*/
  cursor:default;
}

This topic is a little old, but I just came across it. I've been playing around with this, but there's one think I can't get working. I'd like to set the class of a tab to current when it is clicked, but I can't seem to get that going. I'm assuming the way to do this is to code something in the onclick event, but nothing I've tried works. Can anyone clue me in?
Thanks.
Steve

[Christian J]

I'd like to set the class of a tab to current when it is clicked, but I can't seem to get that going.

To set a class with JS you might do

CODE

onclick="this.className='current';"

But since the page's own link already uses that className you'll end up with two, unless you also remove the original one. That might be done by first looping through all links in the menu and removing their className values.

[skincer]

I'd like to set the class of a tab to current when it is clicked, but I can't seem to get that going.

To set a class with JS you might do

CODE

onclick="this.className='current';"

But since the page's own link already uses that className you'll end up with two, unless you also remove the original one. That might be done by first looping through all links in the menu and removing their className values.

I'm pretty sure I tried that and got a javascript error, but I'll try it again.

[skincer]

I did try it and I don't get a javascript error, but nothing happens. As you can see below, I set the initialize the first page to class=current and that shows up fine, but when I click the 2nd "tab", nothing changes.

<div id="ddtabs">
<ul class="menu">
<li><a href="custInfo.jsp" class="current" onclick="this.className='current';">Details</a></li>
<li><a href="/CustCompass/getContactsForCustAction.do" onclick="this.className='current';">Contact</a></li>
<li><a href="/CustCompass/getOrdersForCustAction.do">Orders</a></li>
<li><a href="/CustCompass/getMailingsForCustAction.do">Mailings</a></li>
<li><a href="/CustCompass/getNotesForCustAction.do">Notes</a></li>
<li><a href="/CustCompass/getCustsForHouseholdAction.do">Household</a></li>
</ul>
</div>

Thanks for any help.
Steve

[skincer]

I figured it out. Here's how:

Just for kicks, I tried setting the className to "current" in a javascript function and to make sure I was in the function, I put alert("hello from my function") as the last line in the function. What I noticed was that the clicked tab was set to current, then I saw my alert message, and then it went back to normal (not current).

I guess this would happen for anyone, but my app is a struts web app and I'm using the tiles framework. The tiles framework allows you to create a "template" page that just has a bunch of "includes" on it. Each of my pages "included" my "tabs" jsp. What was happening was that when the link was followed and a new page loaded, it brought in a fresh copy of the tabs.jsp, and the className wasn't being set in the copy brought into the new page. That's why I would see the clicked tab go to current, but then appear to go back - it was because the new page had loaded and it wasn't set to current on the new page. Putting the alert in there created a pause before the next page was loaded so I could see what was going on.

To solve the problem, I just put this:

<script type="text/javascript">
xxxTab.className="current";
</script>

in the top of each jsp (where xxxTab is the name of the <a> that invokes it).

So it goes.
Steve

[Christian J]

Each of my pages "included" my "tabs" jsp. What was happening was that when the link was followed and a new page loaded, it brought in a fresh copy of the tabs.jsp, and the className wasn't being set in the copy brought into the new page. That's why I would see the clicked tab go to current, but then appear to go back - it was because the new page had loaded and it wasn't set to current on the new page. Putting the alert in there created a pause before the next page was loaded so I could see what was going on.

True, setting a link className this way is pretty pointless unless the loading of the second page is delayed in some way (e.g. due to a slow connection). Also the CSS ":active" pseudo-class will do the same thing.

To disable a page's own link I use the following (put the script after the menu on the page):

CODE

<script type="text/javascript">
var ddtabs = document.getElementById('ddtabs');
var a = ddtabs.getElementsByTagName('a');
var link_path=document.location.href;
for(var i=0; i<a.length; i++)
{    
    if(a[i].href==link_path)
    {
        a[i].removeAttribute('href');
        a[i].className='current';
    }
}
</script>

You can do similar things with a server-side script, but IMO the above is simpler.

[Darin McGrew]

To disable a page's own link I use the following (put the script after the menu on the page):

I don't rely on client-side scripting for that. I wire it into my page template, so that the <a> and </a> tags are omitted from "links" to the current page.

[Christian J]

Wasn't there a CSS-solution as well, that relied on each BODY element having a page-unique CLASS?

Global CSS:

CODE

body.foo a.foo,
body.bas a.bar {/* CSS for current page */}

Page foo.html:

CODE

<body class="foo">

Page bar.html:

CODE

<body class="bar">

Global menu:

CODE

<a href="foo.html" class="foo">Foo</a>
<a href="bar.html" class="bar">Bar</a>

Again I think this becomes too tedious with all the BODY classes.

[Darin McGrew]

Again I think this becomes too tedious with all the BODY classes.

Well, the tedium can be automated away. The main problem is that the same-page links remain active.