User:Nx/bag of tricks

Resizing an image

Using some css trickery, you can make an image resize itself when the browser window is resized.

Resizing to width

An image inside an element (usually a div) with the "resize_image" class will be resized proportionally so that its width matches the element's width. E.g. the following image will always be the same width as the page:

Creating a background

This is a bit more complex. The semitransparent brain in the upper right corner is created using this code:

<div class="resize_image" style="position:absolute; z-index:-1; top:0; right:0; width:70%; height:100%; -moz-user-select:none; -webkit-user-select:none; user-select:none;">[[File:Brain watermark2.png|link=]]</div>

The div is positioned in the upper right corner using "position:absolute; top:0; right:0;"; it is also pushed under everything else using "z-index:-1". Its width and height are set - since the div's class is "resize_image", the image will be resized to 70% of the page width. The image is made unclickable using the mediawiki "link=" parameter, and unselectable using the "-moz-user-select:none; -webkit-user-select:none; user-select:none;" css properties.

Stretching

To resize the image to fully cover an element (without keeping its aspect ratio), use the class "stretch_image", e.g.:

<div class="stretch_image" style="width:300px; height:50px;">[[File:Goldenbrain.png|300px]]</div>

produces:

Note 1: It is still useful to supply a size as an image parameter, since MediaWiki will resize the image and serve a potentially much smaller file. In this case, we don't need anything larger than 300 pixels, so we ask for the 300px version of the image. This file is 116 kilobytes, compared to the full file, which is 576 kilobytes.

Note 2: Resist the urge to break up the long line of code. If you put the file link on a new line, mediawiki will insert a <p> element around it, and this won't work on some browsers.

See User:Nx/page background for an example of using stretching to fill the entire page background with an image.

Hiding redlinks

Redlinks inside an element with the class "hideredlinks" are not shown. E.g.:

<span class="hideredlinks">[[User:Nx/this page does not exist]]</span>

This is more efficient than using ifexist, and you won't hit the limit of 99 expensive parser function calls per page.

Hiding and unhiding on mouse hover

Make an element, give it the "hover_collapse" class, then give some of its children the "hover_target" and an appropriate display class. These children will be hidden and can be unhidden by hovering the parent:

Hover here to unhide

The display class can be one of the following:

• inline: corresponds to the css display:inline property. Normally you want this for spans
• block: corresponds to the css display:block property. Normally you want this for divs
• table-row: this is necessary for table rows to display properly (see below)
• table-cell: this is necessary for table cells to display properly (see below)

An example of a div with the block class:

Hover here

to unhide

Tables:

Give the table the hover_collapse class.

If you want to hide an entire row, give it the hover_target and table-row classes:

col1	col2	col3
row1 a	row1 b	row1 c
row2 a	row2 b	row2 c
row3 a	row3 b	row3 c

If you want to hide individual cells, use table-cell instead of table-row:

col1	col2	col3
row1 a	row1 b	row1 c
row2 a	row2 b	row2 c

To hide an entire column, just hide all its cells:

col1	col2	col3
row1 a	row1 b	row1 c
row2 a	row2 b	row2 c
row3 a	row3 b	row3 c

An example of a signature that uses this:

Nx talk contribs email 10:20, 22 December 2009 (UTC)

And it's short enough that you don't have to use a sig template.

Remembering the state of collapsible tables

The remembercollapse class will save the state of a collapsible table and restore it upon refreshing the page:

table header
hidden stuff goes here

The table can be collapsed initially using the collapsed class

table header
hidden stuff goes here

It is important to use a unique id for the table, especially if it is a template, otherwise this will not work properly. As long as they don't appear on the same page together, two tables can have the same id; this will make their state shared.

Edit notices

Edit notices are notices that appear above the textbox when editing a page (they will not will appear if the page is locked and you are viewing the source). You can set up an editnotice in your user or user talk space by creating some special subpages:

• "User:YOURNAME/Editnotice all" will appear when editing any page in your user space (but not your user talk space)
• "User:YOURNAME/somepage/Editnotice" will only appear above "User:YOURNAME/somepage", and will override the previous notice. E.g. User:YOURNAME/Editnotice will appear to anyone trying to edit your user page.
• "User:YOURNAME/Editnotice all talk" (not "User talk:YOURNAME/Editnotice all" or "User talk:YOURNAME/Editnotice all talk") will appear when editing any page in your user talk space
• "User:YOURNAME/somepage/Editnotice talk" (not "User talk:YOURNAME/somepage/Editnotice" or "User talk:YOURNAME/somepage/Editnotice talk") will only appear above "User talk:YOURNAME/somepage", and will override the previous notice. E.g. User:YOURNAME/Editnotice talk will appear to anyone trying to edit your main user talk page, but not any other talk page.

The action parameter will contain the text "view source" if the user is unable to edit the page. Otherwise it will be blank.

Example

User:Test account 1 has decided to protect his talk page to prevent harassment from BONS. To still allow unregistered users to contact him, he creates User talk:Test account 1/anons, which he promises to check regularly. He creates an editnotice for his main talk page only at User:Test account 1/Editnotice talk. Using the action parameter, he can display a standard message to users who can edit his talk page, and a notice with a link to his anon subpage to unregistered users who cannot edit the page. Then he creates User:Test account 1/anons/Editnotice talk for the anon talk page too.