MediaWiki talk:Common.js/Archive 10: Difference between revisions

Revision as of 21:56, 29 July 2016

Latest revision as of 21:55, 19 April 2025

(5 intermediate revisions by 4 users not shown)

Line 1:

{{Automatic archive navigator}}

<span id="63313641174" ></span>

== "Navframe" boxes no longer collapsing ==

Line 66 ⟶ 68:

Coincidentally, has anyone tried to obtain a diff between two previous versions of any page whilst logged out lately? There being nothing in this week's signpost indicating related changes, and the intermediate radio buttons disappearing at the same time as the spam randomises itself, I'm feeling a little suspicious. It could be another .js page altogether, of course. [[User:Splash|Splash]] - [[User talk:Splash|tk]] 10:38, 4 September 2007 (UTC)

:Indeed, the radio buttons are not updating when selected. That's not in this file, though. I think it's <ttcode>diffcheck()</ttcode> in http://en.wikipedia.org/skins-1.5/common/wikibits.js?97 and I have no idea why logging out would make any difference. Someone should post this on [[WP:VPT]]. I <s>guess I will</s> just did. &larr;[[User talk:BenB4|Ben<small>^B4</small>]] 11:23, 4 September 2007 (UTC)

::This was caused by the innerHTML rewriting code that mets put in with one of his changes. It looks like rewriting innerHTML causes pre-existing handles to dom objects inside to get invalidated. I confirmed that was the cause, and it's been removed. The message should be installed without rewriting the bodycontent div entirely. Until a fixed version has been tested the rotating lower notice should stay out. (upper notice isn't an issue) --[[User:Gmaxwell|Gmaxwell]] 14:03, 4 September 2007 (UTC)

Line 87 ⟶ 89:

Incidentally, why must there be so much formatting in these messages? There black, blue, grey, bold, italics, bullets and punctuation. dewiki just uses plain text and a link. Is that not enough? [[User:Splash|Splash]] - [[User talk:Splash|tk]] 12:27, 5 September 2007 (UTC)

:Everyone knows that Germans are staid and colorless. <fontspan colorstyle="color: #ff00ff>C</fontspan><fontspan colorstyle="color: #ff00cc>e</fontspan><fontspan colorstyle="color: #ff0099>l</fontspan><fontspan colorstyle="color: #ff0066>e</fontspan><fontspan colorstyle="color: #ff0033>b</fontspan><fontspan colorstyle="color: #ff0000>r</fontspan><fontspan colorstyle="color: #ff3300>a</fontspan><fontspan colorstyle="color: #ff6600>t</fontspan><fontspan colorstyle="color: #ff9900>e</fontspan> <fontspan colorstyle="color: #ffcc00>t</fontspan><fontspan colorstyle="color: #ffff00>h</fontspan><fontspan colorstyle="color: #ccff00>e</fontspan> <fontspan colorstyle="color: #99ff00>c</fontspan><fontspan colorstyle="color: #66ff00>o</fontspan><fontspan colorstyle="color: #33ff00>l</fontspan><fontspan colorstyle="color: #00ff00>o</fontspan><fontspan colorstyle="color: #00ff33>r</fontspan> <fontspan colorstyle="color: #00ff66>o</fontspan><fontspan colorstyle="color: #00ff99>f</fontspan> <fontspan colorstyle="color: #00ffcc>t</fontspan><fontspan colorstyle="color: #00ffff>h</fontspan><fontspan colorstyle="color: #00ccff>e</fontspan> <fontspan colorstyle="color: #0099ff>E</fontspan><fontspan colorstyle="color: #0066ff>n</fontspan><fontspan colorstyle="color: #0033ff>g</fontspan><fontspan colorstyle="color: #0000ff>l</fontspan><fontspan colorstyle="color: #3300ff>i</fontspan><fontspan colorstyle="color: #6600ff>s</fontspan><fontspan colorstyle="color: #9900ff>h</fontspan> <fontspan colorstyle="color: #cc00ff>l</fontspan><fontspan colorstyle="color: #9900ff>a</fontspan><fontspan colorstyle="color: #6600ff>n</fontspan><fontspan colorstyle="color: #3300ff>g</fontspan><fontspan colorstyle="color: #0000ff>u</fontspan><fontspan colorstyle="color: #0033ff>a</fontspan><fontspan colorstyle="color: #0066ff>g</fontspan><fontspan colorstyle="color: #0099ff>e</fontspan><fontspan colorstyle="color: #00ccff>!</fontspan><fontspan colorstyle="color: #00ffff>!</fontspan><fontspan colorstyle="color: #00ffcc>!</fontspan><fontspan colorstyle="color: #00ff99>1</fontspan><fontspan colorstyle="color: #00ff66>!</fontspan> &larr;[[User talk:BenB4|Ben<small>^B4</small>]] 22:16, 5 September 2007 (UTC)

Line 99 ⟶ 101:

:[[Image:Yes check.svg|20px]] '''Done'''. Cheers. --[[User:MZMcBride|MZMcBride]] 00:12, 9 September 2007 (UTC)

<ttcode>window.attachEvent("onload", PngFix)</ttcode> should be replaced with <ttcode>addOnloadHook</ttcode> (the former is specific to IE, but it's best to synchronize everything with the latter). I'm not too fond of innerHTML either, but if the script works, it works... [[User:Gracenotes|<span style="color:#960;">Grace</span><span style="color:#000;">notes</span>]]^{[[User talk:Gracenotes|<span style="color:#960;">T</span>]]} <span title="MediaWiki talk:Common.js">§</span> 01:08, 9 September 2007 (UTC)

:Feel free to tweak it however you like, so long as you're sure it won't break anything. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 01:16, 9 September 2007 (UTC)

Line 105 ⟶ 107:

:Here:

:{{tlx|editprotected}}

:Per Gracenotes's suggestion please change <ttcode>window.attachEvent("onload", PngFix)</ttcode> to <ttcode>window.addOnloadHook(PngFix)</ttcode>. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 01:23, 9 September 2007 (UTC)

::[[Image:Yes check.svg|20px]] '''Done'''. Cheers. --[[User:MZMcBride|MZMcBride]] 02:53, 9 September 2007 (UTC)

Line 129 ⟶ 131:

<del>A bug has been identified which causes borders to fail to display in IE 5.5 and 6. I believe that changing the code to make images into divs instead of spans will resolve this. So, please change the PngFix function to read:</del>

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 157 ⟶ 159:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 00:09, 10 September 2007 (UTC)

Never mind - changing it to a div would probably break more things than it fixes. Instead, try changing <ttcode>sizingMethod='scale'</ttcode> to <ttcode>sizingMethod='image'</ttcode> —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 00:31, 10 September 2007 (UTC)

:Changing the <code>sizingMethod='image'</code> has fixed the distortion on some flags, but the border problem persists. Interestingly, flag icons that are still based on jpg images '''do''' show the grey border. It's just PNG and SVG that do not. [[User:Andrwsc|Andrwsc]] 00:38, 10 September 2007 (UTC)

Line 168 ⟶ 170:

::OK, then try switching from using spans to using divs. This isn't standards-compliant, but Internet Explorer doesn't seem to care (surprise, surprise). For reference, the code would be:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 196 ⟶ 198:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 00:48, 10 September 2007 (UTC)

Line 209 ⟶ 211:

OK, I've found a fix (and tested it in my userpace on the Commons), but you'll have to edit two files. Change the pngfix code to read:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

/*

Line 256 ⟶ 258:

}

}

</pre>|bg1=#ccccff}}

Then hop over to [[Mediawiki:Common.css]] and add the following:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre>

/* Enables borders on PNG images in IE 5.5 and 6 */

Line 266 ⟶ 268:

border:1px solid #DDDDDD;

}

</pre>|bg1=#ccccff}}

In the future, the Mediawiki software may do all this automatically. But as for right now, we have to work with what we've got.

Line 294 ⟶ 296:

Here is a cleaned-up version of the code. I have tested it in my userspace on the Commons and believe that it will resolve the title attribute issues.

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

/*

Line 339 ⟶ 341:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 02:21, 11 September 2007 (UTC)

Line 388 ⟶ 390:

I went through and optimized the code to reduce unneccessary processing. Give this a try:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

/*

Line 434 ⟶ 436:

}

}

</pre>|bg1=#ccccff}}

Now, even though I did cut out a bunch of unneccessary processing, I left in support for images with id and title attributes even though the MediaWiki software ''usually'' does not use these attributes on images. I didn't want to have this code work in most cases but seemingly randomly mess up the page's XHTML in others. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 04:45, 14 September 2007 (UTC)

Line 452 ⟶ 454:

This code also disables running the script on an image if the image uses an imagemap. In the current "live" script there is a bug that causes imagemaps to fail to work with PNG/SVG images.

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

/*

Line 498 ⟶ 500:

}

}

</pre>|bg1=#ccccff}}

Again, let me reiterate that this script is not nearly as good as [http://www.microsoft.com/windows/downloads/ie/getitnow.mspx upgrading to Internet Explorer 7] or [http://www.mozilla.com/en-US/firefox/ using a different browser such as Firefox]. Firefox does work on Windows 2000.—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 20:34, 14 September 2007 (UTC)

Line 520 ⟶ 522:

In order to resolve the issues that the previous code caused, I request that the PngFix function be changed as follows:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 542 ⟶ 544:

}

}

</pre>|bg1=#ccccff}}

This makes use of a different solution, leaving the <code>img</code> tags intact but filling in the proprietary filter property and then changing the <code>src</code> attributes to point to a 1px transparent GIF image. This allows for much faster code, support for imagemaps, resolves issues with the editing toolbar, and even allows MediaWiki's checkered image background to be displayed. The only downside is that the "Save Picture As" right-click menu item will try and save the 1px transparent GIF image instead of the image the user actually sees. I've tried to mitigate the problem as best I can by naming the image [[:Image:Must left-click image again before saving.gif]]. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 17:10, 15 September 2007 (UTC)

Line 550 ⟶ 552:

:Looks good to me. I'm not going to make the change, since I don't have IE to test it with, but I hope someone else can take care of this. —[[User:Ilmari Karonen|Ilmari Karonen]] <small>([[User talk:Ilmari Karonen|talk]])</small> 19:16, 15 September 2007 (UTC)

:It ''is'' lightning fast. Unfortunately, it breaks the <ttcode>border</ttcode> and <ttcode>thumb</ttcode> parameters again. This could be fixed using a CSS class, ie, <ttcode>.img.pngfixed</ttcode>. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 19:44, 15 September 2007 (UTC)

::It's not truly broken, it just is missing part of the border. But, all the same, I'll disable the editprotected request until this is resolved. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 22:35, 15 September 2007 (UTC)

Line 563 ⟶ 565:

Well, I couldn't get the lightning-fast version to work right, but here is a revised copy of PngFix() which will add support for transparency + imagemaps, support for the checkered background, and last if not least fix the edit toolbar problem.

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 590 ⟶ 592:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 23:57, 15 September 2007 (UTC)

Line 622 ⟶ 624:

::::Please let me know about any specific cases where there are still problems. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 20:46, 17 September 2007 (UTC)

:::::Actually, now I'm working on rewriting the code to avoid using proprietary properties (like <ttcode>outerHTML</ttcode> and <ttcode>innerHTML</ttcode>). We'll have to see if this new approach is any faster. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 21:17, 19 September 2007 (UTC)

=== More standards-compliant version ===

I've modified the code to avoid using <ttcode>outerHTML</ttcode> to better comply with [[W3C]] standards, but the new code does not appear to be significantly faster. Would anyone else be willing to test this new code on, say, [[:Commons:Category:Icons for railway descriptions]], and let me know if it appears to go any faster?

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 668 ⟶ 670:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 01:58, 20 September 2007 (UTC)

Line 698 ⟶ 700:

But...from your comments it sounded like you weren't having any problems with the solution that involves a 1px transparent image. So I tried that solution again and was not able to reproduce the problems I was having with it earlier. Here is a simplified version of that script, please let me know if it works all right for you:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 722 ⟶ 724:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 03:17, 22 September 2007 (UTC)

Line 732 ⟶ 734:

::A test on nl.wiki shows that this code is significantly faster then the span method. Also a plus for this version: the added .thumbborder class is no longer needed in Common.css. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 12:13, 22 September 2007 (UTC)

:::Ah, now I remember why I didn't recommend using this 1px version + sizingMethod='crop'. It causes images to jump by a pixel or two when a border is used. Try <ttcode><nowiki>[[Image:Tournesol.png|100px|border]]</nowiki></ttcode> and you'll see what I mean. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 21:34, 22 September 2007 (UTC)

::::In that case, the only solution I can provide is this snipplet:

Line 773 ⟶ 775:

:::::Now, I took another look at the code that changes each image's source to a 1px transparent GIF (I actually could have used an indexed PNG, but the file size would have been slightly larger) and then encapsulates that element within a &lt;span>. I discovered that the reason it wouldn't work right is because the outer span's display style must ''not'' be "inline-block" for this solution. Here is some new code based on that idea that seems to work without problems:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 806 ⟶ 808:

}

}

</pre>|bg1=#ccccff}}

—[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 02:57, 26 September 2007 (UTC)

Line 813 ⟶ 815:

The above code doesn't show the borders at all, and all images jump 1px to the left and down. Sorry if I seem a bit frustrated. I just think if it can be done right, it should be. I have been brainstorming a bit, and have come up with a mix of both methods, depending if there is a border or not. I just need to figure out how to create a outer span (I'm not that good in javascript); Here's the code I have tested so far; if you can integrate the above code into that part that needs a span, I think we actually have a very good solution:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 837 ⟶ 839:

}

}

</pre>|bg1=#ccccff}}

That way, borderless images load fast (and pages with lots of images ususally don't have borders), while those with border are encapsulated in a span with border. No distortions, best of both worlds. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 13:31, 26 September 2007 (UTC)

Line 851 ⟶ 853:

::Just a note on your assumption above — "pages with lots of images" usually '''do''' have borders. Specifically, pages with hundreds of flag icons (e.g. [[List of countries]]) all use flag templates that put borders around every image. Also note that these icons are also extremely sensitive to distortion (i.e. even one pixel makes a noticable difference), so it is very important to maintain the aspect ratio and not use the "scale" option. [[User:Andrwsc|Andrwsc]] 19:45, 26 September 2007 (UTC)

:::Noted. That's why I'm trying to get my solution above to work, but my knowledge of javascript fails me. I feel I'm on the verge of a breakthrough... I just need a ''little'' help. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 19:49, 26 September 2007 (UTC)

::I need second eyes... I '''MUST''' be overlooking something stupid! Please look at [http://commons.wikimedia.org/wiki/User:Edokter/monobook.js]. Why is <ttcode>img.style.cssText</ttcode> empty/undifened, and thus are the broders not showing??? ([http://commons.wikimedia.org/wiki/User:Edokter/pngtest Test here].) <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 22:49, 26 September 2007 (UTC)

:::Because that information is defined in the thumborder class, not in the image's CSS text. You can use img.currentStyle to get at that information, but the code should really transfer the class information from the img element to the span used for styling.

Line 870 ⟶ 872:

::Fixed. It was the 'crop', changed it to 'image' (phew). <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 02:29, 27 September 2007 (UTC)

Imagemaps also work perfectly! So we can <ttcode><s>!img.useMap</s></ttcode> So that leaves <ttcode>!img.onclick</ttcode>. What does that filter out and where can I test this? If the editing toolbar uses .onclick... then that is working as well. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 12:39, 27 September 2007 (UTC)

:Added class independent border check. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 15:19, 27 September 2007 (UTC)

::<ttcode>!img.onclick</ttcode> prevents the script from running on the edit toolbar buttons. Code that doesn't remove the original img element shouldn't need this filter.

::I just tested your latest code, and there is still a visible upward jump on [[:Commons:User:Edokter/pngtest]].

Line 887 ⟶ 889:

:::::Then we have a difference of opinion. I pose that the difference in layout is less compared the difference in layout between IE and Firefox, and that it does not ''damage'' the layout in anyway, yet offers more functionality and speed then the current code. I think IE6 users benefit more with the added functionality then the 1px jump that does not harm the layout in anyway; the images are not distorted; the only visible effect is a 1px vertical margin drop in images with borders, and like you said, it can ''never'' be perfect. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 19:50, 27 September 2007 (UTC)

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 916 ⟶ 918:

}

}

</pre>|bg1=#ccccff}}

OK, try again. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 23:37, 27 September 2007 (UTC)

Line 946 ⟶ 948:

:::{{did}} Thanks for the report. —[[User:Ilmari Karonen|Ilmari Karonen]] <small>([[User talk:Ilmari Karonen|talk]])</small> 19:13, 15 September 2007 (UTC)

== <ttcode>&#123;{template doc}}</ttcode> modifier script ==

<sourcesyntaxhighlight lang="javascript">

addOnloadHook(function () {

if( wgCanonicalNamespace == "Template" && document.getElementById("doc_editlinks") ) {

Line 955 ⟶ 957:

}

});

</syntaxhighlight>

</source>

This script turns the "&#91;<span class="plainlinks">[http://en.wikipedia.org/w/index.php?title=Template_doc/doc&action=edit edit]</span>&#93;" link into an href (such as the one that allows editing of a section on a page). Would anyone be opposed to its addition to [[MediaWiki:Common.js]]? —<ttcode>[<nowiki/>[</ttcode>'''[[User:Animum|<fontspan colorstyle="color: #002BB8">Animum</fontspan>]]'''&nbsp;|&nbsp;'''''[[User_talk:Animum|<fontspan colorstyle="color: #5A3696">talk</fontspan>]]'''''<ttcode>]<nowiki/>]</ttcode> 14:35, 30 September 2007 (UTC)

:Huh? What do you think the "[edit]" link does now? [[User talk:Mike Dillon|Mike Dillon]] 15:21, 30 September 2007 (UTC)