Cameron McKay

If you’ve ever needed to do more complex animations than fades and slides, then you’ve probably encountered the jQuery animate function. The animate function allows you quite a bit more flexibility than just using fadeOut or slideDown. In fact, the oft-used fades and slides simply wrap calls to animate.

If you’ve ever looked at the jQuery animate docs at api.jquery.com you might have noticed that one of the optional arguments you can define is step which is defined as:

A function to be called after each step of the animation.

…and that’s it. If you search for “step” on the page, you won’t see another mention of it.

Read more »

As I was working on the PHP classes that Fep was to map to, I realized that it was rather silly for me to re-invent an API for lists since there were already many well-designed ones in existence. In particular, I’ve found that the .NET 3.5 collections API to be particularly nice to use. Moreover, since everyone and their dog and using .NET now, it would also be familiar to most programmers. Thus, I’ve decided to use a subset of the .NET collections API for Fep collections.

Read more »

As someone who has had to write a lot of IE-only code (against my will, I swear!), I was pleased to hear that Firefox 3.0 added support for the IE JavaScript function window.showModalDialog. Being in the middle of re-writing an IE-only web application, I thought this would simplify rewriting the modal dialogs to be compatible with both browsers.

Unfortunately, I don’t think the folks at Mozilla put their best effort into this one.

Read more »

The first page to use JSS in the wild has recently been launched: reneelung.ca.

The page was designed by my fiancee Renee Lung and programmed by me. You’ll notice if you look at the source that there is no JavaScript in the traditional sense. The page consists of three JavaScript files: the jQuery library, the JSS plugin, and a JSS stylesheet.

I hope this gives people an idea of the power of JSS. Read on for an annotated version of the JSS stylesheet used on that site (as of June 29th 2009).

Read more »

I’m proud to announce the release of JSS 1.0.0-beta2. Here are the changes:

• Fixed the way that {attributes} are handled when not using a selector. They should now properly grab the attribute from element that fired the event.
• Made it so each time a declaration block is applied, all the event handlers bound by JSS to the elements returned by that selector are unbound.
• Fixed the semantics of the {@attr} syntax. It now means that the eventTarget should always be used, regardless of whether or not a selector is defined. In order to access the attributes of a selector use {@attr} now.
• Added two new commands: set-data and remove-data. These commands use the jQuery functions data() and removeData(). They are similar to set-attr and remove-attr except instead of storing the information in an attribute, they are stored in a table. Data is accessed by using [data] syntax, similar to the {attr} syntax.
• Added new event property: setup. This event is fired when the JSS stylesheet is loaded (setup). This is useful in certain cases where the user wants to setup some variables using set-data.
• Made it so you can now set scroll-top and scroll-left via the set-attr command.
• Added trigger command. It can be used to trigger event properties on elements.
• Fixed bug where you could put a string | in a binary command due to the
  simplistic implementation. The new version requires any | to be escaped with \|.
• Added fade-to command, based on the jQuery.fadeTo() command.
• Added show and hide commands.
• Fixed issue with data and attribute replacements not working correctly (i.e. the first event would replace them for all events).
• Callbacks may now take string parameters. For example, “fade-out (#target) normal !callback str1 str2″.

I’ve also started writing documentation for the JSS commands. It is only partially completed but can still be helpful. Check out the JSS homepage for other documentation.

JSS 1.0.0-beta1 was released a couple minutes ago. This version of JSS should be mostly bug-free (although there are still many more tests to be written). For information on how to use JSS, see here and here.

More extensive documentation will be forthcoming as I move towards a 1.0.0 release.

I’ve said previously that JSS is a lot like CSS. What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.

If that blurb were written about JSS, it’d sound a little like this:

JavaScript Style Sheets (JSS) is a style sheet language used to describe the presentation (that is, the look and formatting) and functionality of a document written in HTML.

In this article, we will look at the syntactic structure of a JSS stylesheet. We will also talk briefly about including JSS stylesheets in your HTML documents.

Read more »

Ever wanted to make an image rollover, but you don’t know JavaScript? In this tutorial, we show you how JSS, a CSS-like language, makes this a breeze.

Read more »

Some nights, as I lay awake in bed, trying to sleep, I think about Arrayzing workflows.  Lately, I’ve been thinking of the different ways users might use Arrayzing. In particular, I’ve been thinking of how a user could edit a subset of elements in a zing without disturbing other elements. The result of this thoughtstream is a new Arrayzing command: merge().

Read more »

What does Arrayzing provide that a normal Array doesn’t? I hope to answer that question in my series of posts Arrayzing vs. Array. In today’s installment, we’ll take a look at what the get() and set() functions offer over an Array’s traditional [] accessor.

Read more »