To contact staff directly or to report bugs, please use Special:Contact.
Hi Guys.
I'm the founder of the Sabrina The Teenage Witch Wiki and I'm having trouble with a table.
I've made a template for a episode list, so I can put it on every episode page, but I can't make it collapsible.
I want it at the bottom of the page so that a bar is there, with a [show] button next to it, so when you press [show], it brings the full table in view, replacing the [show] with a [hide].
I'm sure you've seen stuff like this on tv show wikis, where the episode template is at the bottom of the page, so you get a idea of what I mean.
It looks exactly how I want it to look, but I can't seem to make it collapse, no matter what I put in, Ive tried all the codes but none seem to work.
Ill really appreciate anyone who can help me fix it.
Click here to go the the page with the template.
Please don't vandalise anything.
Thanks alot to whoever can help,
--Fawhad 03:13, 27 June 2009 (UTC)
-Edit-
I just found a link to another similar template I kind of want mine to look like. I found this on the Futurama Wiki. I want mine to look like THIS, I tried copying the 'class="toccolours collapsible collapsed"', but still, nothing.
- Hi Fawhad, you just need to add the collapisble JS to your MeddiaWiki:Common.js. Funny, I also made that Futurama template :P
- Okay, add the following to w:c:sabrina:MediaWiki:Common.js
/* Any JavaScript here will be loaded for all users on every page load. */
/* Test if an element has a certain class **************************************
*
* Description: Uses regular expressions and caching for better performance.
* Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
*/
var hasClass = (function () {
var reCache = {};
return function (element, className) {
return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
};
})();
/** Collapsible tables *********************************************************
*
* Description: Allows tables to be collapsed, showing only the header. See
* [[Wikipedia:NavFrame]].
* Maintainers: [[User:R. Koot]]
*/
var autoCollapse = 2;
var collapseCaption = "hide";
var expandCaption = "show";
function collapseTable( tableIndex )
{
var Button = document.getElementById( "collapseButton" + tableIndex );
var Table = document.getElementById( "collapsibleTable" + tableIndex );
if ( !Table || !Button ) {
return false;
}
var Rows = Table.rows;
if ( Button.firstChild.data == collapseCaption ) {
for ( var i = 1; i < Rows.length; i++ ) {
Rows[i].style.display = "none";
}
Button.firstChild.data = expandCaption;
} else {
for ( var i = 1; i < Rows.length; i++ ) {
Rows[i].style.display = Rows[0].style.display;
}
Button.firstChild.data = collapseCaption;
}
}
function createCollapseButtons()
{
var tableIndex = 0;
var NavigationBoxes = new Object();
var Tables = document.getElementsByTagName( "table" );
for ( var i = 0; i < Tables.length; i++ ) {
if ( hasClass( Tables[i], "collapsible" ) ) {
/* only add button and increment count if there is a header row to work with */
var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
if (!HeaderRow) continue;
var Header = HeaderRow.getElementsByTagName( "th" )[0];
if (!Header) continue;
NavigationBoxes[ tableIndex ] = Tables[i];
Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
var Button = document.createElement( "span" );
var ButtonLink = document.createElement( "a" );
var ButtonText = document.createTextNode( collapseCaption );
Button.style.styleFloat = "right";
Button.style.cssFloat = "right";
Button.style.fontWeight = "normal";
Button.style.textAlign = "right";
Button.style.width = "6em";
ButtonLink.style.color = Header.style.color;
ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
ButtonLink.appendChild( ButtonText );
Button.appendChild( document.createTextNode( "[" ) );
Button.appendChild( ButtonLink );
Button.appendChild( document.createTextNode( "]" ) );
Header.insertBefore( Button, Header.childNodes[0] );
tableIndex++;
}
}
for ( var i = 0; i < tableIndex; i++ ) {
if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
collapseTable( i );
}
}
}
addOnloadHook( createCollapseButtons );
Thanks heaps. It's all good and working now. :) --Fawhad 03:48, 27 June 2009 (UTC)
- This looks like the boilerplate WP code for class collapsible. Hasn't anyone created a version that checks for user language and does a switch to display the appropriate text for hide/unhide ? A more general question- don't we have a better facility for js support for polymorphism with respect to the user's language? -~ Phlox 17:39, 27 June 2009 (UTC)
- I can tell you this code has been edited for specific wiki languages, not sure for what you're thinking. Although, I do know Dantman has rewritten this with jQuery and you may find it beneficial to ask for that as a feature? I'm not particularly good with JS myself though... ~Joey~ ^Talk^ 14:08, 28 June 2009 (UTC)
- Just edit these two declarations at the top to match your language:
var collapseCaption = "hide"; var expandCaption = "show";