The printable versions of pages are messed up for anonymous users. — Ruud 19:25, 30 September 2007 (UTC)
Is anyone else having an problem with importStylesheet in Internet Explorer? I am using Internet Explorer 6, and it's giving me a JS error. The error information I get from IE is the following:
To recreate the error, open IE and edit your skin css file javascript file (fixed by
Alex Smotrov). At the bottom of the file put the line importStylesheet( "User:Shardsofmetal/monobook.css" );
, then preview the page. When it loads the next page, see if there is an exclaimation icon on the left side of the status bar. If so, double-click it. I had 2 errors, but I know the one related to this is the one I posted. My guess is also that the line number might differ depending on what other javascript has been loaded. I normally use Firefox, I actually only used IE to test this function at my local wiki, to load a custom skin for IE users (since the normal custom skin doesn't look good in IE). However, if I can't get the css file to load, then it was a waste of my time. I don't know javascript, only the basics I've figured out from looking at code, so I can't figure out what the problem is, but I assume that someone who knows javascript can fix the problem. Also, shouldn't the line + '&action=raw&ctype=text/css";'
contain a semicolon at the end, to end the declaration of the variable? Anyway, I hope someone can take a look at this.
Shards
of
metal
03:04, 3 October 2007 (UTC)
importStylesheet(" http://en.wikipedia.org/?title=User:Shardsofmetal/monobook.css&action=raw&ctype=text/css");
function importStylesheet( page ) {
var sheet = '@import "'
+ wgScriptPath
+ '/index.php?title='
+ encodeURIComponent( page.replace( / /g, '_' ) )
+ '&action=raw&ctype=text/css";'
Yes, it's a known problem, importStylesheet doesn't work in IE. When I looked into it some time ago, looks like in IE you're not supposed to add a text node as a child of a style
element but instead use styleElem.styleSheet.cssText
. But even after that it seems IE (at least IE6) simply doesn't like @import
in the added text. On the other hand, something like this below seems to work in IE6/Firefox 1.5/Opera 9 ∴
Alex Smotrov
19:20, 3 October 2007 (UTC)
function importStylesheet(page) {
var styleEl = document.createElement('link')
styleEl.type = 'text/css'
styleEl.rel = 'stylesheet'
styleEl.href = wgScript + '?title='
+ encodeURIComponent(page.replace(/ /g, '_')) + '&action=raw&ctype=text/css'
document.getElementsByTagName('head')[0].appendChild(styleEl)
}
I have updated the PngFix script. While neither Remember the dot and I could make the "fast" code to work, (see here we did come up with a way to increase the speed by not turning images without border to spans. Further improvements are:
I'll post a message on the Village Pump to be on the lookup for bugs. Please report any problems there. — Edokter • Talk • 09:03, 5 October 2007 (UTC)
{{
editprotected}}
The current IPA hack doesn't work in IE 7 (see Template talk:IPA#Solution for IE6/7 problem for details). The following code will load the required CSS rule form script and thus avoid ugly CSS hacks:
if(navigator.userAgent.indexOf("MSIE") != -1 && document.createStyleSheet) {
document.createStyleSheet().addRule('.IPA', 'font-family: "Doulos SIL", "Charis SIL", Gentium, "DejaVu Sans", Code2000, "TITUS Cyberbit Basic", "Arial Unicode MS", "Lucida Sans Unicode", "Chrysanthi Unicode";');
}
This also makes the .IPA style in Common.css unneccessary, after it has worked it's way through the cache. (Excpet for IE users with and javascript turned off, but they will have so many troubles they won't even notice the IPA scripts not working :-) -- Tgr 21:24, 4 October 2007 (UTC)
Latest addition. Come on ...
∴ Alex Smotrov 21:18, 12 October 2007 (UTC)
It seems the new code of createNavigationBarToggleButton()
encourage users to use <div class=NavFrame style=display:none>
. I don't think it's a good idea, what about users with JavaScript disabled? If something can be made visible only with JavaScript then it should be hidden only with JavaScript. In other words, the system should work more like collapsible tables: <div class="NavFrame autocollapse">
or <div class="NavFrame collapsed">
. Any support for this? ∴
Alex Smotrov
14:27, 12 October 2007 (UTC)
The ta[]
definitions at the top of the page need to be updated. Introductory explanations: ta[] object is used by function akeytt()
in
wikibits.js to assign missing access keys and tooltips to Mediawiki interface. Due to the way the function is written, it cannot properly change the existing tooltip if you don't specify accesskey (in IE of Firefox place your mouse over «Help» link on the left, then over its bullet). To research which ta[] are not needed, you could use: browser with JavaScript temporarily disabled, HTML page source,
Special:Allmessages,
Mediawiki:Sidebar. My proposal:
ta["t-print"]
and ta["t-permalink"]
because
Mediawiki:tooltip-t-print
Mediawiki:tooltip-t-permalink say the same thingta["n-help"] ta["n-sitesupport"] ta["ca-nstab-project"]
:
Mediawiki:tooltip-n-help,
Mediawiki:tooltip-n-sitesupport,
Mediawiki:tooltip-ca-nstab-project and
Mediawiki:accesskey-ca-nstab-project simply need to be changedta["n-mainpage"]
: it simply doesn't change anything because of the current
Mediawiki:Sidebarta["n-contact"] ta["n-Contents"] ta["n-Featured-content"] ta["n-Main-page"]
since they are non-standard (no Mediawiki tooltips)ta["n-About-Wikipedia"]
and ta["t-log"] («Logs»)
, these links on the left currently have no tooltipsta["t-cite"]
is used, maybe related to
Mediawiki:cite_article_link?ta["ca-hiderevision"] = new Array("h","Hide this revision")
because 26 users with
oversight permission can probably live without it∴ Alex Smotrov 14:27, 12 October 2007 (UTC)
ta[]
can be finally removed ∴
Alex Smotrov
05:03, 13 October 2007 (UTC)
Maybe create MediaWiki:IEFixes.js, so we only have to check for IE once? — Ruud 12:18, 15 October 2007 (UTC)
I just found out that Azatoth's edit to the sysop.js import script broke the entire common.js with the error: "Object does not support this property or method". I have reverted. If you're going to optimize code, Please test in your monobook.js first! Thank you. — Edokter • Talk • 18:03, 14 October 2007 (UTC)
(deindent) I don't quite understand the last edit though... 'in' works on any object or array, and wgUsergroups is a valid array. Personally, I would do it like this:
if ( wgUserGroups && !window.disableSysopJS ) { for ( var g in wgUserGroups ) { if ( wgUserGroups[g] == "sysop" ) { importScript( "MediaWiki:Sysop.js" ) break } } }
...making the loop stop once "sysop" is found. — Edokter • Talk • 19:06, 15 October 2007 (UTC)
Let me say it again: there is no need for the loop at all, since 'sysop' is always wgUserGroups[0] ∴ Alex Smotrov 19:18, 15 October 2007 (UTC)
How about adapting the import script to automatically import the usergroup's specific js file?
/** Usergroup Javascript ******************************************************* * * Description: Allows for usergroup-specific Javascript (ie. MediaWiki:sysop.js). * Created by: User:^demon */ if ( wgUserGroups && !window.disableUsergroupJS ) { for ( var g in wgUserGroups ) { importScript( "MediaWiki:" + wgUserGroups[g] + ".js" ) } }
Someone pointed out that the if (!window.disableSysopJS)
is useless here, as the users' monobook is loaded after common.js, so sysop.js is imported anyway. The check should preferably be moved to sysop.js itself. Or more ideally, each function is sysop.js should have it's own check; that way admins can disable what they don't like. —
Edokter •
Talk •
15:21, 17 October 2007 (UTC)
We've disabled the IE 6 PNG workaround for the moment after spending a couple hours looking into a squid bug which turned upload.wikimedia.org into mud for a while this afternoon.
We're not 100% sure yet what's up with it, but for now I'd recommend at least keeping that .GIF out until we know it's not going to break again under maximum load. -- brion 19:29, 9 October 2007 (UTC)
{{
editprotected}}
Putting in a PNG hack saves us a whole bunch of time and trouble trying to maintain at least 2 copies of each alpha-transparent image. What? What point is there in maintaining two version of an image when only one can be linked/displayed? I'm sorry, but you completely lost me here.
I admit, I am an IE6 user, and as such, I experience the effects of this script first hand, including the speed impact. Of course the slowdown on 'up to date' is "virtually nonexistant"; they don't touch the script. And I don't blame you anything; It was brion who disabled the script; I partially re-enabled it, forgetting to exclude the imagmaps. When I realized my mistake, I started to weigh the options: I never liked the old script; the slowdown on certain pages was unacceptable to me, and there was no way to turn the script off, safe turning off javascript alltogether. That's why I was so desperate to fix it. When this final version was made live, I finally felt we had a solution. Now that that code apparently caused a squid to fall over, we are indeed back to square one, and I'm kind of relieved too, because while looks are one thing, usability in terms of speed has higher priority in my mind. And since IE6 is found on mostly older systems (below 1 HGz), I feel the speed issue potentially impacts users more then I'm willing to accept.
In any event, until the squid problem actually solved, I no longer see this script fit for use in Common.js. Instead, I see it much better suited for users to put it in their own monobook.js. For one, it gives the users a choice, and would have way less impact on the squid servers; I expect not that many users will actually install the script.
And please do not imply that I'm on some sort of power trip here. I'm a user just like you, but I have added responsabilities to other users as well. Having first hand experience with the script in all permutation does give me insight as to what impact it has on other users. That is what I act on! Any ohter admin is free to take me to task if they feel I stepped out of bound, and will abide by whatever consensus will come out any discussion following my actions. — Edokter • Talk • 01:21, 11 October 2007 (UTC)
function PngFix() { if (document.body.filters && !window.PngFixDisabled) { var documentImages = document.images for (var i = 0; i < documentImages.length;) { var img = documentImages[i] var imgSrc = img.src if (imgSrc.substr(imgSrc.length - 3).toLowerCase() == "png" && !img.useMap && !img.onclick) { var outerSpan = document.createElement("span") var innerSpan = document.createElement("span") var outerSpanStyle = outerSpan.style var innerSpanStyle = innerSpan.style outerSpan.id = img.id outerSpan.className = img.className outerSpan.title = img.title outerSpanStyle.cssText = img.style.cssText outerSpanStyle.display = "inline-block" outerSpanStyle.fontSize = "0" outerSpanStyle.verticalAlign = "middle" if (img.parentElement.href) outerSpanStyle.cursor = "hand" innerSpanStyle.width = img.width + "px" innerSpanStyle.height = img.height + "px" innerSpanStyle.display = "inline-block" innerSpanStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + encodeURI(imgSrc) + "')" outerSpan.appendChild(innerSpan) img.parentNode.replaceChild(outerSpan, img) } else { i++ } } } } if (navigator.appName == "Microsoft Internet Explorer") { var version = navigator.appVersion.substr(22, 3) if (version == "6.0" || version == "5.5") window.attachEvent("onload", PngFix) }
In this code, a user has only to add "PngFixEnabled = false" to their monobook.js and the code will be disabled. But I really do not see why a user would want to do this rather than just use a different, more advanced browser and avoid the problem entirely. — Remember the dot ( talk) 02:53, 11 October 2007 (UTC)
if (document.body.filters && !window.PngFixDisabled)
∴
Alex Smotrov
14:02, 11 October 2007 (UTC)!window.disableSysopJS
∴
Alex Smotrov
14:49, 11 October 2007 (UTC) if (!document.body.filters || window.PngFixDisabled) return
and then remove indentations a little... ∴
Alex Smotrov
19:17, 11 October 2007 (UTC)Examples of collapsed tables: Wikipedia:Route diagram template (scroll down), User:VanTucky (userboxes, as many users employ them). PS. Why change the trird line? You're just reversing all boolean operators with exactly the same outcome. — Edokter • Talk • 21:27, 11 October 2007 (UTC)
function PngFix() { if (document.body.filters && !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.useMap && !img.onclick) { 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 outerSpan.title = img.title 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") { var version = navigator.appVersion.substr(22, 3) if (version == "6.0" || version == "5.5") { window.attachEvent("onload", PngFix) } }
The problem was more IE quirkiness. IE refuses to say what the image's width and height are when the image is set to display:none
. After reading
[6], I experimented a bit more and decided to force the image width to 1px if it is 0px. IE is so quirky that having width:1px
and height:0px
makes it display the image.
Now, if IE will display the image OK with width:1px
and height:0px
, why not use these static values for all images and gain a bit of speed? Well, I'm trying to avoid altering the DOM beyond what is neccessary. While the filter forces the element to display at the correct size, the element's area is still 0x1 (try setting background-color
and you'll see what I mean). Fancy CSS like background-color could be broken unless the original width and height are preserved.
On the plus side, I noticed that a lookup for document.createElement was being performed twice for every image. By caching this function pointer (see [7] "Cache Function Pointers at all costs"), the speed increased significantly. — Remember the dot ( talk) 06:32, 12 October 2007 (UTC)
for (i in imgCurrentStye) outerSpanStyle[i] = imgCurrensStyle[i]
, but that would defenitely slow the script to a crawl. outerSpanStyle = imgCurrentStyle
(not tested yet) could theoretically work, but that just references the original object, not copy it. However, since the original img object is discarded anyway, we could give it a shot.(deindent) Wow... 6 seconds traversing the DOM on Wikipedia:Route diagram template/Catalog of pictograms (400 PNGs!) with the optimizations! that used to be 30... The PngFixDisabled flag works as well. — Edokter • Talk • 22:14, 12 October 2007 (UTC)
outerSpanStyle.backgroundImage = imgStyle.backgroundImage
for checkered background support... Thoughts? —
Edokter •
Talk •
22:18, 12 October 2007 (UTC)function PngFix() { if (document.body.filters && !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.useMap && !img.onclick) { 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.title = img.title for (var property in imgCurrentStyle) { outerSpanStyle[property] = imgCurrentStyle[property] } 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++ } } } }
Since this new code doesn't add any costly DOM lookups, it will in all likelihood still go very fast. I noticed no slowdown on Commons:Category:Icons for railway descriptions. Of course, when the squid servers are fixed then we should integrate this code back into the 1px transparent image code to increase speed. — Remember the dot ( talk) 23:22, 12 October 2007 (UTC)
A user using IE5.5 has problems seeing images only as a thin vertical line, so setting width and height to 1px probably wasn't the best solution. We could max() the width and height again, but that probably wouldn't solve his problem in collapsible tables. Tested with max(), but that takes a serious performance hit. I recommend to just disable the script for IE5.5. —
Edokter •
Talk •
14:53, 13 October 2007 (UTC)
function PngFix() { if (document.body.filters && !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.useMap && !img.onclick) { 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 outerSpan.title = img.title outerSpanStyle.borderWidth = imgCurrentStyle.borderWidth outerSpanStyle.borderStyle = imgCurrentStyle.borderStyle outerSpanStyle.borderColor = imgCurrentStyle.borderColor outerSpanStyle.backgroundImage = imgCurrentStyle.backgroundImage 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") { var version = navigator.appVersion.substr(22, 3) if (version == "6.0") { window.attachEvent("onload", PngFix) } }
As a side note, I hope you can see why asking users to upgrade will give them a better experience than using endless workarounds. This problem can only be truly resolved by upgrading, so it's best to get users to upgrade. — Remember the dot ( talk) 20:16, 13 October 2007 (UTC)
Wont that code result in an endless loop? as i is only incremented in the else statement? or is there some magic here? → Aza Toth 20:56, 13 October 2007 (UTC)
i++
but then it skipped half the images. So yeah, there must be some perfectly explainable magic; but I don't know what is is... —
Edokter •
Talk •
21:00, 13 October 2007 (UTC)
i
isn't actually incremented. However, when replaceChild replaces the original image with the span, the original image is removed form the DOM, causing the rest of the images to move up one place in the list. —
Edokter •
Talk •
21:10, 13 October 2007 (UTC)As long as we're axing support for IE 5.5, let's simplify the code a bit:
/** * 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() { if (document.body.filters && !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.useMap && !img.onclick) { 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.title = img.title 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") { if (navigator.appVersion.substr(22, 1) == "6") { window.attachEvent("onload", PngFix) } }
The major change here is that the unnecessary variable var version
is no longer made, and only 1 character of the appVersion is compared (against "6"), instead of 3 (against "5.5" or "6.0"). This will probably only save a couple milliseconds, but it also simplifies the code, so I'd say it's still worth it. The documentation at the top is also updated. —
Remember the dot (
talk)
22:23, 13 October 2007 (UTC)
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substr(22, 1) == "6") { window.attachEvent("onload", PngFix) }
Brion has given his OK to use the "1px hack" (as he calls it) for image maps only. That would make the code complete. If the squid should turn into a puddle of mud again, he'll disable it. I'll put the code in. I will use Image:Transparent.gif instead, as that image is now protected on Commons. — Edokter • Talk • 14:49, 18 October 2007 (UTC)
Maybe this has been discussed before, or maybe I'm missing something ... would an base64 encoded version of the 1-px gif included in the JavaScript eliminate the server load issue? -- Iamunknown 06:05, 21 October 2007 (UTC)
I realize the scrolling fundraising banner that was just added is hard-coded, so the admins here can't do much about it. But could someone please consider adding a small link to the side of it that temporarily removes the scrolling part? I don't think people mind the notice so much as the ticker, and we should have a way to opt out of this "feature". – Minh Nguyễn ( talk, contribs) 23:19, 22 October 2007 (UTC)
Could we move the [dismiss] tag to the right of the banner rather than below it.
No need to push the body text down even more than it already is. Dragons flight 02:05, 23 October 2007 (UTC)
After a brief panic related to the hacked dismiss button that was added I thought I should leave a note here: Anyone who puts in site JS code that sets cookies for anons will win a free visit from me and a personal stabbing. That is all. ;) (if cookies are set for a substantial number of anons the site will be hard-down for a fair amount of time). -- Gmaxwell 02:15, 23 October 2007 (UTC)
I moved the collapsing option to built-in instead of the common.js hack, so it'll be available on all sites once fully live. Collapsed version now shows just the slim progress meter, which might be a little nicer to look at, and gives you the option of re-showing it should you... for some reason... want to. :) -- brion —Preceding comment was added at 03:34, 23 October 2007 (UTC)
addOnloadHook(function() { document.getElementById('siteNotice').innerHTML="";});
#siteNotice { display:none; }
to your monobook.css will probably work better :)
AmiDaniel (
talk)
18:56, 23 October 2007 (UTC)
The printable versions of pages are messed up for anonymous users. — Ruud 19:25, 30 September 2007 (UTC)
Is anyone else having an problem with importStylesheet in Internet Explorer? I am using Internet Explorer 6, and it's giving me a JS error. The error information I get from IE is the following:
To recreate the error, open IE and edit your skin css file javascript file (fixed by
Alex Smotrov). At the bottom of the file put the line importStylesheet( "User:Shardsofmetal/monobook.css" );
, then preview the page. When it loads the next page, see if there is an exclaimation icon on the left side of the status bar. If so, double-click it. I had 2 errors, but I know the one related to this is the one I posted. My guess is also that the line number might differ depending on what other javascript has been loaded. I normally use Firefox, I actually only used IE to test this function at my local wiki, to load a custom skin for IE users (since the normal custom skin doesn't look good in IE). However, if I can't get the css file to load, then it was a waste of my time. I don't know javascript, only the basics I've figured out from looking at code, so I can't figure out what the problem is, but I assume that someone who knows javascript can fix the problem. Also, shouldn't the line + '&action=raw&ctype=text/css";'
contain a semicolon at the end, to end the declaration of the variable? Anyway, I hope someone can take a look at this.
Shards
of
metal
03:04, 3 October 2007 (UTC)
importStylesheet(" http://en.wikipedia.org/?title=User:Shardsofmetal/monobook.css&action=raw&ctype=text/css");
function importStylesheet( page ) {
var sheet = '@import "'
+ wgScriptPath
+ '/index.php?title='
+ encodeURIComponent( page.replace( / /g, '_' ) )
+ '&action=raw&ctype=text/css";'
Yes, it's a known problem, importStylesheet doesn't work in IE. When I looked into it some time ago, looks like in IE you're not supposed to add a text node as a child of a style
element but instead use styleElem.styleSheet.cssText
. But even after that it seems IE (at least IE6) simply doesn't like @import
in the added text. On the other hand, something like this below seems to work in IE6/Firefox 1.5/Opera 9 ∴
Alex Smotrov
19:20, 3 October 2007 (UTC)
function importStylesheet(page) {
var styleEl = document.createElement('link')
styleEl.type = 'text/css'
styleEl.rel = 'stylesheet'
styleEl.href = wgScript + '?title='
+ encodeURIComponent(page.replace(/ /g, '_')) + '&action=raw&ctype=text/css'
document.getElementsByTagName('head')[0].appendChild(styleEl)
}
I have updated the PngFix script. While neither Remember the dot and I could make the "fast" code to work, (see here we did come up with a way to increase the speed by not turning images without border to spans. Further improvements are:
I'll post a message on the Village Pump to be on the lookup for bugs. Please report any problems there. — Edokter • Talk • 09:03, 5 October 2007 (UTC)
{{
editprotected}}
The current IPA hack doesn't work in IE 7 (see Template talk:IPA#Solution for IE6/7 problem for details). The following code will load the required CSS rule form script and thus avoid ugly CSS hacks:
if(navigator.userAgent.indexOf("MSIE") != -1 && document.createStyleSheet) {
document.createStyleSheet().addRule('.IPA', 'font-family: "Doulos SIL", "Charis SIL", Gentium, "DejaVu Sans", Code2000, "TITUS Cyberbit Basic", "Arial Unicode MS", "Lucida Sans Unicode", "Chrysanthi Unicode";');
}
This also makes the .IPA style in Common.css unneccessary, after it has worked it's way through the cache. (Excpet for IE users with and javascript turned off, but they will have so many troubles they won't even notice the IPA scripts not working :-) -- Tgr 21:24, 4 October 2007 (UTC)
Latest addition. Come on ...
∴ Alex Smotrov 21:18, 12 October 2007 (UTC)
It seems the new code of createNavigationBarToggleButton()
encourage users to use <div class=NavFrame style=display:none>
. I don't think it's a good idea, what about users with JavaScript disabled? If something can be made visible only with JavaScript then it should be hidden only with JavaScript. In other words, the system should work more like collapsible tables: <div class="NavFrame autocollapse">
or <div class="NavFrame collapsed">
. Any support for this? ∴
Alex Smotrov
14:27, 12 October 2007 (UTC)
The ta[]
definitions at the top of the page need to be updated. Introductory explanations: ta[] object is used by function akeytt()
in
wikibits.js to assign missing access keys and tooltips to Mediawiki interface. Due to the way the function is written, it cannot properly change the existing tooltip if you don't specify accesskey (in IE of Firefox place your mouse over «Help» link on the left, then over its bullet). To research which ta[] are not needed, you could use: browser with JavaScript temporarily disabled, HTML page source,
Special:Allmessages,
Mediawiki:Sidebar. My proposal:
ta["t-print"]
and ta["t-permalink"]
because
Mediawiki:tooltip-t-print
Mediawiki:tooltip-t-permalink say the same thingta["n-help"] ta["n-sitesupport"] ta["ca-nstab-project"]
:
Mediawiki:tooltip-n-help,
Mediawiki:tooltip-n-sitesupport,
Mediawiki:tooltip-ca-nstab-project and
Mediawiki:accesskey-ca-nstab-project simply need to be changedta["n-mainpage"]
: it simply doesn't change anything because of the current
Mediawiki:Sidebarta["n-contact"] ta["n-Contents"] ta["n-Featured-content"] ta["n-Main-page"]
since they are non-standard (no Mediawiki tooltips)ta["n-About-Wikipedia"]
and ta["t-log"] («Logs»)
, these links on the left currently have no tooltipsta["t-cite"]
is used, maybe related to
Mediawiki:cite_article_link?ta["ca-hiderevision"] = new Array("h","Hide this revision")
because 26 users with
oversight permission can probably live without it∴ Alex Smotrov 14:27, 12 October 2007 (UTC)
ta[]
can be finally removed ∴
Alex Smotrov
05:03, 13 October 2007 (UTC)
Maybe create MediaWiki:IEFixes.js, so we only have to check for IE once? — Ruud 12:18, 15 October 2007 (UTC)
I just found out that Azatoth's edit to the sysop.js import script broke the entire common.js with the error: "Object does not support this property or method". I have reverted. If you're going to optimize code, Please test in your monobook.js first! Thank you. — Edokter • Talk • 18:03, 14 October 2007 (UTC)
(deindent) I don't quite understand the last edit though... 'in' works on any object or array, and wgUsergroups is a valid array. Personally, I would do it like this:
if ( wgUserGroups && !window.disableSysopJS ) { for ( var g in wgUserGroups ) { if ( wgUserGroups[g] == "sysop" ) { importScript( "MediaWiki:Sysop.js" ) break } } }
...making the loop stop once "sysop" is found. — Edokter • Talk • 19:06, 15 October 2007 (UTC)
Let me say it again: there is no need for the loop at all, since 'sysop' is always wgUserGroups[0] ∴ Alex Smotrov 19:18, 15 October 2007 (UTC)
How about adapting the import script to automatically import the usergroup's specific js file?
/** Usergroup Javascript ******************************************************* * * Description: Allows for usergroup-specific Javascript (ie. MediaWiki:sysop.js). * Created by: User:^demon */ if ( wgUserGroups && !window.disableUsergroupJS ) { for ( var g in wgUserGroups ) { importScript( "MediaWiki:" + wgUserGroups[g] + ".js" ) } }
Someone pointed out that the if (!window.disableSysopJS)
is useless here, as the users' monobook is loaded after common.js, so sysop.js is imported anyway. The check should preferably be moved to sysop.js itself. Or more ideally, each function is sysop.js should have it's own check; that way admins can disable what they don't like. —
Edokter •
Talk •
15:21, 17 October 2007 (UTC)
We've disabled the IE 6 PNG workaround for the moment after spending a couple hours looking into a squid bug which turned upload.wikimedia.org into mud for a while this afternoon.
We're not 100% sure yet what's up with it, but for now I'd recommend at least keeping that .GIF out until we know it's not going to break again under maximum load. -- brion 19:29, 9 October 2007 (UTC)
{{
editprotected}}
Putting in a PNG hack saves us a whole bunch of time and trouble trying to maintain at least 2 copies of each alpha-transparent image. What? What point is there in maintaining two version of an image when only one can be linked/displayed? I'm sorry, but you completely lost me here.
I admit, I am an IE6 user, and as such, I experience the effects of this script first hand, including the speed impact. Of course the slowdown on 'up to date' is "virtually nonexistant"; they don't touch the script. And I don't blame you anything; It was brion who disabled the script; I partially re-enabled it, forgetting to exclude the imagmaps. When I realized my mistake, I started to weigh the options: I never liked the old script; the slowdown on certain pages was unacceptable to me, and there was no way to turn the script off, safe turning off javascript alltogether. That's why I was so desperate to fix it. When this final version was made live, I finally felt we had a solution. Now that that code apparently caused a squid to fall over, we are indeed back to square one, and I'm kind of relieved too, because while looks are one thing, usability in terms of speed has higher priority in my mind. And since IE6 is found on mostly older systems (below 1 HGz), I feel the speed issue potentially impacts users more then I'm willing to accept.
In any event, until the squid problem actually solved, I no longer see this script fit for use in Common.js. Instead, I see it much better suited for users to put it in their own monobook.js. For one, it gives the users a choice, and would have way less impact on the squid servers; I expect not that many users will actually install the script.
And please do not imply that I'm on some sort of power trip here. I'm a user just like you, but I have added responsabilities to other users as well. Having first hand experience with the script in all permutation does give me insight as to what impact it has on other users. That is what I act on! Any ohter admin is free to take me to task if they feel I stepped out of bound, and will abide by whatever consensus will come out any discussion following my actions. — Edokter • Talk • 01:21, 11 October 2007 (UTC)
function PngFix() { if (document.body.filters && !window.PngFixDisabled) { var documentImages = document.images for (var i = 0; i < documentImages.length;) { var img = documentImages[i] var imgSrc = img.src if (imgSrc.substr(imgSrc.length - 3).toLowerCase() == "png" && !img.useMap && !img.onclick) { var outerSpan = document.createElement("span") var innerSpan = document.createElement("span") var outerSpanStyle = outerSpan.style var innerSpanStyle = innerSpan.style outerSpan.id = img.id outerSpan.className = img.className outerSpan.title = img.title outerSpanStyle.cssText = img.style.cssText outerSpanStyle.display = "inline-block" outerSpanStyle.fontSize = "0" outerSpanStyle.verticalAlign = "middle" if (img.parentElement.href) outerSpanStyle.cursor = "hand" innerSpanStyle.width = img.width + "px" innerSpanStyle.height = img.height + "px" innerSpanStyle.display = "inline-block" innerSpanStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + encodeURI(imgSrc) + "')" outerSpan.appendChild(innerSpan) img.parentNode.replaceChild(outerSpan, img) } else { i++ } } } } if (navigator.appName == "Microsoft Internet Explorer") { var version = navigator.appVersion.substr(22, 3) if (version == "6.0" || version == "5.5") window.attachEvent("onload", PngFix) }
In this code, a user has only to add "PngFixEnabled = false" to their monobook.js and the code will be disabled. But I really do not see why a user would want to do this rather than just use a different, more advanced browser and avoid the problem entirely. — Remember the dot ( talk) 02:53, 11 October 2007 (UTC)
if (document.body.filters && !window.PngFixDisabled)
∴
Alex Smotrov
14:02, 11 October 2007 (UTC)!window.disableSysopJS
∴
Alex Smotrov
14:49, 11 October 2007 (UTC) if (!document.body.filters || window.PngFixDisabled) return
and then remove indentations a little... ∴
Alex Smotrov
19:17, 11 October 2007 (UTC)Examples of collapsed tables: Wikipedia:Route diagram template (scroll down), User:VanTucky (userboxes, as many users employ them). PS. Why change the trird line? You're just reversing all boolean operators with exactly the same outcome. — Edokter • Talk • 21:27, 11 October 2007 (UTC)
function PngFix() { if (document.body.filters && !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.useMap && !img.onclick) { 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 outerSpan.title = img.title 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") { var version = navigator.appVersion.substr(22, 3) if (version == "6.0" || version == "5.5") { window.attachEvent("onload", PngFix) } }
The problem was more IE quirkiness. IE refuses to say what the image's width and height are when the image is set to display:none
. After reading
[6], I experimented a bit more and decided to force the image width to 1px if it is 0px. IE is so quirky that having width:1px
and height:0px
makes it display the image.
Now, if IE will display the image OK with width:1px
and height:0px
, why not use these static values for all images and gain a bit of speed? Well, I'm trying to avoid altering the DOM beyond what is neccessary. While the filter forces the element to display at the correct size, the element's area is still 0x1 (try setting background-color
and you'll see what I mean). Fancy CSS like background-color could be broken unless the original width and height are preserved.
On the plus side, I noticed that a lookup for document.createElement was being performed twice for every image. By caching this function pointer (see [7] "Cache Function Pointers at all costs"), the speed increased significantly. — Remember the dot ( talk) 06:32, 12 October 2007 (UTC)
for (i in imgCurrentStye) outerSpanStyle[i] = imgCurrensStyle[i]
, but that would defenitely slow the script to a crawl. outerSpanStyle = imgCurrentStyle
(not tested yet) could theoretically work, but that just references the original object, not copy it. However, since the original img object is discarded anyway, we could give it a shot.(deindent) Wow... 6 seconds traversing the DOM on Wikipedia:Route diagram template/Catalog of pictograms (400 PNGs!) with the optimizations! that used to be 30... The PngFixDisabled flag works as well. — Edokter • Talk • 22:14, 12 October 2007 (UTC)
outerSpanStyle.backgroundImage = imgStyle.backgroundImage
for checkered background support... Thoughts? —
Edokter •
Talk •
22:18, 12 October 2007 (UTC)function PngFix() { if (document.body.filters && !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.useMap && !img.onclick) { 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.title = img.title for (var property in imgCurrentStyle) { outerSpanStyle[property] = imgCurrentStyle[property] } 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++ } } } }
Since this new code doesn't add any costly DOM lookups, it will in all likelihood still go very fast. I noticed no slowdown on Commons:Category:Icons for railway descriptions. Of course, when the squid servers are fixed then we should integrate this code back into the 1px transparent image code to increase speed. — Remember the dot ( talk) 23:22, 12 October 2007 (UTC)
A user using IE5.5 has problems seeing images only as a thin vertical line, so setting width and height to 1px probably wasn't the best solution. We could max() the width and height again, but that probably wouldn't solve his problem in collapsible tables. Tested with max(), but that takes a serious performance hit. I recommend to just disable the script for IE5.5. —
Edokter •
Talk •
14:53, 13 October 2007 (UTC)
function PngFix() { if (document.body.filters && !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.useMap && !img.onclick) { 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 outerSpan.title = img.title outerSpanStyle.borderWidth = imgCurrentStyle.borderWidth outerSpanStyle.borderStyle = imgCurrentStyle.borderStyle outerSpanStyle.borderColor = imgCurrentStyle.borderColor outerSpanStyle.backgroundImage = imgCurrentStyle.backgroundImage 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") { var version = navigator.appVersion.substr(22, 3) if (version == "6.0") { window.attachEvent("onload", PngFix) } }
As a side note, I hope you can see why asking users to upgrade will give them a better experience than using endless workarounds. This problem can only be truly resolved by upgrading, so it's best to get users to upgrade. — Remember the dot ( talk) 20:16, 13 October 2007 (UTC)
Wont that code result in an endless loop? as i is only incremented in the else statement? or is there some magic here? → Aza Toth 20:56, 13 October 2007 (UTC)
i++
but then it skipped half the images. So yeah, there must be some perfectly explainable magic; but I don't know what is is... —
Edokter •
Talk •
21:00, 13 October 2007 (UTC)
i
isn't actually incremented. However, when replaceChild replaces the original image with the span, the original image is removed form the DOM, causing the rest of the images to move up one place in the list. —
Edokter •
Talk •
21:10, 13 October 2007 (UTC)As long as we're axing support for IE 5.5, let's simplify the code a bit:
/** * 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() { if (document.body.filters && !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.useMap && !img.onclick) { 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.title = img.title 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") { if (navigator.appVersion.substr(22, 1) == "6") { window.attachEvent("onload", PngFix) } }
The major change here is that the unnecessary variable var version
is no longer made, and only 1 character of the appVersion is compared (against "6"), instead of 3 (against "5.5" or "6.0"). This will probably only save a couple milliseconds, but it also simplifies the code, so I'd say it's still worth it. The documentation at the top is also updated. —
Remember the dot (
talk)
22:23, 13 October 2007 (UTC)
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substr(22, 1) == "6") { window.attachEvent("onload", PngFix) }
Brion has given his OK to use the "1px hack" (as he calls it) for image maps only. That would make the code complete. If the squid should turn into a puddle of mud again, he'll disable it. I'll put the code in. I will use Image:Transparent.gif instead, as that image is now protected on Commons. — Edokter • Talk • 14:49, 18 October 2007 (UTC)
Maybe this has been discussed before, or maybe I'm missing something ... would an base64 encoded version of the 1-px gif included in the JavaScript eliminate the server load issue? -- Iamunknown 06:05, 21 October 2007 (UTC)
I realize the scrolling fundraising banner that was just added is hard-coded, so the admins here can't do much about it. But could someone please consider adding a small link to the side of it that temporarily removes the scrolling part? I don't think people mind the notice so much as the ticker, and we should have a way to opt out of this "feature". – Minh Nguyễn ( talk, contribs) 23:19, 22 October 2007 (UTC)
Could we move the [dismiss] tag to the right of the banner rather than below it.
No need to push the body text down even more than it already is. Dragons flight 02:05, 23 October 2007 (UTC)
After a brief panic related to the hacked dismiss button that was added I thought I should leave a note here: Anyone who puts in site JS code that sets cookies for anons will win a free visit from me and a personal stabbing. That is all. ;) (if cookies are set for a substantial number of anons the site will be hard-down for a fair amount of time). -- Gmaxwell 02:15, 23 October 2007 (UTC)
I moved the collapsing option to built-in instead of the common.js hack, so it'll be available on all sites once fully live. Collapsed version now shows just the slim progress meter, which might be a little nicer to look at, and gives you the option of re-showing it should you... for some reason... want to. :) -- brion —Preceding comment was added at 03:34, 23 October 2007 (UTC)
addOnloadHook(function() { document.getElementById('siteNotice').innerHTML="";});
#siteNotice { display:none; }
to your monobook.css will probably work better :)
AmiDaniel (
talk)
18:56, 23 October 2007 (UTC)