Editing Help:User style (section)

== JavaScript ==
JavaScript has many possibilities, for example adding text, including links, at the desired positions. This added content may depend on content on the HTML source page produced by the server; for example it may depend on HTML elements with an ID, by applying getElementById. The position of insertion may be specified by insertBefore.

As an example, to add a page link at the left of your preferences, add the following to [[Special:Mypage/common.js]], replacing PageTitle with the title of the wiki page :
<syntaxhighlight lang="javascript">
mw.util.addPortletLink(	'p-personal', '/wiki/PageTitle', 'PageTitle', null, null, null, '#pt-preferences');
</syntaxhighlight>

=== Moving categories to top ===
The following code moves the category box to the top of the article. Of course, you might want to apply some CSS to make it look prettier:
<syntaxhighlight lang="javascript">
function catsattop() {
  var cats = document.getElementById('catlinks');
  var bc = document.getElementById('bodyContent');
  bc.insertBefore(cats, bc.childNodes[0]);
}
</syntaxhighlight>
An alternative that, when coupled with an appropriate stylesheet, will put the text up at about the same line as the title:

<syntaxhighlight lang="javascript">
function categoryToTop() {
  var thebody = document.getElementById('contentTop');
  var categories = document.getElementById('catlinks');

  if (categories != null) {
    categories.parentNode.removeChild (categories);
    thebody.parentNode.insertBefore(categories, thebody);
  }
}
</syntaxhighlight>

Some CSS to go with that...

<syntaxhighlight lang="css">
/* move the catlinks box */
#catlinks {
  right:1em;
  top:-0.25em;
  max-width: 50%; /* this limits the box size, but doesn't set strictly */
  float: right;
  margin: 0.5em;
  padding: 0.2em;
}

/* format the catlinks itself */
p.catlinks {
  font-size:67%;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}
</syntaxhighlight>

Unfortunately, if the category box is large (such as on entries on U.S. presidents and other major figures), it can push an infobox off to the side. To correct this, the "clear: right" attribute can be added to an infobox.

=== Wikitext-controlled CSS ===
CSS can be controlled through JS by wikitext. For example, an HTML element "span" without content can, through its class and id, provide parameters for JS specifying CSS for any parts of the page. For example, if a page contains a "span" element with class FA and id ''lc'', [[MediaWiki:Monobook.js]] specifies the style and title of elements "li" of class interwiki-''lc'', thus controlling the style and title of the interlanguage link of language code ''lc'' in the margin, provided that the skin specifies this class interwiki-''lc'' (E.g., Cologne Blue specifies class='external' for each language, so it does not work for that skin.)

=== External links on JS ===
* http://www.quirksmode.org/ – see the JavaScript and DOM section
* http://www.alistapart.com/
* http://www.quirksmode.org/dom/domform.html – form cloning (might be possible to upload a few images at once using this, also a good starting point for the structure cloning)