TestPage

Test Page for messing about with Wikia features.

UI Test
NOTE: The values in the examples below are purely random. Refresh the page to see new values!

The widget comes in two varieties:


 * 1) Rateable
 * 2) Rated

Rateable
Elements with the CSS class  will be turned into rateable widgets. Their contents will be removed and four new elements will be added to each of them:

None of these elements or their classes should be removed or altered - unless you want to remove the Rateable entirely. Adding new elements, new attributes or new classes is safe however. The four CSS classes of the Rateable exist purely for scripting purposes. There are no CSS rules assigned to them. Feel free to define them however you like.

Example 1
By default the rateable widget uses a star of 15x15 pixels and a five star scale with increments of 0.5:

source:

Example 2
The size of the star symbol and the number of stars can be overriden. Here the code uses a ten star scale with increments of 1:

source:

Example 3
By default the widget is completely unstyled. This is the same widget with a bit of CSS magic:

source:

CSS for the demo above (click "Expand")

Rated
The Rated widget is a redux of the Rateable widget. It doesn't have any data containers - only the slider. And the slider cannot be interacted with. The value can only be set via JavaScript and cannot be submitted.

Example 4
source:

Example 5
It's possible to specify an alternate symbol for both Rateable and Rated widgets:



source:

Data Attributes
These attributes can be set for both Rateable and Rated widgets.

NOTE: These values can be set via wikitext only! Not via JavaScript!

Source
JavaScript for the demos above: