Work in progress — This wiki is an active migration / mirror of Homestar Runner Wiki and is not finished yet. Account registration and public editing are turned off until the migration is further along. For status updates, see the migration thread on the forums.

Help JavaScript: Difference between revisions

From HR Wiki Twice
Jump to navigationJump to search
imported>HRWikiMirrorBot
Imported from hrwiki.org via Wayback Machine (HTML→wikitext)
 
imported>HRWikiMirrorBot
Reimported from hrwiki.org Wayback HTML→wikitext (full reconvert)
 
Line 1: Line 1:
<!-- Mirrored from Homestar Runner Wiki (hrwiki.org) via Wayback Machine; HTML converted to wikitext. Formatting may be imperfect. -->
<!-- Mirrored from Homestar Runner Wiki (hrwiki.org) via Wayback Machine -->
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].
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 &quot;helper&quot; functions available. To use them, put <code>{{subst:[[Template:utilities|utilities]]}}</code> at the top of this page. When you save, this will become
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
<pre>// include utility functions
document.write('&lt;script type=&quot;text/javascript&quot; src=&quot;/index.php?title=User:Phlip/utilities.js&amp;action=raw&amp;ctype=text/javascript&amp;dontcountme=s&quot;&gt;&lt;/script&gt;');</pre>
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.
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).
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 &amp; match the pieces into the template in [#General General].
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].
 
{| id="toc" class="wikitable toc" summary="Contents"
|-
| <div id="toctitle">
 
<span id="contents"></span>
== Contents ==


</div>
== General ==
* [#General 1 General]
* [#Available_functions 2 Available functions]
** [#Information 2.1 Information]
*** [#getArticleFullTitle 2.1.1 getArticleFullTitle]
*** [#getArticleTitle 2.1.2 getArticleTitle]
*** [#getArticleNamespace 2.1.3 getArticleNamespace]
*** [#getArticleURL 2.1.4 getArticleURL]
*** [#localurl 2.1.5 localurl]
*** [#namespaces 2.1.6 namespaces]
*** [#namespacedescription 2.1.7 namespacedescription]
*** [#articlenamespace 2.1.8 articlenamespace]
*** [#talknamespace 2.1.9 talknamespace]
** [#Monobook-specific 2.2 Monobook-specific]
*** [#addMonobookQuickbarLink 2.2.1 addMonobookQuickbarLink]
*** [#addMonobookTab 2.2.2 addMonobookTab]
*** [#addMonobookNavboxLink 2.2.3 addMonobookNavboxLink]
*** [#addMonobookBottomTabs 2.2.4 addMonobookBottomTabs]
** [#Cologne_Blue-specific 2.3 Cologne Blue-specific]
*** [#cologneBlueNewMessages 2.3.1 cologneBlueNewMessages]
*** [#addCologneBlueQuickbarLink 2.3.2 addCologneBlueQuickbarLink]
*** [#addCologneBlueTopbarLink 2.3.3 addCologneBlueTopbarLink]
*** [#addCologneBlueSubtopbarLink 2.3.4 addCologneBlueSubtopbarLink]
** [#TaviStyle-specific 2.4 TaviStyle-specific]
*** [#addTavistyleTopbarLink 2.4.1 addTavistyleTopbarLink]
*** [#addTavistyleBottombarLink 2.4.2 addTavistyleBottombarLink]
* [#Examples 3 Examples]
** [#For_Monobook 3.1 For Monobook]
** [#For_Cologne_Blue 3.2 For Cologne Blue]
** [#For_TaviStyle 3.3 For TaviStyle]
 
|}
 
<span id="general"></span>
== <span class="mw-headline">General</span> ==


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:
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:
Line 63: Line 24:
   // code goes here
   // code goes here
}
}
if (window.addEventListener) window.addEventListener(&quot;load&quot;,doeverything,false);
if (window.addEventListener) window.addEventListener("load",doeverything,false);
else if (window.attachEvent) window.attachEvent(&quot;onload&quot;,doeverything);</pre>
else if (window.attachEvent) window.attachEvent("onload",doeverything);
</pre>
 
and put the things below where it says ''// code goes here''.
and put the things below where it says ''// code goes here''.


<span id="available-functions"></span>
== Available functions ==
== <span class="mw-headline">Available functions</span> ==


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


<span id="information"></span>
=== Information ===
=== <span class="mw-headline">Information</span> ===


<span id="getarticlefulltitle"></span>
==== getArticleFullTitle ====
==== <span class="mw-headline">getArticleFullTitle</span> ====


<code>utilities.getArticleFullTitle()</code>
utilities.getArticleFullTitle()


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


<pre>alert(&quot;You're looking at &quot; + utilities.getArticleFullTitle());</pre>
<pre>alert("You're looking at " + utilities.getArticleFullTitle());
<span id="getarticletitle"></span>
</pre>
==== <span class="mw-headline">getArticleTitle</span> ====


<code>utilities.getArticleTitle()</code>
==== getArticleTitle ====


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


<span id="getarticlenamespace"></span>
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])
==== <span class="mw-headline">getArticleNamespace</span> ====


<code>utilities.getArticleNamespace()</code>
==== 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.
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.


<span id="getarticleurl"></span>
==== getArticleURL ====
==== <span class="mw-headline">getArticleURL</span> ====


<code>utilities.getArticleURL()</code>
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 <code>window.location</code>.
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.


==== <span class="mw-headline">localurl</span> ====
==== localurl ====


<code>utilities.localurl(</code>''page'' [<code>, </code>''namespace'' [<code>, </code>''extras'']]<code>)</code>
utilities.localurl(''page'' [, ''namespace'' [, ''extras'']])


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


<pre>utilities.localurl(&quot;Main Page&quot;)
<pre>utilities.localurl("Main Page")
utilities.localurl(&quot;User:Me&quot;) // this works
utilities.localurl("User:Me") // this works
utilities.localurl(&quot;Me&quot;, 2)  // this works too
utilities.localurl("Me", 2)  // this works too
utilities.localurl(&quot;Me&quot;, 2, &quot;action=edit&quot;) // an &quot;edit&quot; link for User:Me
utilities.localurl("Me", 2, "action=edit") // an "edit" link for User:Me
utilities.localurl(utilities.getArticleTitle(), utilities.getArticleNamespace(), &quot;action=edit&quot;) // an &quot;edit&quot; link for the current page</pre>
utilities.localurl(utilities.getArticleTitle(), utilities.getArticleNamespace(), "action=edit") // an "edit" link for the current page
==== <span class="mw-headline">namespaces</span> ====
</pre>


<code>utilities.namespaces[</code>''number''<code>]</code>
==== 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.
An array of the names of each namespace. This is blank for the Main namespace, and the name for all the others.
Line 123: Line 84:
<pre>var ns = utilities.getArticleNamespace();
<pre>var ns = utilities.getArticleNamespace();
if (ns == 0)
if (ns == 0)
   alert(&quot;You're looking at the main namespace!&quot;);
   alert("You're looking at the main namespace!");
else
else
   alert(&quot;You're looking at &quot; + utilities.namespaces[ns] + &quot;!&quot;);</pre>
   alert("You're looking at " + utilities.namespaces[ns] + "!");
==== <span class="mw-headline">namespacedescription</span> ====
</pre>


<code>utilities.namespacedescription[</code>''number''<code>]</code>
==== namespacedescription ====


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


==== <span class="mw-headline">articlenamespace</span> ====
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.


<code>utilities.articlenamespace[</code>''number''<code>]</code>
==== articlenamespace ====


An array of the article namespace for each talk namespace. For example 2 is &quot;User&quot; and 3 is &quot;User talk&quot;, so <code>utilities.articlenamespace[2]</code> and <code>utilities.articlenamespace[3]</code> are both 2.
utilities.articlenamespace[''number'']


==== <span class="mw-headline">talknamespace</span> ====
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.


<code>utilities.talknamespace[</code>''number''<code>]</code>
==== talknamespace ====


An array of the talk namespace for each article namespace. For example 2 is &quot;User&quot; and 3 is &quot;User talk&quot;, so <code>utilities.talknamespace[2]</code> and <code>utilities.talknamespace[3]</code> are both 3. <code>utilities.talknamespace[-1]</code> (the Special namespace) doesn't exist.
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();
<pre>var ns = getArticleNamespace();
var talkpage = utilities.localurl(utilities.getArticleTitle(), utilities.talknamespace[ns]);</pre>
var talkpage = utilities.localurl(utilities.getArticleTitle(), utilities.talknamespace[ns]);
<span id="monobook-specific"></span>
</pre>
=== <span class="mw-headline">Monobook-specific</span> ===
 
=== 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.
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.


<span id="addmonobookquickbarlink"></span>
==== addMonobookQuickbarLink ====
==== <span class="mw-headline">addMonobookQuickbarLink</span> ====


<code>utilities.addMonobookQuickbarLink(</code>''URL''<code>, </code>''title'' [<code>, </code>''where'']<code>)</code>
utilities.addMonobookQuickbarLink(''URL'', ''title'' [, ''where''])


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


* <code>&quot;userpage&quot;</code> if you want the link to appear before your '''userpage''' link.
* "userpage" if you want the link to appear before your '''userpage''' link.
* <code>&quot;mytalk&quot;</code> if you want the link to appear before your '''my talk''' link.
* "mytalk" if you want the link to appear before your '''my talk''' link.
* <code>&quot;preferences&quot;</code> if you want the link to appear before your '''preferences''' link.
* "preferences" if you want the link to appear before your '''preferences''' link.
* <code>&quot;watchlist&quot;</code> if you want the link to appear before your '''my watchlist''' link.
* "watchlist" if you want the link to appear before your '''my watchlist''' link.
* <code>&quot;mycontris&quot;</code> if you want the link to appear before your '''my contributions''' link.
* "mycontris" if you want the link to appear before your '''my contributions''' link.
* <code>&quot;logout&quot;</code> if you want the link to appear before your '''log out''' 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.
* Leave it off entirely if you want the link to appear after your '''log out''' link.


<pre>utilities.addMonobookQuickbarLink(utilities.localurl(&quot;Main Page&quot;), &quot;Back Home&quot;, &quot;userpage&quot;)
<pre>utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage")
utilities.addMonobookQuickbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;Outta Here&quot;)</pre>
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here")
<span id="addmonobooktab"></span>
</pre>
==== <span class="mw-headline">addMonobookTab</span> ====
 
==== 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.


<code>utilities.addMonobookTab(</code>''URL''<code>, </code>''title''<code>, </code>''padding'' [<code>, </code>''at start'']<code>)</code>
<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>


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 <code>true</code> it will be separated from the other links, if you set it to <code>false</code> 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 &quot;put it here&quot;... some pages don't have an &quot;edit&quot; link if they're protected, Special pages only have the &quot;special&quot; tab...). If you leave ''at start'' off, it will put it on the end.
==== addMonobookNavboxLink ====


<pre>utilities.addMonobookQuickbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;A&quot;, true)  //  \
utilities.addMonobookNavboxLink(''URL'', ''title'' [, ''which one'' [, ''at start'']])
utilities.addMonobookQuickbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;B&quot;, false) //  } these links will all be grouped together
utilities.addMonobookQuickbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;C&quot;, false) //  /
utilities.addMonobookQuickbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;Loner&quot;, true) //  this one will start a new group</pre>
<span id="addmonobooknavboxlink"></span>
==== <span class="mw-headline">addMonobookNavboxLink</span> ====


<code>utilities.addMonobookNavboxLink(</code>''URL''<code>, </code>''title'' [<code>, </code>''which one'' [<code>, </code>''at start'']]<code>)</code>
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:


Adds a link to the navigation boxes (the ones to the left). If ''which one'' is left off it will add to the &quot;navigation&quot; box. It can be set to:
* "navigation" to add to '''navigation'''
* "tb" to add to the '''toolbox'''
* "ext" to add to '''external links'''


* <code>&quot;navigation&quot;</code> to add to '''navigation'''
Again, ''at start'' can be true to add it to the top, or false (or leave it off) to add it to the bottom.
* <code>&quot;tb&quot;</code> to add to the '''toolbox'''
* <code>&quot;ext&quot;</code> to add to '''external links'''


Again, ''at start'' can be <code>true</code> to add it to the top, or <code>false</code> (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>


<pre>utilities.addMonobookNavboxLink(utilities.localurl(&quot;Toons&quot;), &quot;Toons&quot;)
==== addMonobookBottomTabs ====
utilities.addMonobookNavboxLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;Some Site&quot;, &quot;ext&quot;)</pre>
<span id="addmonobookbottomtabs"></span>
==== <span class="mw-headline">addMonobookBottomTabs</span> ====


<code>utilities.addMonobookBottomTabs(</code>[''no CSS'']<code>)</code>
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 <code>true</code> for ''no CSS'' – usually you can just leave it off entirely and it will work without extra effort.
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.


<span id="cologne-blue-specific"></span>
=== Cologne Blue-specific ===
=== <span class="mw-headline">Cologne Blue-specific</span> ===


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.
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.


<span id="colognebluenewmessages"></span>
==== cologneBlueNewMessages ====
==== <span class="mw-headline">cologneBlueNewMessages</span> ====


<code>utilities.cologneBlueNewMessages()</code>
utilities.cologneBlueNewMessages()


Returns <code>true</code> if you nave new messages. The Cologne Blue &quot;You have new messages&quot; message isn't as &quot;in your face&quot; as the Monobook and TaviStyle ones are. This allows you to fix that, if you want.
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())
<pre>if (utilities.cologneBlueNewMessages())
   alert (&quot;Dude! Check your messages!&quot;);</pre>
   alert ("Dude! Check your messages!");
<span id="addcolognebluequickbarlink"></span>
</pre>
==== <span class="mw-headline">addCologneBlueQuickbarLink</span> ====
 
==== addCologneBlueQuickbarLink ====
 
utilities.addCologneBlueQuickbarLink(''URL'', ''title'', ''section'' [, ''at start''])


<code>utilities.addCologneBlueQuickbarLink(</code>''URL''<code>, </code>''title''<code>, </code>''section'' [<code>, </code>''at start'']<code>)</code>
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.


Adds a link to the &quot;quickbar&quot; (the links to the left). ''section'' is the title of the section to add the link under. ''at start'' can be set to <code>true</code> to add the link to the top of the section, or <code>false</code> (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>


<pre>utilities.addMonobookNavboxLink(utilities.localurl(&quot;Toons&quot;), &quot;Toons&quot;, &quot;Browse&quot;)
==== addCologneBlueTopbarLink ====
utilities.addMonobookNavboxLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;Some Site&quot;, &quot;External Links&quot;)</pre>
<span id="addcolognebluetopbarlink"></span>
==== <span class="mw-headline">addCologneBlueTopbarLink</span> ====


<code>utilities.addCologneBlueTopbarLink(</code>''URL''<code>, </code>''title'' [<code>, </code>''at start'']<code>)</code>
utilities.addCologneBlueTopbarLink(''URL'', ''title'' [, ''at start''])


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


<span id="addcolognebluesubtopbarlink"></span>
==== addCologneBlueSubtopbarLink ====
==== <span class="mw-headline">addCologneBlueSubtopbarLink</span> ====


<code>utilities.addCologneBlueSubtopbarLink(</code>''URL''<code>, </code>''title'' [<code>, </code>''at start'']<code>)</code>
utilities.addCologneBlueSubtopbarLink(''URL'', ''title'' [, ''at start''])


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


<span id="tavistyle-specific"></span>
=== TaviStyle-specific ===
=== <span class="mw-headline">TaviStyle-specific</span> ===


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.
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.


<span id="addtavistyletopbarlink"></span>
==== addTavistyleTopbarLink ====
==== <span class="mw-headline">addTavistyleTopbarLink</span> ====


<code>utilities.addTavistyleTopbarLink(</code>''URL''<code>, </code>''title''<code>, </code>''row'' [<code>, </code>''at start'']<code>)</code>
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 <code>true</code> to add the link to the start of the row, or <code>false</code> (or left off entirely) to add it to the end.
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.


<span id="addtavistylebottombarlink"></span>
==== addTavistyleBottombarLink ====
==== <span class="mw-headline">addTavistyleBottombarLink</span> ====


<code>utilities.addTavistyleBottombarLink(</code>''URL''<code>, </code>''title''<code>, </code>''row'' [<code>, </code>''at start'']<code>)</code>
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 <code>true</code> to add the link to the start of the row, or <code>false</code> (or left off entirely) to add it to the end.
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.


<span id="examples"></span>
== Examples ==
== <span class="mw-headline">Examples</span> ==


<span id="for-monobook"></span>
=== For Monobook ===
=== <span class="mw-headline">For Monobook</span> ===


Add a couple of new links to the Quickbar:
Add a couple of new links to the Quickbar:


<pre>utilities.addMonobookQuickbarLink(utilities.localurl(&quot;Main Page&quot;), &quot;Back Home&quot;, &quot;userpage&quot;) // add it before the &quot;userpage&quot; link
<pre>utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage") // add it before the "userpage" link
utilities.addMonobookQuickbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;Outta Here&quot;) // add it at the end</pre>
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here") // add it at the end
Add a &quot;Validate this page&quot; tab:
</pre>
 
Add a "Validate this page" tab:
 
<pre>utilities.addMonobookTab("http://validator.w3.org/check?uri=" + escape(utilities.getArticleURL()), "Validate", true)
</pre>


<pre>utilities.addMonobookTab(&quot;[http://validator.w3.org/check?uri= http://validator.w3.org/check?uri=]&quot; + escape(utilities.getArticleURL()), &quot;Validate&quot;, true)</pre>
Add another row of tabs to the bottom of the screen:
Add another row of tabs to the bottom of the screen:


<pre>utilities.addMonobookBottomTabs()</pre>
<pre>utilities.addMonobookBottomTabs()
<span id="for-cologne-blue"></span>
</pre>
=== <span class="mw-headline">For Cologne Blue</span> ===


Add a &quot;You've got new messages&quot; banner:
=== For Cologne Blue ===
 
Add a "You've got new messages" banner:


<pre>if (utilities.cologneBlueNewMessages())
<pre>if (utilities.cologneBlueNewMessages())
{
{
   var div = document.createElement(&quot;div&quot;)
   var div = document.createElement("div")
   div.setAttribute(&quot;style&quot;, &quot;background: #FFCE7B; border: 1px solid #FFA500; color: black; font-weight: bold; margin: 2em 0 1em; padding: 0.5em 1em&quot;);
   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 &lt;a href=&quot;' + utilities.localurl(&quot;Username&quot;, 3) + '&quot;&gt;new messages&lt;/a&gt;.';     
   div.innerHTML = 'You have <a href="' + utilities.localurl("Username", 3) + '">new messages</a>.';     
   var article = document.getElementById('article');
   var article = document.getElementById('article');
   article.insertBefore(div, article.firstChild);
   article.insertBefore(div, article.firstChild);
}</pre>
}
</pre>
 
Add a couple of new links to the Quickbar:
Add a couple of new links to the Quickbar:


<pre>utilities.addMonobookQuickbarLink(utilities.localurl(&quot;Toons&quot;), &quot;Toons&quot;, &quot;Browse&quot;) // add a Toons link to the &quot;Browse&quot; section
<pre>utilities.addMonobookQuickbarLink(utilities.localurl("Toons"), "Toons", "Browse") // add a Toons link to the "Browse" section
utilities.addMonobookQuickbarLink(&quot;[http://www.homestarrunner.com/ http://www.homestarrunner.com/]&quot;, &quot;Official Site&quot;, &quot;External links&quot;) // add a new &quot;External links&quot; section with this in it.</pre>
utilities.addMonobookQuickbarLink("http://www.homestarrunner.com/", "Official Site", "External links") // add a new "External links" section with this in it.
Add &quot;article&quot; and &quot;talk page&quot; links to the top bar, like Monobook's tabs
</pre>
 
Add "article" and "talk page" links to the top bar, like Monobook's tabs


<pre>var namespace = utilities.getArticleNamespace();
<pre>var namespace = utilities.getArticleNamespace();
Line 299: Line 268:
   var talklink = utilities.addCologneBlueSubtopbarLink(utilities.localurl(title, talkNS), utilities.namespacedescription[talkNS], true);
   var talklink = utilities.addCologneBlueSubtopbarLink(utilities.localurl(title, talkNS), utilities.namespacedescription[talkNS], true);
   if (utilities.talknamespace[namespace] == namespace)
   if (utilities.talknamespace[namespace] == namespace)
     talklink.style.fontWeight = &quot;bold&quot;;
     talklink.style.fontWeight = "bold";
}
}
var pageNS = utilities.articlenamespace[namespace]
var pageNS = utilities.articlenamespace[namespace]
var pagelink = utilities.addCologneBlueSubtopbarLink(utilities.localurl(title, pageNS), utilities.namespacedescription[pageNS], true);
var pagelink = utilities.addCologneBlueSubtopbarLink(utilities.localurl(title, pageNS), utilities.namespacedescription[pageNS], true);
   if (utilities.articlenamespace[namespace] == namespace)
   if (utilities.articlenamespace[namespace] == namespace)
     pagelink.style.fontWeight = &quot;bold&quot;;</pre>
     pagelink.style.fontWeight = "bold";
<span id="for-tavistyle"></span>
</pre>
=== <span class="mw-headline">For TaviStyle</span> ===
 
=== For TaviStyle ===


Add some new links to the top bar:
Add some new links to the top bar:


<pre>utilities.addTavistyleTopbarLink(&quot;[http://fanstuff.hrwiki.org/ http://fanstuff.hrwiki.org/]&quot;, &quot;Fanstuff&quot;, 1) // add the fanstuff to the top row
<pre>utilities.addTavistyleTopbarLink("http://fanstuff.hrwiki.org/", "Fanstuff", 1) // add the fanstuff to the top row
utilities.addTavistyleTopbarLink(utilities.localurl(&quot;Toons&quot;), &quot;Toons&quot;, 3) // add a third row, with an link to Toons
utilities.addTavistyleTopbarLink(utilities.localurl("Toons"), "Toons", 3) // add a third row, with an link to Toons
utilities.addTavistyleTopbarLink(&quot;[http://www.somesite.com/ http://www.somesite.com/]&quot;, &quot;Outta here&quot;, 3) // add an external link to the third row</pre>
utilities.addTavistyleTopbarLink("http://www.somesite.com/", "Outta here", 3) // add an external link to the third row
<div id="catlinks" class="catlinks">
</pre>
 
[[Category:Help]]
<div id="mw-normal-catlinks">
 
[/wiki/Special:Categories Category]: <span dir="ltr">[[Category:Help|Help]]</span>
 
</div>
 
</div>



Latest revision as of 14:24, 14 July 2026

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:utilities}} at the top of this page. When you save, this will become

// 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>');

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:

{{subst:utilities}}

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

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".

alert("You're looking at " + utilities.getArticleFullTitle());

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 namespace of the current page. Note that this returns a 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:

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

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.

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

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 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.

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

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.

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.
utilities.addMonobookQuickbarLink(utilities.localurl("Main Page"), "Back Home", "userpage")
utilities.addMonobookQuickbarLink("http://www.somesite.com/", "Outta Here")

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.

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

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.

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

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.

if (utilities.cologneBlueNewMessages())
  alert ("Dude! Check your messages!");

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.

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

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

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

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.

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.

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:

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

Add a "Validate this page" tab:

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

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

utilities.addMonobookBottomTabs()

For Cologne Blue

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

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);
}

Add a couple of new links to the Quickbar:

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.

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

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";

For TaviStyle

Add some new links to the top bar:

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