10000 to 10,000 etc.

Just add css class=”numberformat currency” to a text field, and it will be formatted automatically.

It is based on the Prototype JavaScript library. You can get it from it’s GitHub repository page. Feel free to add or alter the functionality. Releasing under Creative Commons license.

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.

Some quick notes:

I’m using this on a rather big HTML page, so the selection of DOM nodes must be as simple and quick as possible. So if you are considering moderations, please make sure that the DOM manipulations are as lightweight as possible.

The script is as simple as possible. It does not parse the string as a number. Instead it just strips any thousand delimiters in the string. Afterwards it sets its own. There may be some important logic here to add to make the code more robust.

I have also added a test page to the project… not a real test page, but a HTML page that shows examples that are modified. Please back up any added functionality with changes to that page as well.

Contact me for commit access if you would like to contribute. I do not expect to add any functionality to the code unless the work project requires it.

More info:
GitHub repository

Technorati Tags: javascript, opensource, project, library

if ("console" in window)
  console.warn('DEPRECATED function call to '+ arguments.callee
  +'\nCalled by:\n'+ arguments.callee.caller );

Which results in a fine deprecation warning in the console:

There is plenty of space for improvement here. Feel free to use or tamper … but please post any alternative suggestions here as a comment.

2) Animation without JavaScript

Believe it! It’s true. Drop those old scripts that made your website scroll and blink because why bother programming JavaScript when plain ‘ol HTML can do it for you! These are the ever-so-beloved

<blink>

and

<marquee>

tags.

blink and marquee

<blink>Sale! Sale! Sale! Buy now and save big!</blink>

<marquee>Welcome welcome welcome! Today is the beginning of the end, buy now!</marquee>

Fabulous humour, just the way I like it :). Especially I love the hit counter:

Oh and by the way, did you know who invented the spacer.gif?

Technorati Tags: spacer.gif, webstandards,

Is it possible to run JavaScript functions or execute code from within your Watir test scripts? As a matter of fact it is, but I had a hard time finding the proper documentation for it. Here is what to do and how:

Call JavaScript Functions from Watir script

Inject JavaScript to run from Watir script

I used this to alter a JavaScript function on the existing page:

As you can see, you can reference the window object and use eval to execute your snippets. The easier way is to add this custom method for easy reference

Then you can write the last example as:

Much more intuitive and straightforward. Thanks to my colleague Tobias for the trick.

More info

• Justaddwater.dk: Watir: Another sweetspot for Enterprise Ruby (July 2006)
• Telerik (by Egil): Automating Complex JavaScript-rich Controls with Watir (April 2006)
• DWatir for distributed testing is very promising. I saw the demo at RailsConf but had not yet a chance to use. More info in the code files.

Technorati Tags: ruby, enterprise, business case, watir, testing, javascript

Problem: An inline “reverse” framebuster script that makes sure that everything is nicely(?) wrapped in the frameset. As you see it’s included inline in the HTML.

One thing is I never understood the thing about putting everything in a frameset. In this case, I have not been able to change the code. But as I have to use the application every now and then, the big question is:

How to change or remove the inline JavaScript, and make sure the framebuster is ignored?

I did not think this was possible until I got this answer from “esquifit” in the Greasemonkey user goup:

You do not need GM nor Opera for this task. Firefox comes with a
built-in capability for allowing/disallowing access to
properties/methods of DOM Objects on a per-site basis. It is called
Configurable Security Policies (CAPS) and it is described in [1].
Further examples and explanations are provided for example in [2] and
[3].
A short guide assuming the simplest case:
1) Close Firefox
2) Locate your profile folder [4]
3) Locate the file user.js within this folder. If it does not exist,
create it with a *text* editor (Notepad, vim, etc.), not with a ‘word
processor’ (MS Word, OpenOffice.org, Wordpad, etc.)
4) Add the following lines to user.js:
user_pref(“capability.policy.policynames”, “noframebuster”);
user_pref(“capability.policy.noframebuster.sites”,
“http://www.annoying-site.com“);
user_pref(“capability.policy.noframebuster.Location.replace”, “noAccess”);
Of course, you will have to replace the domain with the one you want to prevent from redirecting your frames.

Find the entire discussion here:

• Greasemonkey users group: “How to ignore framebuster script“

Technorati Tags: javascript, frameset, frames, frame buster, inline, firefox, location.replace

For example I added “quirks or !quirks” to determine whether a page runs standards mode or quirks mode. It pops up an alert that displays rendering mode for each frame.

• “Document mode: CSS1 Compat” is standards mode
• “Document mode: Back compat” is quirksmode

I forget where I found the code (please notify me and I’ll give you credit).I also modified Steve Chipman’s excellent “PageInfo” so that its usable with frames. If frames are found it asks you to enter a frame number (index from document.frames[x])

I also added Andy Budd’s CSS grid layout bookmarklet which I find useful on occasions to see if things line up.

In general I find that I use these less and less, because much functionality is built into Firebug. But on some occations the bookmarklets can prove very handy.

Import all at once (separate HTML page):

Web Standards Investigation Tools (WSIT) HTML page
(last updated 2007-10-12)

Instruction:

1. Save the linked HTML page locally
2. Open Firefox Bookmark Manager (Bookmarks > Manage Bookmarks)
3. Choose File > Import …
4. Import bookmarks into “Bookmarks Toolbar Folder” for easy access to them.

More info:

• Toolbox — locating problems in HTML
• Original Web Standards Investigation Tools (WSIT) bookmarklets (September 2006)
• Technique for locating problems in HTML (September 2006)
• Why web standards matter (case study) (June 2006)

Technorati Tags: javascript, bookmarklet, toolbox, webstandards, web standards

Now I stopped looking. E-texteditor for windows is very intuitive and easy to use. I highly recommend watching the screencast (a short tour of some of the best features). Although it’s still in beta, it seems so much better than the alternatives.

I’m using it for HTML, CSS, JavaScript, Ruby on Rails editing. And it just works.

One note for avoiding future head-scratching: In order to get the keyboard shortcuts (so-called bundles) to work, I had to delete Cygwin and let E install it automatically. Afterwards I had to add packages manually: Subversion (svn)

Other improvements that would be handy:
In HTML mode there is a shortcut “doctype [tab]“, but there is no shortcut for creating the rest of the HTML document. It’s probably easy to add (but i’m not into doing it yet). Besides, I think an addition like this would be a benefit to everybody, so it should be included in the general bundle.

In Ruby files, when looking on Ruby on Rails, it defaults the files to Ruby (because they are and they end in .rb). However, there is a lot of functionality with regards to Rails, so it would actually work better, if .rb defaulted to Ruby. Here is a workaround to add .rb files to Rails syntax.

I also added a bug report “Block selection should work without the mouse” (guess I’m a usability geek).

The simple cheatsheet for E-texteditor at errtheblog is worth checking out, although it contains only the general shortcuts and not the Rails specific ones. Via: RubyInside.

Technorati Tags: editor, e-texteditor, etexteditor, windows, textmate, html, css, javascript, rails, ruby on rails, ruby, rubyonrails, cygwin

The really cool thing about this user interface is the inline editing of cookie names and values. I really like the principle that you hover the value that you inspect, can see that it’s editable. Then click directly and the text is converted to a text field that is automatically saved when you leave the field.

Andrei from New York wrote me and reminded me the handy little cookie editor, so after making some minor modifications, I decided to republish it.

Well, actually, I’ve spent some hours getting more and more puzzled on some bugs and limitations in the code.

I won’t hesitate anymore, but rather give you the tool including some known issues. Please feel free to make suggestions or fix.

Known issues:

All cookies set with the tool expires end-of-session. This could be easily fixed, but I’d like to implement it in a way so that it works elegantly and simple in the user interface.

Cookies with domain set differently cannot be edited or deleted. This is a problem on many big portal sites. For instance, all cookies on Yahoo! are set for

. But the front-page is located at

(the www subdomain of yahoo.com), which means that my tool is not allowed to edit or remove the cookie.

Goto next page and bookmark this link in your browser: cookie editor page with bookmarklet.

Technorati Tags: javascript, bookmarklet, favelet, cookie editor, cookies, editor, cookie

The IE PNG bug explained

In the screenshots below you can see the same image as it is seen in Internet Explorer 6 and Internet Explorer 7 (Gray border added around the edge of the screenshot for your viewing pleasure):

PNG alpha transparency bug as seen in IE6

No PNG alpha transparency bug as seen in IE7

Instead of showing what is truly behind the image all IE renderer’s prior to IE 7 just shows an ugly, bluish/gray background color.

The solution and a new problem

Several people have found solutions to this problem. Most noticeably is the fix by Bob Osola where I have also borrowed the above examples.

There is one problem though with these kind of fixes, and that problem is accessibility.

The idea is that you embed a piece of JavaScript in your webpage that, just before the images are displayed, runs through the DOM and replaces any img element that display a PNG image with a span element. What’s special about this span element is that it has a style attribute with a special IE-only filter called:

This filter then renders the original image inside the span element and the user sees the image as if it was just a regular img element.

But what about screen readers? Will they still recognize this as a regular image? Some may say that screen readers don’t use JavaScript anyway and therefore never gets their DOM changed. But the most popular screen reader of them all for Windows called JAWS is just a regular Windows program running next to the browser and just reads whatever code the browser holds.

Does anybody have any thoughts or experience with this? Am I for example right in my assumption that JAWS actually reads the generated code? And will that in fact be a problem? Please drop a comment with your thoughts.

Update 2006-11-06 19:10 (CET)
To better understand the accessibility implications, here is an update to clarify what Bob Osolas fix actually does. Take this example of a regular img element:

<img src="/images/sunset.png" align="left" alt="Sunset over New York" width="654" height="321" id="img421" class="largeimage" style="border: 1px solid black" />

That is then translated into this span element:

<span id="img421" class="largeimage" title="Sunset over New York" style="width:654px; height:321px; float:left; display:inline-block; border: 1px solid black; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/sunset.png', sizingMethod='scale');"></span>

In turn if the original img element is wrapped in an a element (i.e. is linkable) the following css is also added to the style attribute of the span element:

Technorati Tags: Internet Explorer, IE, IE6, IE7, png fix, images, accessibility, screen reader, JAWS, DOM, HTML, JavaScript, web development

I decided to split this into two posts. This first one is about the toolbox. The second part is about the investigation technique (available separately).

Firefox Extensions for the toolbox

I use Firefox for the investigation. It has the best web developer tools and bookmarklet support. Get firefox.

1. HTML Validator (based on Tidy). HTML validation errors and warnings immediately in the status bar on the page you watch. Indispensible when aiming for standards compatible websites.
2. Firebug. JavaScript errors and warnings immediately in the status bar.
3. Firefox Web Developer Toolbar. Has a lot of handy tools, among others the ability to turn off CSS stylesheets.

For a more indepth description of Firefox extensions, refer to my previous post from last year: Web developer’s collection of browser tools.

JavaScript bookmarklets

Bookmarklets are small JavaScript snippets, that is stored as a bookmark and executed on any page. I prepared a collection useful for investigating web standards issues.

Import all at once (separate HTML page):

Web Standards Investigation Tools (WSIT) HTML page
(last updated 2006-09-18)

Instruction:

1. Save the linked HTML page locally
2. Open Firefox Bookmark Manager (Bookmarks > Manage Bookmarks)
3. Choose File > Import …
4. Import bookmarks into “Bookmarks Toolbar Folder” for easy access to them.

The bookmark above contains the following bookmarklets. I list them with a “shortname”

1. Page Info (contains key figures about content to markup ratio, total code weight and number of image elements. Shortname: pInfo
2. Mouse Over DOM Inspector 2. Turned on, you simply hover any element to learn about attributes, children and ancestors. Probably the easiest way to investigate a HTML page. Shortname: modi2
3. JavaScript Shell. Opens a JavaScript Shell and allows it to access the current page. Shortname: Shell

A few other bookmarklets that I use frequently for furthter investigations, but they are not used in my description.

4. JavaScript Variables. Displays all JavaScript variables and functions. Shortname: JS vars
5. Cookie editor. View, delete and edit cookies. (Will be available later due to a server crash).
6. Table number rows. Numbers each table row (makes it easy to see if tables are used for layout). Shortname: Trow

More info about the bookmarklets.

Page Info and Mouse Over DOM inspector are part of Steve Chipman’s bookmarklet collection “Favelet Suite” which is definately worth a mention.

JavaScript Shell, JS Variables and Table number row are from Jesse Ruderman’s indispensable webdevelopers bookmarklet collection (which you can download as one file)

The Cookie editor is my own invention. Will be available later as I will move it to a new server.

Summary

These are the basic tools that have been helpful for me when investigating web standards related issues in web pages. The toolbox here is complimented with the page describing the technique for locating problems in HTML.

Related reading:

• technique for locating problems in HTML
• Why web standards matter (case study)

Technorati Tags: javascript, bookmarklet, toolbox, webstandards, web standards