next »

[ctrock]

Hi,
Just signed up on the free account - and I wish to turn this table:

http://worcesterleaguehistory.wikkii.com/wiki/Template:Worcester_League_Seasons

Into either a collapsible table or a Navbox - which hides the year lines.

How would I be able to do this?

[ctrock]

And I'd also like to be able to create an Infobox - basically identical to the one on this Wiki page to display details of a club:

http://en.wikipedia.org/wiki/Bohemian_F.C.

[Fanra]

As for collapsible tables, Wikipedia shows how here:  http://en.wikipedia.org/wiki/Help:Tables#Collapsible_tables

Except it doesn't work on here.  It does work on Wikipedia and MediaWiki sites, so they must have done something to enable it.  I'm going to try to figure out what.

When I go to your link http://en.wikipedia.org/wiki/Bohemian_F.C I don't see an Infobox displaying details of a club, I see, "Wikipedia does not have an article with this exact name."

I'll update my post as I try to discover why Collapsible tables don't work here.  I suspect it might be in the Common.js file or perhaps in the Common.css.  If so, that is good news, as you can edit them with a Farmer wiki.

[Fanra]

Ok, here we go:  http://en.wikipedia.org/wiki/Help:Collapsing

You need to edit your MediaWiki:Common.js file.

You need to add the following to it (taken from http://en.wikipedia.org/wiki/MediaWiki:Common.js):


/** 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.style.display = "none";
        }
        Button.firstChild.data = expandCaption;
    } else {
        for ( var i = 1; i < Rows.length; i++ ) {
            Rows.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, "collapsible" ) ) {
 
            /* only add button and increment count if there is a header row to work with */
            var HeaderRow = Tables.getElementsByTagName( "tr" )[0];
            if (!HeaderRow) continue;
            var Header = HeaderRow.getElementsByTagName( "th" )[0];
            if (!Header) continue;
 
            NavigationBoxes[ tableIndex ] = Tables;
            Tables.setAttribute( "id", "collapsibleTable" + tableIndex );
 
            var Button     = document.createElement( "span" );
            var ButtonLink = document.createElement( "a" );
            var ButtonText = document.createTextNode( collapseCaption );
 
            Button.className = "collapseButton";  //Styles are declared in Common.css
 
            ButtonLink.style.color = Header.style.color;
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
            ButtonLink.setAttribute( "href", "#" );
            addHandler( ButtonLink,  "click", new Function( "evt", "collapseTable(" + tableIndex + " ); return killEvt( evt );") );
            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, "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes, "autocollapse" ) ) ) {
            collapseTable( i );
        }
        else if ( hasClass( NavigationBoxes, "innercollapse" ) ) {
            var element = NavigationBoxes;
            while (element = element.parentNode) {
                if ( hasClass( element, "outercollapse" ) ) {
                    collapseTable ( i );
                    break;
                }
            }
        }
    }
}
 
$( createCollapseButtons );
 
 
/** Dynamic Navigation Bars (experimental) *************************************
 *
 *  Description: See [[Wikipedia:NavFrame]].
 *  Maintainers: UNMAINTAINED
 */
 
// set up the words in your language
var NavigationBarHide = '[' + collapseCaption + ']';
var NavigationBarShow = '[' + expandCaption + ']';
 
// shows and hides content and picture (if available) of navigation bars
// Parameters:
//     indexNavigationBar: the index of navigation bar to be toggled
function toggleNavigationBar(indexNavigationBar){
    var NavToggle = document.getElementById("NavToggle" + indexNavigationBar);
    var NavFrame = document.getElementById("NavFrame" + indexNavigationBar);
 
    if (!NavFrame || !NavToggle) {
        return false;
    }
 
    // if shown now
    if (NavToggle.firstChild.data == NavigationBarHide) {
        for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
            if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) {
                NavChild.style.display = 'none';
            }
        }
    NavToggle.firstChild.data = NavigationBarShow;
 
    // if hidden now
    } else if (NavToggle.firstChild.data == NavigationBarShow) {
        for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
            if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) {
                NavChild.style.display = 'block';
            }
        }
        NavToggle.firstChild.data = NavigationBarHide;
    }
}
 
// adds show/hide-button to navigation bars
function createNavigationBarToggleButton(){
    var indexNavigationBar = 0;
    // iterate over all < div >-elements
    var divs = document.getElementsByTagName("div");
    for (var i = 0; NavFrame = divs; i++) {
        // if found a navigation bar
        if (hasClass(NavFrame, "NavFrame")) {
 
            indexNavigationBar++;
            var NavToggle = document.createElement("a");
            NavToggle.className = 'NavToggle';
            NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar);
            NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');');
 
            var isCollapsed = hasClass( NavFrame, "collapsed" );
            /*
             * Check if any children are already hidden.  This loop is here for backwards compatibility:
             * the old way of making NavFrames start out collapsed was to manually add style="display:none"
             * to all the NavPic/NavContent elements.  Since this was bad for accessibility (no way to make
             * the content visible without JavaScript support), the new recommended way is to add the class
             * "collapsed" to the NavFrame itself, just like with collapsible tables.
             */
            for (var NavChild = NavFrame.firstChild; NavChild != null && !isCollapsed; NavChild = NavChild.nextSibling) {
                if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) {
                    if ( NavChild.style.display == 'none' ) {
                        isCollapsed = true;
                    }
                }
            }
            if (isCollapsed) {
                for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
                    if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) {
                        NavChild.style.display = 'none';
                    }
                }
            }
            var NavToggleText = document.createTextNode(isCollapsed ? NavigationBarShow : NavigationBarHide);
            NavToggle.appendChild(NavToggleText);
 
            // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
            for(var j=0; j < NavFrame.childNodes.length; j++) {
                if (hasClass(NavFrame.childNodes[j], "NavHead")) {
                    NavToggle.style.color = NavFrame.childNodes[j].style.color;
                    NavFrame.childNodes[j].appendChild(NavToggle);
                }
            }
            NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
        }
    }
}
 
$( createNavigationBarToggleButton );
 

[ctrock]

Hi Fanra - try this link to see the nav box on the right hand side - I'd basically like to replicate the box with the club details in - down to it's positioning within the article:

http://bit.ly/igj4Vk

As for the Collapsible Tables issue - I've added that ream of script into the page as instructed:

http://worcesterleaguehistory.wikkii.com/wiki/MediaWiki:Common.js

But my table I've added the "Collapse" tag into: http://worcesterleaguehistory.wikkii.com/wiki/Template:Worcester_League_Seasons

Still doesn't seem to work.

Any ideas?

[Fanra]

As for the Collapsible Tables issue - I've added that ream of script into the page as instructed:

http://worcesterleaguehistory.wikkii.com/wiki/MediaWiki:Common.js

But my table I've added the "Collapse" tag into: http://worcesterleaguehistory.wikkii.com/wiki/Template:Worcester_League_Seasons

Still doesn't seem to work.

Any ideas?

Yeah, it's not working because what I posted is missing some stuff.  Strangely enough, Wikipedia's Common.js is also missing it, but MediaWiki has it.  The reason is that Wikipedia, where I copied the code from, has the function already defined somewhere.  

I'll post what you need here from MediaWiki.
---------------------------------------------------------------------------
First, remove at the end:

$( createNavigationBarToggleButton );

----------------------------------------------------------

Now add at the end:



// adds show/hide-button to navigation bars
function createNavigationBarToggleButton() {
   var indexNavigationBar = 0;
   // iterate over all < div >-elements
   var divs = document.getElementsByTagName( 'div' );
   for( var i = 0; NavFrame = divs; i++ ) {
      // if found a navigation bar
      if( hasClass( NavFrame, 'NavFrame' ) ) {
         indexNavigationBar++;
         var NavToggle = document.createElement( 'a' );
         NavToggle.className = 'NavToggle';
         NavToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
         NavToggle.setAttribute( 'href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');' );
 
         var NavToggleText = document.createTextNode( NavigationBarHide );
         for( var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) {
            if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) {
               if( NavChild.style.display == 'none' ) {
                  NavToggleText = document.createTextNode( NavigationBarShow );
                  break;
               }
            }
         }
 
         NavToggle.appendChild(NavToggleText);
         // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
         for( var j = 0; j < NavFrame.childNodes.length; j++) {
            if( hasClass( NavFrame.childNodes[j], 'NavHead' ) ) {
               NavFrame.childNodes[j].appendChild( NavToggle );
            }
         }
         NavFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
      }
   }
}
addOnloadHook( createNavigationBarToggleButton );

[Fanra]

Hi Fanra - try this link to see the nav box on the right hand side - I'd basically like to replicate the box with the club details in - down to it's positioning within the article:

http://bit.ly/igj4Vk

I see you want to use Template:Infobox.  According to Wikipedia, the one they use is a special one created for Wikipedia that also requires an Extension be installed, something you can't do with Farmer wikis.

However, there is good news.  Wikipedia has a project for prepping templates for use outside of Wikipedia.

If you go here:  http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Transwiki

you can read about it.

http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Transwiki/Template:Infobox

is the page with the Template:Infobox you want.  Choose Edit, Copy All, and then paste it into a "Template:Infobox" you create on your wiki. 

Be sure to choose "Cancel" on Wikipedia after you copy it so you don't accidentally mess up Wikipedia's page .

[ctrock]

All great help so far.

Although I'm hitting one small problem - and you'll have to bear with me as I've never really gone deep into how Wiki's are coded.

I have the Infobox template setup to give me a blank box on the right as I wanted.

Although it looks like it's just a blank box, I want to be able to fill it with details using the "Football Infobox" as shown here:

http://en.wikipedia.org/wiki/Template:Infobox_football_club

I've had a look at the Exporting function linked to on Transwiki - but I have no idea how to turn the Wikipedia Football Club Infobox into one that'll work on my Farmer wiki.

[Fanra]

The way I do things is to copy stuff from Wikipedia or MediaWiki and then try to tweak it until it works.

I've created an account on your wiki and I'll try to get it to work.  You can always just revert any changes I make if you don't like them.

Contact me there if you wish to discuss further.  I already posted on your User talk page.

[gin-san]

if it is just a simple hide/show box, can refer to this:
http://gintama.wikkii.com/wiki/OP8_Light_Infection_%28Prague%29

[Bruce]

Sorry for bumping an old thread, but I tried the same thing but my navbox is all messed up.

http://aiff.wikkii.com/wiki/AIFF:Sandbox

http://aiff.wikkii.com/wiki/MediaWiki:Common.js

[nidek]

I think the big problem is that you're missing the CSS to make those tables work, for example, there is nothing in your CSS for '''navbox'''.
If you copied that template from somewhere else then you have to copy the associated CSS too.

[Bruce]

Can someone point me to exactly what to copy? I got the template from Wikipedia and the .js script from above...

[Fanra]

You have to replace the

Code:

{{{list3}}}

and such with the names you want to use.  I did that for you for Alice and Bob, go check it out at http://aiff.wikkii.com/wiki/AIFF:Sandbox

As for the colors, you need to grab the Common.css stuff from Wikipedia.  But not the entire page, just the part for navboxes.  Let me see if I can post that for you here.

[Fanra]

Put this in your MediaWiki:Common.css:

/* EVERYTHING BELOW THIS LINE TAKEN FROM WIKIPEDIA: COMMON.CSS  */

/* Default skin for navigation boxes */
table.navbox {            /* Navbox container style */
    border: 1px solid #aaa;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)       */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
    text-align: center;      /* Title and above/below styles */
    padding-left: 1em;
    padding-right: 1em;
}
.navbox-group {              /* Group style */
    white-space: nowrap;
    text-align: right;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
}
.navbox, .navbox-subgroup {
    background: #fdfdfd;     /* Background color */
}
.navbox-list {
    border-color: #fdfdfd;   /* Must match background color */
}
.navbox-title,
table.navbox th {
    background: #ccccff;     /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;     /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;     /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;     /* Even row striping */
}
.navbox-odd {
    background: transparent; /* Odd row striping */
}
 
.collapseButton {          /* 'show'/'hide' buttons created dynamically */
    float: right;          /* by the CollapsibleTables javascript in    */
    font-weight: normal;   /* [[MediaWiki:Common.js]] are styled here   */
    text-align: right;     /* so they can be customised.                */
    width: auto;
}
.navbox .collapseButton {  /* In navboxes, the show/hide button balances */
    width: 6em;            /* the vde links from [[Template:Navbar]],    */
}                          /* so they need to be the same width.         */

.navbar {                  /* Navbox template links */
    font-size: 88%;        /* Default font-size */
    font-weight: normal;
}
.navbox .navbar {
    font-size: 100%;       /* Font-size when nested within navbox */
}

[Bruce]

Thanks, but there's gray inside instead of white and light gray...

[Fanra]

Your Template:Navbar was wrong.  I fixed it for you.

[Bruce]

Thanks!

[Bruce]

Unfortunately, my user-created tables don't collapse or even show the button...can I have extra help, please?

[Fanra]

Unfortunately, my user-created tables don't collapse or even show the button...can I have extra help, please?

I had this problem also.

One of the reasons I upgraded to v1.17.0 was because they were supposed to have added a new way to collapse.  They left it out until 1.18.0 for now but I still managed to add it with some extra work.

Assuming you don't want to bother with the new way, you can just get the old way to work.  I never managed to do that but when I asked someone for help on the new way, he mentioned that my Common.js file had extra stuff in it that was unneeded and was also coded wrong, which caused the problem.

I can go look at your Common.js file.  However, if I start fiddling with it I'm not sure if you would like that.  If you want to try it yourself, try removing everything and then putting back only the minimum you need.

Let me know if you want me to really go crazy with your Common.js and Common.css to try to get it to work or if you want to try it yourself first.