MediaWiki talk:Common.js: Difference between revisions
(New page: /* Popup links in MediaWiki to new window From http://jimbojw.com/wiki/index.php?title=Popup_links_in_MediaWiki_to_new_window Jump to: navigation, search One recurring question I've seen w...) |
No edit summary |
||
Line 1: | Line 1: | ||
/* Popup links in MediaWiki to new window | /* Popup links in MediaWiki to new window */ | ||
From http://jimbojw.com/wiki/index.php?title=Popup_links_in_MediaWiki_to_new_window | From http://jimbojw.com/wiki/index.php?title=Popup_links_in_MediaWiki_to_new_window | ||
One recurring question I've seen with respect to MediaWiki is "How do I create popup links?" That is, have links which when clicked launch a new window or browser tab. | One recurring question I've seen with respect to MediaWiki is "How do I create popup links?" That is, have links which when clicked launch a new window or browser tab. | ||
Line 7: | Line 8: | ||
Installation | Installation | ||
To add this functionality to your wiki, | To add this functionality to your wiki, | ||
Log in as a user in the sysop group | Log in as a user in the sysop group | ||
Navigate to the MediaWiki:Common.js page. | Navigate to the MediaWiki:Common.js page. | ||
Note: To get there, just type MediaWiki:Common.js into the search box an hit "Go". If the page doesn't exist, create it by clicking the "create this page" link towards the top of the page. | Note: To get there, just type MediaWiki:Common.js into the search box an hit "Go". If the page doesn't exist, create it by clicking the "create this page" link towards the top of the page. | ||
Edit this page, and add the following: | Edit this page, and add the following: | ||
<pre> | |||
addOnloadHook( function() { | addOnloadHook( function() { | ||
var pops = function( elems ) { | var pops = function( elems ) { | ||
Line 27: | Line 32: | ||
} ); | } ); | ||
</pre> | |||
Note that after doing this, you'll need to clear your browser's cache to start seeing the effects. | Note that after doing this, you'll need to clear your browser's cache to start seeing the effects. | ||
Usage | Usage | ||
To make a regular link on your wiki into a popup link, wrap it in a tag with class="pops". Acceptable tags are SPAN, DIV, TABLE, TD and TH. | To make a regular link on your wiki into a popup link, wrap it in a tag with class="pops". Acceptable tags are SPAN, DIV, TABLE, TD and TH. | ||
Line 36: | Line 42: | ||
For example: | For example: | ||
<span class="pops">http://jimbojw.com/</span>Or here's one using a table: | <span class="pops">http://jimbojw.com/</span> | ||
Or here's one using a table: | |||
{| border="1" class="pops" | {| border="1" class="pops" | ||
Line 44: | Line 52: | ||
| [http://jimbojw.com/wiki/index.php?title=Blog Jim's Blog] || A fantastic technical blog | | [http://jimbojw.com/wiki/index.php?title=Blog Jim's Blog] || A fantastic technical blog | ||
|} | |} | ||
Styling | Styling | ||
You may want to create a visual cue for your users that a given link will launch a new window. To do so, | You may want to create a visual cue for your users that a given link will launch a new window. To do so, | ||
Navigate to the MediaWiki:Common.css page. | Navigate to the MediaWiki:Common.css page. | ||
Edit this article and add something like the following: | Edit this article and add something like the following: | ||
.pops a { | |||
.pops a { | |||
background-color: #ffc !important; | background-color: #ffc !important; | ||
} | } | ||
The above will make all popup links have a light-yellow background color. Of course, you can use whatever CSS style you like. | The above will make all popup links have a light-yellow background color. Of course, you can use whatever CSS style you like. | ||
Hope this helps! As always I'll be happy to answer any questions. | Hope this helps! As always I'll be happy to answer any questions. |
Revision as of 01:09, 21 November 2007
/* Popup links in MediaWiki to new window */
From http://jimbojw.com/wiki/index.php?title=Popup_links_in_MediaWiki_to_new_window
One recurring question I've seen with respect to MediaWiki is "How do I create popup links?" That is, have links which when clicked launch a new window or browser tab.
Although there are some very good reasons NOT to allow this on a site, the following is one solution which requires only sysop permissions on a wiki. No extensions or other filesystem access is required.
Installation
To add this functionality to your wiki,
Log in as a user in the sysop group
Navigate to the MediaWiki:Common.js page.
Note: To get there, just type MediaWiki:Common.js into the search box an hit "Go". If the page doesn't exist, create it by clicking the "create this page" link towards the top of the page.
Edit this page, and add the following:
addOnloadHook( function() { var pops = function( elems ) { for (var i=0; i<elems.length; i++) { if ( !(' '+elems[i].className+' ').match( / pops / ) ) continue; var anchs = elems[i].getElementsByTagName('a'); for (var j=0; j<anchs.length; j++) anchs[j].target = '_blank'; } }; var bc = document.getElementById('bodyContent'); var tags = ['span', 'div', 'table', 'td', 'th']; for (var i=0; i<tags.length; i++) pops( bc.getElementsByTagName( tags[i] ) ); } );
Note that after doing this, you'll need to clear your browser's cache to start seeing the effects.
Usage
To make a regular link on your wiki into a popup link, wrap it in a tag with class="pops". Acceptable tags are SPAN, DIV, TABLE, TD and TH.
Note: If you need other tags too, just add them to the line from above that starts with "var tags = ". For example:
Or here's one using a table:
Link | Description |
---|---|
Jim's Blog | A fantastic technical blog |
Styling
You may want to create a visual cue for your users that a given link will launch a new window. To do so,
Navigate to the MediaWiki:Common.css page.
Edit this article and add something like the following:
.pops a { background-color: #ffc !important; }
The above will make all popup links have a light-yellow background color. Of course, you can use whatever CSS style you like.
Hope this helps! As always I'll be happy to answer any questions.