Inactive Tab styles

Inactive Tab styles

by David Scotson -
Number of replies: 9

I've come across what I think may be a bug while styling the 'tabs' that first (I think) appeared in Glossary but now are used in Quiz and probably a few other areas.

The problem is with tabs that are classed as inactive. All tabs are either active, meaning you can click on them to take you to another tab, selected in which case they are the current tab, are highlighted and aren't linked, or inactive which effectively means you can't click on them as they are not links but is used in two very different situations.

  • In Glossary, where you might be waiting for people to add entries for you to approve, the "waiting for approval" tab remains inactive until there is actually something to approve.

  • In Quiz there are submenus of tabs. Clicking on the "reports" tab displays another row of three tabs below it. The "reports" tab now becomes inactive as you can't click it, but it is actually closer in kind to selected as it is now a heading for the sub-tabs.

Possibly because of this confusion the standard theme tabs seem to fall between two stools and the inactive tabs look neither particularly disabled, nor particularly highlighted.

Obviously this situation would be even worse if inactive tabs and sub-tabs were combined in one set of tabs.

potential solutions

  1. Change Glossary so that it no longer conveys state via the tabs. The "waiting for approval" tab will always be active and if you click on it when there are no pending definitions it will say so. (If some more pro-active notification is needed then just some text saying "x definitions awaiting approval" could do the same job)

  2. Change Quiz so that tabs with submenus are classed as something else, selected would probably work but maybe another state entirely would be best to allow for different styling opportunities.

I think either of these alone would fix the problem, but probably both should be implemented. Simply disabling a tab doesn't give that much information. A tab that said "no-one has submitted any definitions yet" gives far more information about how to proceed. Okay, in that example it's fairly obvious but there may be other occasions when a tab is inactive and it's not so obvious what the user should do to change that state of affairs.

Average of ratings: -
In reply to David Scotson

Re: Inactive Tab styles

by David Scotson -
While looking at this I noticed a couple of problems with the standard theme tabs:

- unclickable links still change when you mouseover them
- the hover activation area is quite a bit larger than the clickable target

I made an attempt to fix this with the following code, though I got bored before I finished it off completely. If you're using the standard theme or its tab implementation I'd suggest having a look at finishing this off.

 

.tabrow td,

.tabrow .inactive:hover {

  background:url(pix/tab/left.gif) top left no-repeat;

}

.tabrow td .tablink,

.tabrow .inactive:hover .tablink  {

  background:url(pix/tab/right.gif) top right no-repeat;

}

.tabrow td:hover {

  background-image:url(pix/tab/left_hover.gif);

}

.tabrow td:hover .tablink {

  background-image:url(pix/tab/right_hover.gif);

}

.tabrow .last {

  background: transparent url(pix/tab/right_end.gif) top right no-repeat;

}

.tabrow td.selected:hover {

  background-image:url(pix/tab/left_active_hover.gif);

}



.tabrow td.selected:hover .tablink {

  background-image:url(pix/tab/right_active_hover.gif);

}

.tabrow .selected,

.tabrow td.selected:hover {

  background:url(pix/tab/left_active.gif) top left no-repeat;

}

.tabrow .selected .tablink,

.tabrow td.selected:hover .tablink {

  background:url(pix/tab/right_active.gif) top right no-repeat;

}



.tabrow td .tablink  {

    background: transparent;

    border: 0;

    padding: 0;

    margin-right: 8px;

}





.tabrow .selected .tablink {

  padding-bottom:  0;

  padding-left: 0;

  padding-top: 10px;

  padding-right: 8px;

  margin-right: 0px;

}

.tabrow  .tablink a {

  width: 100%;

  padding-top: 10px;

  padding-right: 8px;

  margin: 0;

}



.tabrow td .tablink a {

  display: block;

  width: 100%;

  background:url(pix/tab/right.gif) top right no-repeat;

}



.tabrow td:hover .tablink {

  background: none;

}



.tabrow td:hover .tablink a {

  background-image:url(pix/tab/right_hover.gif);

}
Average of ratings: -
In reply to David Scotson

Re: Inactive Tab styles

by David Scotson -

I notice another recent thread about the performance impact of the hover behaviour .htc file in IE, which doesn't support :hover on anything other than a link tags.

The solution given in the reply above goes someway towards fixing this as it increases the prominance of a tag allowing it to act as the activation of the rollover effect.

This would allow standard sliding doors style effects on the tabs, though with the caveat that the left hand side rounded image should probably be made as thin as possible and that images that move or otherwise transform radically transform when moused over will probably be difficult to achieve.

My approach in my Kubrick theme has been to steal the look, though sadly not the clean, semantic code, of Dan Cederholm's Scalable Mini Tabs.

I may do some further research into the performance effects of the .htc code as I'd quite like to use it in my theme's. Perhaps it can be conditionally triggered in some way to make it's impact negligable.

Average of ratings: -
In reply to David Scotson

Re: Inactive Tab styles

by Urs Hunkler -
Picture of Core developers

Hi David,

in the theme "orangewhite" you can see an "extended" version of the tabs with more states. I added "active2" to the inactive tabs which are the sources of the "subtabs" and gave them another color. All inactive tabs don't react on the mouseover.

You can see how they work in "Glossary" or on the "participants" pages.

I am very interested in your opinion.
Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Inactive Tab styles

by A.G. Pate -
Damn, I wish I knew a hundreth of what you know, Urs.

Does anyone else think this man deserves a medal and a standing ovation for all his work?
Average of ratings: -
In reply to Urs Hunkler

Re: Inactive Tab styles

by David Scotson -

Is this in a really recent version of the Moodle code? I thought I was fairly up to date with cvs but I don't seem to have the .activetwo class in my HTML (though I can see it in your theme CSS).

Average of ratings: -
In reply to David Scotson

Re: Inactive Tab styles

by Urs Hunkler -
Picture of Core developers

David, you can see the class at your userpage at moodle.org in the second row. It's part of the tab "Forum Posts". This classes are in the code for quite a while now, so your Moodle should show them too.

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Inactive Tab styles

by David Scotson -

Ah got it. I was looking at the second row of tabs in Quizzes.

I like the more straightforward implementation of the tab metaphor. The way the color of the highlighted tab joins with the background color of the main content, and the 'shadow' that is cast over the unselected tabs. Maybe something like that could be used to tie the second row of tabs to the first, like the different colored section tabs in Amazon?

I've uploaded a slightly modified version which uses display: block on the a tag and increases the size of the clickable region to be the entire tab. This means that :hover effects can be applied in IE and Firefox without the use of .htc stuff.

The Outline Custom Elements... feature of Firefox's Developer extension is a good way to see the relative coverage of the a and the .tablink.

At the moment my modified CSS file has no hover effects as I removed the one's that used td:hover but you can add them back to the a tag. The slight drawbacks of this approach are a) that you only have a single image within the clickable area though a very thin image would be acceptable in the non-clickable div or td background (with appropriate padding/margin/widths set) but that image wouldn't be able to change on mouseover, whereas text effects and borders would and b) you can't do hover effects on the inactive tabs because they don't have a tags. I don't think this last one is a problem as such, as the animation should be a hint that something is clickable.

Do you know any way to stop the two rows of tabs being the same size? The first row formats the way I tell it to and then the second row seems to expand to fill the same width. Can I override that in CSS or is it an HTML thing? I always get confused about what's possible when styling tables with CSS.

Average of ratings: -
In reply to Urs Hunkler

Re: Inactive Tab styles r0 vs. r1

by David Scotson -

The profile sub-tabs seem to be confusing the .r0 and .r1 styles. Everywhere else (including the same row of tabs, where there are no subtabs):

.r0 = 1st row .r1 = 2nd row

but for the profile sub tabs this is reversed.

Average of ratings: -