InfoWidgets/Quickstart guide

Add a container
To begin place a div where ever you want on what ever page of your wiki you like and style it to your heart's content:

&amp;nbsp; Important is to give your container a unique identifier. An ID attribute is the most obvious choice. But a class or any other valid jQuery selector will do just as well.

Choose a script file
Before you start adding magic to your container you need to decide where to add the JavaScript. So here's Randomtime's handy guide to JavaScript files:


 * MediaWiki:Monobook.js is for javascript that will load for all users on your wiki that use the monobook skin
 * MediaWiki:Common.js is for javascript that will load on either skin
 * MediaWiki:Wikia.js will load for all users using the default (Wikia) skin
 * User:YOURNAME/Wikia.js (or Monobook.js, Common.js) will load only for you
 * On Central only(!), you can create a global.js - which will load on all sites across Wikia, but only for you.

Add JavaScript
Now here's a complete example of an InfoWidget:

$(document).ready(function {    if ($('#test').length) {        importScriptPage('InfoWidgets/code.js', 'dev');        window.widgetsLoaded = function  {            myWidget = Widgets.newPages;            myWidget.selector = '#test';            Widgets.add(myWidget);        }    } });

Let's go through the lines:

if ($('#test').length) { /*...*/ } That ensures all that widgety code is only loaded for the page that does contain the widget. importScriptPage('InfoWidgets/code.js', 'dev'); window.widgetsLoaded = function { /*...*/ } The name must be "widgetsLoaded" and it must be attached to the window object. myWidget = Widgets.stubs; Here's the current list of preconfigurations: myWidget.selector = '#test'; Widgets.add(firstWidget); Widgets.add(secondWidget); // etc.
 * You have to embed the Widget initialzation into a call of the ready function to make sure its not executed until the document (and thus the div container) has fully loaded.
 * Next you should test for the container you want to fill:
 * this line loads the InfoWidgets code from this very wiki:
 * Since the InfoWidgets code is loaded asynchronously you have no way of knowing when it will be good and ready. That's why you have to add a function it can call once it's loaded:
 * We'll use one of the preconfigured widget descriptions here:
 * There's on thing that's still missing from your widget description: The selector of your container:
 * And finally add the widget description(s) to the render queue:

And that's that.

Unless you want to read the Advanced Guide