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

Revision as of 16:53, 31 August 2022

Latest revision as of 21:55, 19 April 2025

(3 intermediate revisions by 2 users not shown)

Line 1:

{{Automatic archive navigator}}

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

== "Navframe" boxes no longer collapsing ==

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)

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 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 627 ⟶ 629:

I've modified the code to avoid using <code>outerHTML</code> 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 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 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 957 ⟶ 959:

</syntaxhighlight>

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]]? —<code>[<nowiki/>[</code>'''[[User:Animum|<span style="color: #002BB8">Animum</span>]]'''&nbsp;|&nbsp;'''''[[User_talk:Animum|<span style="color: #5A3696">talk</span>]]'''''<code>]<nowiki/>]</code> 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)