imported>HRWikiMirrorBot: Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)

2026-07-18T21:00:57Z

Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)

imported>HRWikiMirrorBot: Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)

2026-07-18T17:00:33Z

Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)

New page

You can add JavaScript to any page, to let you customize how the page looks. If you use the Monobook skin (the default) you can put the Javascript [/wiki/Special:MyPage/monobook.js here]. If you use Tavistyle you can put it [/wiki/Special:MyPage/tavistyle.js here], or if you use Cologne Blue you can put it [/wiki/Special:MyPage/cologneblue.js here].

There are a lot of "helper" functions available. To use them, put {{subst:[[Template:utilities|utilities]]}} at the top of this page. When you save, this will become

<pre>// include utility functions
document.write('<script type="text/javascript" src="/index.php?title=User:Phlip/utilities.js&action=raw&ctype=text/javascript&dontcountme=s"></script>');
</pre>

which will include all the relevant code. If you want to stop using them, just remove those two lines.

They have been tested in Firefox and Internet Explorer (5.0, 5.5 and 6.0).

If you don't understand JavaScript, feel free to skip down to [#Examples Examples] and mix & match the pieces into the template in [#General General].

== General ==

You need to set up the code to be run when the page has loaded (otherwise it will try to edit a page that doesn't exist yet). Your JavaScript page should basically look like:

<pre>{{subst:utilities}}

function doeverything()
{
// code goes here
}
if (window.addEventListener) window.addEventListener("load",doeverything,false);
else if (window.attachEvent) window.attachEvent("onload",doeverything);
</pre>

and put the things below where it says ''// code goes here''.

== Available functions ==

All these functions are on an object called utilities. So to call them you need to type utilities.''function''(''parameters'').

=== Information ===

==== getArticleFullTitle ====

utilities.getArticleFullTitle()

Returns the title of the current page, like "Help:JavaScript".

<pre>alert("You're looking at " + utilities.getArticleFullTitle());
</pre>

==== getArticleTitle ====

utilities.getArticleTitle()

Returns the title of the current page without the namespace, like "JavaScript". This is useful if you want to be able to find the associated talk page (see [#talknamespace talknamespace])

==== getArticleNamespace ====

utilities.getArticleNamespace()

Returns the [[Help:Namespaces|namespace]] of the current page. Note that this returns a [[Help:Namespace|magical number]] – to get the actual name, see [#namespaces namespaces] below.

==== getArticleURL ====

utilities.getArticleURL()

Returns the URL for the page you're looking at. Note that this is a link to the ''article'', not the exact page you're looking at – for example if you're editing a page, it will still link to the real page (not the edit page). If you want the full link, use window.location.

==== localurl ====

utilities.localurl(''page'' [, ''namespace'' [, ''extras'']])

Returns the URL of the given page. Again, the namespace should be a number. Examples:

<pre>utilities.localurl("Main Page")
utilities.localurl("User:Me") // this works
utilities.localurl("Me", 2) // this works too
utilities.localurl("Me", 2, "action=edit") // an "edit" link for User:Me
utilities.localurl(utilities.getArticleTitle(), utilities.getArticleNamespace(), "action=edit") // an "edit" link for the current page
</pre>

==== namespaces ====

utilities.namespaces[''number'']

An array of the names of each namespace. This is blank for the Main namespace, and the name for all the others.

<pre>var ns = utilities.getArticleNamespace();
if (ns == 0)
alert("You're looking at the main namespace!");
else
alert("You're looking at " + utilities.namespaces[ns] + "!");
</pre>

==== namespacedescription ====

utilities.namespacedescription[''number'']

An array of the descriptions of each namespace – what the tabs are labeled with in Monobook. For example "Project Page" for a [[HRWiki:The Stick|HRWiki namespace page]], etc.

==== articlenamespace ====

utilities.articlenamespace[''number'']

An array of the article namespace for each talk namespace. For example 2 is "User" and 3 is "User talk", so utilities.articlenamespace[2] and utilities.articlenamespace[3] are both 2.

==== talknamespace ====

utilities.talknamespace[''number'']

An array of the talk namespace for each article namespace. For example 2 is "User" and 3 is "User talk", so utilities.talknamespace[2] and utilities.talknamespace[3] are both 3. utilities.talknamespace[-1] (the Special namespace) doesn't exist.

<pre>var ns = getArticleNamespace();
var talkpage = utilities.localurl(utilities.getArticleTitle(), utilities.talknamespace[ns]);
</pre>

=== Monobook-specific ===

These functions only work in the Monobook skin – if you try to use them elsewhere you'll get a big obnoxious error message telling you to fix it.

==== addMonobookQuickbarLink ====

utilities.addMonobookQuickbarLink(''URL'', ''title'' [, ''where''])

Adds a link to the "quickbar" (the bar with links to your user page, your talk page, logout, etc). "Where" should be one of:

* "userpage" if you want the link to appear before your '''userpage''' link.
* "mytalk" if you want the link to appear before your '''my talk''' link.
* "preferences" if you want the link to appear before your '''preferences''' link.
* "watchlist" if you want the link to appear before your '''my watchlist''' link.
* "mycontris" if you want the link to appear before your '''my contributions''' link.
* "logout" if you want the link to appear before your '''log out''' link.
* Leave it off entirely if you want the link to appear after your '''log out''' link.

<pre>utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage")
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here")
</pre>

==== addMonobookTab ====

utilities.addMonobookTab(''URL'', ''title'', ''padding'' [, ''at start''])

Adds a link to the tab bar (the bar with links to the page, the talk page, edit, history, etc). ''padding'' lets you group the tabs together (like edit and history are) – if it's set to true it will be separated from the other links, if you set it to false it won't be. ''at start'' says whether to add the tab to the start or to the end (the tab bar changes too much to be able to say "put it here"... some pages don't have an "edit" link if they're protected, Special pages only have the "special" tab...). If you leave ''at start'' off, it will put it on the end.

<pre>utilities.addMonobookQuickbarLink("http://www.somesite.com/", "A", true) // \
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "B", false) // } these links will all be grouped together
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "C", false) // /
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Loner", true) // this one will start a new group
</pre>

==== addMonobookNavboxLink ====

utilities.addMonobookNavboxLink(''URL'', ''title'' [, ''which one'' [, ''at start'']])

Adds a link to the navigation boxes (the ones to the left). If ''which one'' is left off it will add to the "navigation" box. It can be set to:

* "navigation" to add to '''navigation'''
* "tb" to add to the '''toolbox'''
* "ext" to add to '''external links'''

Again, ''at start'' can be true to add it to the top, or false (or leave it off) to add it to the bottom.

<pre>utilities.addMonobookNavboxLink(utilities.localurl("Toons"), "Toons")
utilities.addMonobookNavboxLink("http://www.somesite.com/", "Some Site", "ext")
</pre>

==== addMonobookBottomTabs ====

utilities.addMonobookBottomTabs([''no CSS''])

Copies the tab bar to the bottom of the page. If you use [#addMonobookTab addMonobookTab], this should come ''after'' those (so the new tabs will be copied too). Normally this adds a lot of extra CSS to the page to get it to work – if you'd rather add the CSS yourself to [/wiki/Special:MyPage/monobook.css your custom CSS], then you can pass a true for ''no CSS'' – usually you can just leave it off entirely and it will work without extra effort.

=== Cologne Blue-specific ===

These functions only work in the Cologne Blue skin – if you try to use them elsewhere you'll get a big obnoxious error message telling you to fix it.

==== cologneBlueNewMessages ====

utilities.cologneBlueNewMessages()

Returns true if you nave new messages. The Cologne Blue "You have new messages" message isn't as "in your face" as the Monobook and TaviStyle ones are. This allows you to fix that, if you want.

<pre>if (utilities.cologneBlueNewMessages())
alert ("Dude! Check your messages!");
</pre>

==== addCologneBlueQuickbarLink ====

utilities.addCologneBlueQuickbarLink(''URL'', ''title'', ''section'' [, ''at start''])

Adds a link to the "quickbar" (the links to the left). ''section'' is the title of the section to add the link under. ''at start'' can be set to true to add the link to the top of the section, or false (or left off entirely) to add it to the bottom. If the section doesn't exist, it'll be added to the bottom.

<pre>utilities.addMonobookNavboxLink(utilities.localurl("Toons"), "Toons", "Browse")
utilities.addMonobookNavboxLink("http://www.somesite.com/", "Some Site", "External Links")
</pre>

==== addCologneBlueTopbarLink ====

utilities.addCologneBlueTopbarLink(''URL'', ''title'' [, ''at start''])

Adds a link to the first top bar (the one with the Main Page, Log Out, etc links).

==== addCologneBlueSubtopbarLink ====

utilities.addCologneBlueSubtopbarLink(''URL'', ''title'' [, ''at start''])

Adds a link to the second top bar (the one with the Printable Version, etc links).

=== TaviStyle-specific ===

These functions only work in the TaviStyle skin – if you try to use them elsewhere you'll get a big obnoxious error message telling you to fix it.

==== addTavistyleTopbarLink ====

utilities.addTavistyleTopbarLink(''URL'', ''title'', ''row'' [, ''at start''])

Add a link to the red links at the top of the page. Setting ''row'' to 1 will add it to the top row (Home, Forum, etc), 2 will add it to the second row (RecentChanges, etc). 3 will add a new row. ''at start'' can be set to true to add the link to the start of the row, or false (or left off entirely) to add it to the end.

==== addTavistyleBottombarLink ====

utilities.addTavistyleBottombarLink(''URL'', ''title'', ''row'' [, ''at start''])

Add a link to the red links at the top of the page. Setting ''row'' to 1 will add it to the top row (Edit, talk, etc), 2 will add it to the second row (Your user page, your talk, etc). 3 will add a new row. ''at start'' can be set to true to add the link to the start of the row, or false (or left off entirely) to add it to the end.

== Examples ==

=== For Monobook ===

Add a couple of new links to the Quickbar:

<pre>utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage") // add it before the "userpage" link
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here") // add it at the end
</pre>

Add a "Validate this page" tab:

<pre>utilities.addMonobookTab("http://validator.w3.org/check?uri=" + escape(utilities.getArticleURL()), "Validate", true)
</pre>

Add another row of tabs to the bottom of the screen:

<pre>utilities.addMonobookBottomTabs()
</pre>

=== For Cologne Blue ===

Add a "You've got new messages" banner:

<pre>if (utilities.cologneBlueNewMessages())
{
var div = document.createElement("div")
div.setAttribute("style", "background: #FFCE7B; border: 1px solid #FFA500; color: black; font-weight: bold; margin: 2em 0 1em; padding: 0.5em 1em");
div.innerHTML = 'You have <a href="' + utilities.localurl("Username", 3) + '">new messages</a>.';
var article = document.getElementById('article');
article.insertBefore(div, article.firstChild);
}
</pre>

Add a couple of new links to the Quickbar:

<pre>utilities.addMonobookQuickbarLink(utilities.localurl("Toons"), "Toons", "Browse") // add a Toons link to the "Browse" section
utilities.addMonobookQuickbarLink("http://www.homestarrunner.com/", "Official Site", "External links") // add a new "External links" section with this in it.
</pre>

Add "article" and "talk page" links to the top bar, like Monobook's tabs

<pre>var namespace = utilities.getArticleNamespace();
var title = utilities.getArticleTitle();
if (utilities.talknamespace[namespace])
{
var talkNS = utilities.talknamespace[namespace];
var talklink = utilities.addCologneBlueSubtopbarLink(utilities.localurl(title, talkNS), utilities.namespacedescription[talkNS], true);
if (utilities.talknamespace[namespace] == namespace)
talklink.style.fontWeight = "bold";
}
var pageNS = utilities.articlenamespace[namespace]
var pagelink = utilities.addCologneBlueSubtopbarLink(utilities.localurl(title, pageNS), utilities.namespacedescription[pageNS], true);
if (utilities.articlenamespace[namespace] == namespace)
pagelink.style.fontWeight = "bold";
</pre>

=== For TaviStyle ===

Add some new links to the top bar:

<pre>utilities.addTavistyleTopbarLink("http://fanstuff.hrwiki.org/", "Fanstuff", 1) // add the fanstuff to the top row
utilities.addTavistyleTopbarLink(utilities.localurl("Toons"), "Toons", 3) // add a third row, with an link to Toons
utilities.addTavistyleTopbarLink("http://www.somesite.com/", "Outta here", 3) // add an external link to the third row
</pre>
[[Category:Help]]

Help:JavaScript - Revision history

imported>HRWikiMirrorBot: Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)

imported>HRWikiMirrorBot: Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)