Forum:CSS-JS tabs

I'm trying to figure out how the tabs CSS works, such as in this example. The problem I currently have is that copy-pasting the code from that wiki doesn't work.

For some reason they have exactly the same code on Wikia.css, Tabber.js, and Common.css. I can't find anything else that may affect it.

Some experinents on the Kingdomhearts wiki do work however, so I am confuse. What else do I need to copy? -- 10:11, April 21, 2011 (UTC)

One = One Two = Two


 * Hmm, can't you just use 'regular' tabber markup without the excess div tags? The same result can be achieved that way without the awkward formatting. If it's the style you want to change, then it would be easier if you defined what exactly it is that you want to achieve. Sovq 10:47, April 21, 2011 (UTC)


 * That could work for a simple project, but I'm trying to do some crazy stuff again.


 * Basically, I need to put about 150 tabs into it.


 * The first idea was to create something like this: Tab-1.jpg


 * Because of the large number of tabs, I'm thinking of putting some of them on the side like this: Tab-3.jpg


 * I'm also considering some kind of dropdown menu like this: Tab-2.jpg


 * Each tab would have such a dropdown, which would reveal associated content. I've never seen such a menu on wikia, so not sure if it's possible.


 * -- 11:29, April 21, 2011 (UTC)


 * Anything is possible if you're crazy enough to try it. You're probably going to want to use a regular tabber, and then fudge the tabs around with JS.


 * Turns out they have some javascript in their Common.js. It only works if you copy it into Common.js instead of Wikia.js. Can't imagine why.


 * So Wikia.css and Common.js is what has to be copied. This is progress :) -- 23:45, April 22, 2011 (UTC)


 * I suspect MediaWiki:Common.js is loaded earlier than MediaWiki:Wikia.js. Load order can often affect functionality. Strangely, if you look at the page source for this page and other pages on Community, MediaWiki:Wikia.js does not appear to be loaded directly at all, so it may be loaded at some later stage by something dynamic depending on whether it exists or not. -- Fandyllic (talk &middot; contr) 25 Apr 2011 5:05 PM Pacific

I've encountered a weird problem with that code. If I use tab titles that consist of two words, the tabs wrap somewhat fine (though some break). If I use a single word or number, the tabs are displayed on a single line.

Any idea what causes it? -- 20:46, April 26, 2011 (UTC)
 * It's an overflow/word wrapping thing. Technically, there are no spaces between the titles on the tabs, so they're read as, whereas the ones with spaces in them are read as.


 * Try using  in the tab names. NBSP stands for Non-Breaking SPace and it is supposed to prevent breaking across lines. -- Fandyllic  (talk &middot; contr) 27 Apr 2011 5:21 PM Pacific


 * Thanks for the input :)


 * Turns out that the single-line problem can be avoided if you use the alternative way to set titles with the header tags ( title ).


 * NBSP, if used in the  title="title" , forces the tabs to display in a single line. If used in the  title , it becomes literally displayed as &nbsp, so still unusable.


 * I'm going to put it on hold until I can figure it out a bit better. It's usable, though not very pretty.


 * This quest filter is an example of how I intended to use it. Unfortunately, in this case I hit the Template Limits, so the most important tabs had to be displayed separately. However, with less pages it is an excellent way to display summary information. I'm surprised noone is using it yet. It's definitely a huge improvement from using categories. -- 08:53, April 28, 2011 (UTC)