This Forum has been archived

Visit the new Forums
Forums: Index Support Requests Renew hide rail code
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

50px-Replacement filing cabinet.svg

Note: This topic has been unedited for 1783 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I found an old code for hiding buttoms for the rail. Saidly it's an bit old and will now cause bugs:

  • On some pages the buttom will apear 2 times
  • The expand buttom should be able to make your content again visible without reloading your page. (toggle)
/* add a button that increases the content size and hides the rail */
function CreateContentResizeButton() {
	var contentWidth = $('#WikiaMainContent').width();
	var catlinksWidth = $('#catlinks').width();
	var html = '<ul class="wikia-menu-button" id="resizeButton" style="margin-left:10px"><a onclick="ExpandContent(' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a></ul>';
	if(contentWidth < 1000) {
		if($('#WikiHeader .wikia-menu-button').length > 0) {$('#WikiHeader .wikia-menu-button').after(html);}
		if($('#WikiHeader .wikia-button').length > 0) {$('#WikiHeader .wikia-button').after(html);}
		if($('#WikiHeader .view-source').length > 0) {$('#WikiHeader .view-source').after(html);}
		if(wgCanonicalNamespace == 'User_blog') {$('#WikiaUserPagesHeader .wikia-button').after(html);}
function ExpandContent(contentWidth, catlinksWidth) {
	document.getElementById('WikiaMainContent').style.width = '1000px';
	document.getElementById('catlinks').style.width = '1000px';
	document.getElementById('WikiaRail').style.display = 'none';
	$('#resizeButton a').replaceWith('<a onclick="CompressContent(' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Compress the content area back to its original width, and restore the side rail."> Compress >--< </a>');

function CompressContent(contentWidth, catlinksWidth) {
	document.getElementById('WikiaMainContent').style.width = contentWidth;
	document.getElementById('catlinks').style.width = catlinksWidth;
	document.getElementById('WikiaRail').style.display = 'block';
	$('#resizeButton a').replaceWith('<a onclick="ExpandContent(' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a>');

At the risk of starting a "whose code is better" fight, I wrote my own script to do this a few weeks ago after being disappointed with the ones I found floating around.

Rail Hiding Code
 * JavaScript to Toggle the Wikia Rail on and off.
 * Adds a button to the toolbar that allows expand/shrink.
 * Exploits oasis-one-column for formatting. one-column occurs normally
 * on special pages like Edit, RecentChanges, Diff, etc so we don't do
 * anything on those pages. (Edit still has the Rail but it provides a
 * built-in collapser for it)
if ( === "oasis") { // Don't do anything in Monobook
$(function($) {
    "use strict";
    // [[Wikipedia:Arrow (symbol)]] for Unicode codings
    var _expandMsg = "Expand Content \u2192", // 2192 is arrow-right
        _shrinkMsg = "Shrink Content \u2190", // 2190 is arrow-left
        _$link = $(document.createElement('a')),
        _$rail = $('#WikiaRail'),
        _header = document.getElementById('WikiaPageHeader'),
        _search = _header && document.getElementById('WikiaSearch');
    function expandContent()
        if (_search) _header.appendChild(_search);
        document.body.className += " oasis-one-column";
    function shrinkContent()
        document.body.className = document.body.className.replace(
          /(?:^|\s+)oasis-one-column\b/, ''
        if (_search) _$rail.prepend(_search);
    function updateLink(aExpanded)
        _$link.text(aExpanded ? _shrinkMsg : _expandMsg);
    function createClickHandler(aExpandFunc, aShrinkFunc)
        if (!aShrinkFunc) aShrinkFunc = aExpandFunc;
        return function(event) {
            if (_$link.text() === _expandMsg)
                updateLink(aExpandFunc() || true);
                updateLink(aShrinkFunc() && false);
            return false;
    // Default link
    _$link.prop('href', '#').text(_expandMsg);
    var handle_click;
    if (!/\boasis-one-column\b/.test(document.body.className)) {
        handle_click = createClickHandler(expandContent, shrinkContent);
    } else {
        // This will only affect Source mode.
        var node = $('#EditPage .editpage-widemode-trigger');
        if (node.length) {
            handle_click = createClickHandler(function() {; });
            // Install an event handler to keep the button in sync
            var node_click = function(event) {
            // Bring into sync with initial state
            // Wait until other start-up JS finishes and the browser becomes
            // idle since initial state seems to come from another script
            // that runs after we do.
            window.setTimeout(node_click, 0);
            window.setTimeout(node_click, 2000); // Failsafe.
    if (handle_click) {
        var toolbar = $("#WikiaFooter .toolbar >");
        if (toolbar.length) {

This script also sort of works on Edit pages as well, for hiding the EditRail. Lunarity 13:07, August 3, 2012 (UTC)

Updated version. I fixed the Edit Page mode to work smarter and stopped it making the search box disappear on user pages. Lunarity 09:11, August 6, 2012 (UTC)

I works thx for all help--Jens Ingels (talk) 14:51, August 3, 2012 (UTC)

Edite: The new code work fine. Hower it only get some bugs:

  • The switch for edite and not editing are different. They renember on both spots and that gives bugs
  • The code activation will also work on other wikias without this function. What again give bugs
  • Something the var goes back to 1. So the buttoms says to expand when it's expand already.

I think the main problem would be that of working on other wikias.--Jens Ingels (talk) 22:34, August 6, 2012 (UTC)

[Updated version again] Sorry, I'm having difficulty understanding you.
  1. You mean that the switch gets out of sync on Edit pages? I've added an event handler now so the button will keep itself in sync with the page.
  2. I'm not sure I follow, I tested on both a MW1.19 and MW1.16.1 wiki and it worked on both. The button does not work in Visual Editor mode, only Source mode. If you click "Expand" on the edit page then it will expand, but only the Source view (even though you can't see it). If you change to Source mode after clicking Expand then you will see that it has actually expanded. I realise this may not be intuitive but expanding the WYSIWYG editor didn't seem like a good idea, it's also complicated to do which would make it fragile.
  3. If this is on edit pages then I probably already fixed that in #1, if this is on a normal article page then can you give me a link? It's probably a script conflict.
Lunarity 06:25, August 7, 2012 (UTC)

Sorry about that, englisch is not my main language. Your last update fixed all bugs. The problem was your previous script saved the changes what's why there where some problems in the WYSIWYG editor like you said above. You should post this on the dev.wikia. If you want I can add it there.--Jens Ingels (talk) 11:57, August 7, 2012 (UTC)

[Minor updated] Okay, I'm glad it works fully now. The Edit page functionality was something I originally added as an afterthought for completeness sake but I think it's pretty robust now.
I'm not familiar with the submission process for the Dev Wikia, you can submit it there if you want to. Lunarity 13:28, August 7, 2012 (UTC)

Thx a lot for your help. I added it on the dev wiki:

--Jens Ingels (talk) 15:31, August 7, 2012 (UTC)