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