The Wigitizer

A dead-simple progress bar, that is controlled using its 'value' property.

The div tag is not replaced in this custom element, but instead is used as a container.

For an animated effect, use a stylesheet to set the background of div.pctvalue to a repeating-pattern image, and set the progress bar's animation to '1'. The script will animate the image using a 4-wave lisajous movement.

Note: if you want to use multiple styles of progress bar, avoid styling the 'progress' class, instead opting for custom names. In this way, you can use different styles for 'pctvalue' by subclassing

As with all of my widgets, the idea here is that you can just <script> include the .js file and start dropping in tags without needing to know any ECMAScript at all.

Additionally, for you ECMAScripters, I was very careful to keep my pollution of the global namespace to one class: progressBar.

Also, there are javascript bindings:

The standard 'setAttribute' and 'getAttribute' functions work as well, but these are provided as shortcuts.

This is an analog clock. Pretty simple, that.

The div tag is not replaced in this custom element, but instead is used as a pseudo-document to hold the clock itself. The 'hands' are implemented using arrays of generated divs.

I was actually inspired to write this widget because of an article on About.com's Javascript pages written by a guy named Stephen Chapman. His code was a mess, but I only discovered this after delving through two layers of 'unescape()' obfuscation.

The basics: You control the look of the numbers and the 'box' model of the clock using basic CSS. You control the clock's size (it will always be square) using the 'size' attribute.

The 'seconds', 'minutes', and 'hours' attributes are for the color of the 'hand's. 'numstyle' can be 1, i, I, or '.', each refering to a different type of face-numbering for the clock

The 'localzone' attribute tells the script to use the user's local time zone. If it's '0', 'false' or 'no', the clock will use the 'clockzone' attribute to determine what time it is (the clock zone is relative to GMT, so, for example, US Eastern is -5. The clock automagically figures out if we're in DST, so you don't have to.)

The 'city' and 'country' are for if you want to put in the city/country of origin for your clock. To be honest, you can put anything there.

Lastly, I designed my version of the clock to be able to not 'tick', i.e., work like the old-school analog clocks. If you want ticking, add 'tick=1' to the attribute list

As with all of my widgets, the idea here is that you can just <script> include the .js file and start dropping in tags without needing to know any ECMAScript at all.

Additionally, for you ECMAScripters, I was very careful to keep my pollution of the global namespace to one class: analogClock.

This is a Dock widget, a'la OS-X. It's designed to be simple for the end user to implement, and to have very little CPU overhead on the calling page.

The p.dock tag is the container element, with the button tags on the inside being replaced with the dock itself.

For the dock, 'pos' refers to the edge the dock will be docked upon. 'size' and 'maxsize' refer to the normal and widened extents of the dock icons out from their edge. 'magnification' is wide, narrow, or a floating point number between 0 and 1 (play with it if you feel like).

On the buttons, 'src', 'href', and 'target' are the same as they would apply to images and links.

As with all of my widgets, the idea here is that you can just <script> include the .js file and start dropping in tags without needing to know any ECMAScript at all.

Additionally, for you ECMAScripters, I was very careful to keep my pollution of the global namespace to two classes, jsDock and jsDockButton.

Note: This script is for Mozilla Firefox only.

This is a basic slider input element. It is meant to be used in a form, and returns exactly what you'd expect from its syntax. It is DOM Level 1 compliant, and should work in most browsers. I do object testing rather than UA testing, so it should work with the new features in a future version of browser X.

As with all of my widgets, the idea here is that you can just <script> include the .js file and start dropping in tags without needing to know any ECMAScript at all.