MediaWiki talk:Common.js

Manuals
CollapsibleTables

Request: Column hider fix for IE

function hideColFix() {
	var browserName=navigator.appName; 
	var browserVer =parseInt(navigator.appVersion);

	if (browserName=="Microsoft Internet Explorer"){
		fixTable("hidecol1",0);			
		fixTable("hidecol2",1);
		fixTable("hidecol3",2);
		fixTable("hidecol4",3);
		fixTable("hidecol5",4);
		fixTable("hidecol6",5);
		fixTable("hidecol7",6);
		fixTable("hidecol8",7);
		fixTable("hidecol9",8);
		fixTable("hidecol10",9);
	}
}
function fixTable(className, idx){
	var theTables = getElementsByClassName(document, "table", className);
	for (var i=0; i < theTables.length; i++){
		var curTable = theTables[i];
		var theRows = curTable.rows;
		if (theRows[0].cells.length < idx) continue; // not enough columns, skip

		curTable.className = curTable.className.replace(className, '');
		for (var j=0; j < theRows.length; j++){
			theRows[j].cells[idx].style.display='none';
		}
	}
}
addOnloadHook(hideColFix);

A function to fix the CSS problems due to:

• IE6 not implementing adjacent sibling selector
• IE7 not implementing display:table-cell; from CSS 2

—The preceding unsigned comment was added by PanSola (talk • contribs) 10:44, 17 April 2007 (UTC).

CollapsibleTables

As requested here by BigBlue, I created a javascript method to collapse tables.
It allows tables to be divided into multiple sections which can be hidden and shown individually. For this a button is added into a header cell of each section (similary to Wikipedia's method). It's optimized for being fast so it should be no problem for visitors.
As it's not completely finished yet, I would like to collect comments and maybe even function-requests for this. I also would like to know where I should store the javascript, as I would like to have it in a separate file. But I think the MediaWiki namespace would be perfect for it (as it's protected by default). poke | talk 17:03, 15 December 2007 (UTC)

Is it needed, and what's the big difference from the other code we discussed earlier on collapsible stuff? I guess this is cleaner and faster... I'm just thinking it's a really nice feature, but there may be downsides. - anja 23:52, 15 December 2007 (UTC)

First of all the script I did supports multiple headers whereas the wikipedia code only uses the first table row. Also the wikipedia code does not allow to individually hide a table by default which would be rather unuseful for Template:Historical content nav (as it's very big).

I ran a few tests after I reduced my script to the functions which are supported by the wikipedia script. Here are the results:

Setup on a page with 500 tables - all collapsible
 poke's code (full)    ~  580ms
 poke's code (reduced) ~  415ms
 Wikipedia             ~  490ms

Toggling one table (18 rows) 100 times
 poke's code (full)    ~   60ms
 poke's code (reduced) ~   57ms
 Wikipedia             ~   97ms

Toggling one table (500 rows) 100 times
 poke's code (full)    ~  830ms
 poke's code (reduced) ~ 1640ms (due to some tweaks I had to renounce)
 Wikipedia             ~ 2760ms

So if we compare the times, my script is (with identical functions) faster. poke | talk 01:41, 16 December 2007 (UTC)

Will this affect the wiki coding that is needed to make the tables? Or is it just automatically collapsible for any table someone makes? — ク Eloc 貢 06:07, 16 December 2007 (UTC)

You simply add class="collapsible" or class="expandable" to the table declaration and it will be collapsible. Similar to the sortable tables. poke | talk 13:41, 16 December 2007 (UTC)

Alright, sounds good to me. — ク Eloc 貢 16:44, 16 December 2007 (UTC)

Ok, that sounds real cool. Would it be ok for PvXWiki to use this? I'd have to talk to GCard first I assume, but I'm sure we would use it, such as on the main page. Good work! -- frvwfr2 (talk · contributions) 17:40, 16 December 2007 (UTC)

When will this gonna be work or is this already implemented? BigBluetalk 09:25, 17 December 2007 (UTC)

If no one opposes, I can implement it soon :) poke | talk 15:19, 17 December 2007 (UTC)

Sounds good to me, would be great on those larger tables; like the Historical content nav; as you stated above. --Kakarot 15:26, 17 December 2007 (UTC)

Ok, after a small bug in IE, I finally implemented and it works. For examples see User:Poke/sandbox/CollapsibleTables. poke | talk 20:33, 18 December 2007 (UTC)

I'd like to suggest changing the line if ( wgIsArticle ) to if ( wgIsArticle || document.location.search.match(/action=submit/i) ) to allow for collapsible tables to work on preview-pages too. — Galil 17:41, 5 February 2008 (UTC)

After some difficulties: done :P poke | talk 19:15, 5 February 2008 (UTC)

Request: PNG Transparency fix for IE6

Code

/** * Correctly handle PNG transparency in Internet Explorer 6. * http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. * * Adapted for Wikipedia by Remember_the_dot and Edokter. * * http://homepage.ntlworld.com/bobosola/pnginfo.htm states "This page contains more information for * the curious or those who wish to amend the script for special needs", which I take as permission to * modify or adapt this script freely. I release my changes into the public domain. */ function PngFix() { try { if (!document.body.filters) { window.PngFixDisabled = true } } catch (e) { window.PngFixDisabled = true } if (!window.PngFixDisabled) { var documentImages = document.images var documentCreateElement = document.createElement var funcEncodeURI = encodeURI for (var i = 0; i < documentImages.length;) { var img = documentImages[i] var imgSrc = img.src if (imgSrc.substr(imgSrc.length - 3).toLowerCase() == "png" && !img.onclick) { if (img.useMap) { img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + encodeURI(imgSrc) + "')" img.src = "http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" i++ } else { var outerSpan = documentCreateElement("span") var innerSpan = documentCreateElement("span") var outerSpanStyle = outerSpan.style var innerSpanStyle = innerSpan.style var imgCurrentStyle = img.currentStyle outerSpan.id = img.id outerSpan.className = img.className outerSpanStyle.backgroundImage = imgCurrentStyle.backgroundImage outerSpanStyle.borderWidth = imgCurrentStyle.borderWidth outerSpanStyle.borderStyle = imgCurrentStyle.borderStyle outerSpanStyle.borderColor = imgCurrentStyle.borderColor outerSpanStyle.display = "inline-block" outerSpanStyle.fontSize = "0" outerSpanStyle.verticalAlign = "middle" if (img.parentElement.href) outerSpanStyle.cursor = "hand" innerSpanStyle.width = "1px" innerSpanStyle.height = "1px" innerSpanStyle.display = "inline-block" innerSpanStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + funcEncodeURI(imgSrc) + "')" outerSpan.appendChild(innerSpan) img.parentNode.replaceChild(outerSpan, img) } } else { i++ } } } } if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substr(22, 1) == "6") { window.attachEvent("onload", PngFix) }

As snatched from wikipedia. If snatching is discouraged, I could rewrite a script that does the same thing. I just find it unecessary to do so. ;) — Galil 16:41, 5 February 2008 (UTC)

To be honest I don't like those fixes for obsolete browsers as IE6 is. Everybody who uses Internet Explorer should update to version 7 which supports PNG transparency. Another thing why I don't think we even need it that we don't really use the transparency (for example as background images - which are unsupported anyways); nearly all PNGs we use do have (white) bKGD chunks and as most images are used on white backgrounds, you would not see any difference. poke | talk 18:19, 5 February 2008 (UTC)

I don't see what harm it does though.. Does it make pages load noticeably slower or something like that? - anja 18:22, 5 February 2008 (UTC)

Well then it comes down to "why fix what ain't broke" --Lemming 18:35, 5 February 2008 (UTC)

I don't like IE6 any more than you do, nor would I encourage anyone to use it (or IE7 for that matter). But seeing as IE6 still has a large user-base (1 and 2), and seeing as we can make it look better, why not do it? — Galil 19:43, 5 February 2008 (UTC)

Agree with the above. People on the 1st world has the tendency to forget that their standards for software/hardware are not the same as the rest of the world. To put it simply, Guild Wars is supported by Win98, and the last version of IE available for Win98 is IE6. Since the wiki decided to use png for transparency instead of gif (and the reason is "just for the looks" as stated in other place), you have to be responsible for it. You already did it by using the whatchamacallit to switch from grey boxes to white boxes, so i would guess that, if a better option is available, you should consider using it. (ps. cache isues with Firefox are reason enough to make some people use IE instead XD) --Fighterdoken 19:52, 5 February 2008 (UTC)

It's possible to include code only in certain browsers. MediaWiki does this already, if you view the source code you'll see the line <!--[if lt IE 7]><script type="text/javascript" src="/skins/common/IEFixes.js?42b"></script>. Rather than add some javascript to Common.js I recommend we make a tech request to install it into IEFixes.js. LordBiro 20:05, 5 February 2008 (UTC)

That I knew of, been using conditional comments a lot, but I thought it would be easier not to mess with the skin files. — Galil 20:08, 5 February 2008 (UTC)

The point is that we don't need and use the transparency of PNGs here (except maybe from the main page..). There is no reason to have more code be loaded for those users who are able to display those PNGs correctly. And there is no reason to have a script going through all images on a page to enable transparency instead of a white background - on a white site. (Also note that there will be no user who uses Win98 and will complain about missing transparency..) poke | talk 20:11, 5 February 2008 (UTC)

Adding the javascript to IEFixes (and using conditional comments) would mean it would not be loaded for anyone unless they had IE6 or lower. No additional code would be downloaded for those of us with up to date browsers. LordBiro 20:26, 5 February 2008 (UTC)

(Edit conflict) Yay, i am no user!. Sarcasm aside, there are still several images that are used all over the wiki, and that still use the grey box. What do you prefer, changing the size to 1 less pixel, editing each one of those images, or just uploading a script that will just run for the affected users anyways?--Fighterdoken 20:28, 5 February 2008 (UTC)

The fact we don't have many pngs on top of any background other than white is rather irrelevant. IMO we should be able to have that, not have to avoid it. Also, you never know about future uses, user pages, guild pages, etc. Avoiding to fix something easily fixable based only on the assumption that no user needs it is wrong IMO. — Galil 20:33, 5 February 2008 (UTC)

I'll agree with LordBiro though that IEFixes.js would be more suitable than this file, assuming we can get a techie to add it. — Galil 20:35, 5 February 2008 (UTC)

Biro: I wrote that before your comment but lost connection and readded it at the end after the edit conflict :P

And I don't have a problem with adding it to Common.js but it should be improved so that there are no javascript errors (I looked over the code and saw some issues which cause errors if I remember correct) and so that there is no drawback for users with compilant browsers. And Fighterdoken, personally I would prefer changing the images then. poke | talk 20:38, 5 February 2008 (UTC)

Btw. You should note that this script doesn't change issues with background images like the profession icons the skill infoboxes use. poke | talk 20:40, 5 February 2008 (UTC)

It's already in use at wikipedia so you'd think any javascript errors would've been caught by now. Also, if the if-statement doesn't succeed (which is supported all the way down to at least IE4 and NS6) nothing will execute, as I'm sure you noticed. In other words, the function would only execute if the browser itself reports as being IE6. If you use User agent spoofing, you'll pretty much have to suit yourself. — Galil 20:48, 5 February 2008 (UTC)

CollapsibleTables needs fix

MediaWiki:CollapsibleTables.js uses document.getElementById( 'bodyContent' ) which only the chick, monobook, and simple skins have that ID. Cologneblue, nostalgia, and standard have the "article" ID instead. You could use the "content" ID which all the skins use or just check if "bodyContent" exists and if not use "article". -Smurf 08:40, 2 March 2008 (UTC)

Thanks, Smurf :) Fixed :) poke | talk 14:43, 2 March 2008 (UTC)

Now modern needs support. It uses both "mw_content" and "mw_contentholder". "mw_contentholder" is the only child of "mw_content". -Smurf 15:06, 9 June 2008 (UTC)

fixed. poke | talk 17:20, 9 June 2008 (UTC)