Category Archives: JavaScript

IE6 Transparent PNG Backgrounds…With Repeat and Positioning?!

Posted on by

It’s brand-spankin’ new and I haven’t tried it myself — so caveat emptor — but Drew Diller has posted a JS widget he calls DD_belatedPNG, which purports to not only get IE6 to display both inline and background transparent PNGs correctly but to actually permit the use of the background-position and background-repeat CSS properties.  The latter is not possible using the MS-proprietary AlphaImageLoader filter, making this capability something of a holy grail for compatibility-conscious web devs.

What the thing does is dynamically grab the PNG it’s told to, then use an MS “behavior” to recreate it as a VML node, and then insert that VML node back into the document, replacing the original PNG.  Unlike AlphaImageLoader, VML honors all of the expected CSS properties.

One drawback is the script has to be explicitly told which element(s) to grab, though at least one can use standard CSS syntax. This makes implementations in, say, a CMS-driven environment more problematic.  But if the thing works reliably and without leaking like a sieve, it could restore a little sanity and flexibility until that glorious day when IE6 is finally staked through the heart and forgotten forever, amen.

WCAG 2.0 Moves to Proposed Recommendation Status

Posted on by

On Nov. 3, 2008, the W3C‘s Web Content Accessibility Guidelines (WCAG) Working Group published Web Content Accessibility Guidelines 2.0 as a Proposed Recommendation.

WCAG defines how to make Web sites, Web applications, and other Web content accessible to people with disabilities. “Proposed Recommendation” means that the technical material of WCAG 2.0 is complete and it has been implemented in real sites. This is the last step before WCAG 2.0 becomes the official standard.

The WCAG Working Group is welcoming final comments on WCAG 2.0 through 2 December 2008, less than a month away.

I highly recommend that every single person in the web business read this stuff carefully. If you have something constructive to contribute to the discussion, now is the time.

WCAG 2.0 will supersede WCAG 1.0, which has been the operative accessibility standard since 1999. There are some important changes to the standard that all coders, IAs, and designers should take note of, and it’s worth noting that there have been periods of considerable controversy during WCAG 2.0′s adoption process.
Current official working drafts of WCAG 2.0 primer documents:

Read the official announcement. Check the latest changes and status of WCAG 2.0.

jQuery to be Included in Microsoft Visual Studio. Reports of Airborne Pigs Skyrocket.

Posted on by

Those of you who care may well already know since it was announced about a month ago now, but Microsoft has announced that it will be including the excellent JavaScript library jQuery in future releases of their main development tool, Visual Studio. Best of all, MS says they won’t fix what ain’t broke — jQuery (and its documentation) will be included 100% as-is, with no modifications and with the MIT open source license intact, and intellisense will be fully functional with it. Any proposed changes, enhancements, or bug-fixes will be submitted to the jQuery team, just like everyone else does. Even more incredibly, later this year jQuery will be supported 24×7 by Microsoft’s Product Support Services (PSS) just like any MS product.

This is pretty much gob-smacking news, especially given Microsoft’s open hostility to open source. For those who have sworn like grizzled sailors trying to use the ASP.NET AJAX stuff in something resembling a decent cross-browser fashion, this announcement will no doubt prompt dancing and screams of joy.

jQuery will not be replacing the ASP.NET AJAX libraries but augmenting them, and moving forward the VS crew will be using jQuery to “implement higher-level controls in the ASP.NET AJAX Control Toolkit” and other such like. The new ASP.NET MVC download will also distribute it, and add the jQuery library by default to all new projects. Fortunately, since jQuery is so well architected it already plays very nice with the existing ASP.NET AJAX gizmos.

Updating the jQuery library will reportedly be as simple plopping the new one over the old, though as always you may need to tweak your code slightly or write a compatibility module or something.

Don’t pinch me, I don’t wanna wake up.

Here’s some relevant linkage, lest you think I’m smoking crack:

Prototype API Documentation Search Bar Add-On

Posted on by

The Prototype JavaScript framework is a fine thing, and the Prototype API Documentation online reference is obviously indispensible. The only problem is that currently the Prototype site has no site search, except for the API Search Bookmarklet which will only retrieve for specific method names (which is certainly useful but somewhat limiting, since it assumes you already know what you’re looking for and is not a free-text search).

So, after one too many searches on Google using site:www.prototypejs.org/api/, I wrote a couple search bar add-ons that simply uses the same Google trick to perform full-text searches of the API docs on the Prototype site.

There are two different versions — one for Firefox and one for IE7 (which has a slightly crippled implementation of the OpenSearch protocol…go figure).

Install the Prototype API Documentation search bar add-on here. (Sorry: Firefox and IE7 only.)

Securing Your JavaScript Against Evildoers

Posted on by

What with the Ajax invasion and all, JavaScript is once again all over the damn place.  The big difference now vs. the ’90s is JavaScript is doing a lot more heavy lifting and — more importantly — interacting with both host server and browser client (i.e. user’s machine) in ways heretofore (mostly) not seen.  And that means along with all the cool stuff and wond’rous toys and tools comes a whole new avenue for mayhem by lowlifes, script kiddies, and really gnarly folks like the Russian mafia.

Server-side programmers — at least the good ones — are already atuned the potentially cataclysmic horrors that can be wrought via insertion attack methods, but in javaScript circles — even the upper aeries of guru-dom — awareness of such dangers is not as pronounced.  This is bad.

Fortunately, A List Apart is doing its part for responsible web development (as usual) and has posted a good 2-part primer on writing secure JS code by Niklas Bivald:

Community Creators, Secure Your Code!

Community Creators, Secure Your Code! Part II

Let’s hope this is the start of a trend of articles and discussion along these lines.

Variably-Sized Pop-Ups with No onclick

Posted on by

This is a variation on Jeremy Keith’s script in DOM Scripting (Friends of Ed / Apress, 2005), pp. 86-88. (The same chapter is available on the official book site.)

While Keith’s original was intended as an example of other concepts and not a be-all-end-all pop-up script, it has some noteworthy limitations.

  1. The dimensions of the pop-up are hard-set in the JavaScript, thus making all pop-ups the same size. Also, modifying the sizing requires delving into the script’s innards.
  2. You cannot concatenate CSS classes — you can only style based on the one class name (“popup” in the example) or globally for all A tags, thus limiting your ability to custom style any given link. Also, attempting to add additional class(es) breaks the pop-up functionality.
  3. The pop-up’s window name is also hard-set in the innards of the script — all secondary pop-ups can only target the original pop-up.

My variation addresses these limitations while retaining all of the original functionality and adding only 7 new lines of code, plus 4 global variables for easily setting key default values (class name to trigger on, width, height, and window name).

I also threw in a couple lines in the generic popper-upper script itself to center new pop-ups — a personal preference that can be removed or modified as is your want. (Fwiw, the same approach I use for applying custom sizing could also be applied for custom positioning.)

Caveat: At this writing, I’ve not just yet tested this in Safari or IE7 (or IE5/Win), but it’s working well in FF and IE6.

Update:  Yep, works in everything — even (gasp!) IE5/Mac.  Meanwhile, watch this space for an updated and more flexible version.

For full details and sample markup, visit the examples page. (Unfortunately TinyMCE — the otherwise excellent HTML editor used in WordPress — is either too stupid or too smart for its own good to allow me to post valid HTML samples here.)

Or — download script file with inline code notes, and/or download the optimized script file (with usage notes).