User Agent Man » Uncategorized

visibleIf – Dynamic and Complex Interactive Forms Using HTML5 Custom Data Attributes

zoltan — Mon, 21 Jun 2010 00:49:36 +0000

Update (July 28, 2010):

I have fixed a minor bug in this script to ensure compatibility with webforms2, part of a suite of scripts that implement cross-browser compatibility with the HTML5 forms specification.

I have been following the progression of the HTML5 Forms standard with great interest. It promises a whole slew of new visual and usability goodness to existing HTML forms (e.g. slider and calendar widgets), a client-side validation framework, and so much more. One of the things I was disappointed with, though, was that HTML5 cannot hide and show form elements depending on what the user has input into the form so far. To give a very simple example of what I am talking about, select a country of origin in the form below:

Country of Origin:
Postal Code:
Zip Code:

In HTML5, there is no way for a developer to tell the browser “only show me this block of HTML if country == 'Canada'“. This is not a criticism of HTML5 or its authors — HTML5 forms has a lot of awesomeness in it (some of which I will blog about in my next article) and we can’t expect it to do everything. However, I have been using custom JavaScript to do this kind of stuff all the time, and wouldn’t it be great if the JavaScript challenged could do so? In the ideal world graphic designers, J2EE programmers with minimal front-end experience, and even my 75-year-old mom should be able to do this.

As a result, I present a JavaScript library, visibleIf, which allows web developers to use HTML5 custom data attributes to define when blocks of HTML should be visible or invisible. Even if you are not a JavaScript genius, you will be able to make cool looking dynamic forms with very simple markup. For example, let’s take a look at the HTML of the example above:


    class="visibleIf" data-visibleif-rule="country == 'Canada'">
            class="visibleIf" data-visibleif-rule="country == 'United States'">
            
        
            Country of Origin

             
        

        Postal Code

             
        

        Zip Code

Country of Origin
Postal Code
Zip Code

This example is rather simple: the Postal Code form field is shown when country == 'Canada' and Zip Code is shown when country == 'United States'. Note that in order to hide and show a block of HTML, you must set two attributes inside the containing tag:

class="visibleIf": which lets the visibleIf.js script know that this block of HTML is to be hidden or shown according to the data-visibleif-rule
data-visibleif-rule='rule expression': which contains the visibility rule. The rule variables are form element names, like country is in the above example. You can do simple equality rules like this, or complex ones like:
```
  ...
```
If you know a little bit of JavaScript, you will note that you can use JavaScript functions to do interesting rules like:
```
  ...
```

Note that the above examples have visibleIf rules inside a tr tag, they can be used in any tag inside an HTML form.

Although the above example is quite simple, you can use visibleIf to make really complex forms — you can even put visibleIf blocks inside of visibleIf blocks. To illustrate this I have created a more interesting form that shows what can be done using visibleIf.

See a more complex visibleIf form example

Hidden Fields – To Clear Or Not To Clear

If the user does something that hides some form fields (e.g. clicks on a checkbox) and then reverses that action (in this case clicking on the same checkbox), the fields will reappear with any previously filled-in data erased. Developers can override this default behavior by setting the class of the fields that shouldn’t be erased to visibleIf-doNotReset. To illustrate this, I have created a page with two identical forms on it — one that erases the values inside hidden fields, and one that doesn’t. Play with the example and you’ll see what I mean.

See an example of a form with and without visibleIf-doNotReset fields.

Hidden Fields – Submit To The Server, Or Not?

Also note that by default, only the visible form elements are submitted to the server (this is because when a form element is hidden by visibleIf, its disabled attribute is set to true when the form is submitted). If developers wants to override this behavior, they can simply set the form’s class to visibleIf-submitInvisibleData.

See an example of a form with and without visibleIf-submitInvisibleData class set.

The Quick “How-To” Guide”

Setting up your existing forms to use visibleIf is a quick, three-step process:

Download the source from the visibleIf Project Page
Include the visibleIf.css stylesheet, EventHelpers.js and visibleIf.js JavaScript files into your web page:
Use the visibleIf rules as seen in the example above. Note that &&, || and other logical operators are allowed in the expressions, as are JavaScript functions (e.g. parseInt, parseFloat, etc).

A Note On The Use Of Custom Data Attributes

Why did I bother with custom data attributes when making visibleIf? Why did I just use the attribute data-visibleif-rule instead of just visibleif-rule or just rule to place the visibility rule? Wouldn’t that be simpler?

data- attributes are HTML compliant: . Their use ensure that visibleIf will be compatible with future versions of HTML since data- attributes are reserved to be used for JavaScript libraries. As long as you use the HTML5 DOCTYPE, your forms should also validate.
The data-visibleif- prefix will not collide with attributes used in other JavaScript libraries. There is a high chance that data-rule could be used by another library. Using the name of the library in the attribute significantly reduces that possibility.

Download

visibleIf.js v. 2.1 and example code (zip format)

CSS3 Please – Another Great Cross Browser CSS3 Solution.

zoltan — Tue, 06 Apr 2010 14:47:40 +0000

Screenshot of the CSS3 Please editor.

Although I have been doing a lot of work on cssSandpaper lately (JavaScript API for cross browser CSS3 animation anyone?), I have also spent a little time on an equally worthwhile project CSS3 Please. While cssSandpaper tries to give developers an all-in-one interface in which to do transforms, gradients and other nifty effects via simple CSS and JavaScript, CSS3 Please gives developers the opportunity to fill in the blanks of a stylesheet and see how CSS3 properties can be coded without the aid of JavaScript so that they work across the browsers that support it (look at the gradient section to see how different the implementations can be). It also shows how developers can use Microsoft’s proprietary filter technology to emulate many of the current CSS3 properties (even if the newer CSS3 properties is folded into IE9 along with HTML5, it may be a bit of time before we see it achieve critical mass). Take a look at the rotate section (the part I worked on), and you’ll see how very different the filter syntax is from the standard CSS3 declarations.

What tool you want to use depends on what your needs are. Choice is good, and I thank Paul and Jonathan for letting me be part of it.

Check out the official CSS3 Please website.

Cross-Browser Animated CSS Transforms — Even in IE.

zoltan — Tue, 06 Apr 2010 03:14:09 +0000

Cross-Browser Animated CSS Clock Example based on an original WebKit example by Toby Pitman. Click image above to view.

In my first article about CSS3, I introduced a new script, cssSandpaper, which allows developers to sidestep the myriad of vendor specific properties and just use one property to implement properties like transform for all browsers, including IE.

After posting the article, I saw many examples of CSS3 Transform using animations. Toby Pitman’s Old School Clock is an excellent example of how one can use a Webkit’s -webkit-transform to make a small but excellent demo. I wanted to prove that it would be easy to take this example and make it work in all modern browsers, so I did. It took 15 minutes (okay, I had to change cssSandpaper to offer scripting support, but that didn’t take too long either). I then coded a few more examples to show that some really neat things can be done using a small bit of JavaScript. Here are links to these examples:

The Cross-Browser CSS Clock based on code by Toby Pitman
A remixed movie leader countdown (actually, it uses the RCA Indian Head Test Pattern, but whatever …)
A psychedelic animated gradient

How To Do CSS3 Animated Effects?

If this was the perfect world, all a developer would need to do is use a DOM element’s style property and manipulate the appropriate camel-case CSS property. For example, if a developer wanted to script the rotation of a node, he or she would code the following:

    node.style.transform = "rotate(25deg)";

However, this is not the perfect world — after all, I am not making millions writing this blog and the current flavours of IE in use today don’t support many of the CSS3 properties. However, using cssSandpaper, one could use the following method to do the same thing:

    cssSandpaper.setTransform(node, "rotate(25deg)");

Developers can use cssSandpaper to manipulate opacity, box-shadow, and background gradients, using cssSandpaper.setOpacity(), cssSandpaper.setBoxShadow() and cssSandpaper.setGradient() respectively. All these functions take two parameters: a DOM node, and the appropriate CSS property values as described in the cssSandpaper documentation. For example:

    cssSandpaper.setTransform(node, "rotate(25deg) scale(2, 2) skew(20deg, 20deg)");
    cssSandpaper.setOpacity(node, 0.3);
    cssSandpaper.setBoxShadow(node, "10px 10px 5px #ffcccc");
    cssSandpaper.setGradient(node, "-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));")

For more information, please read the official documentation of cssSandpaper.

Caveats

When animating using transform‘s scale() function, make sure you avoid scaling objects too much larger than their original size. This is due to the fact that IE scales objects as if they were images, and scaling-up an object will make the result quite pixelated.
The -sand-gradient() function does not use Firefox’s native -moz-gradient function to produce CSS3 gradients, but a solution using Canvas which works in all Canvas enabled versions of Firefox. I will update cssSandpaper to use -moz-gradient in a future release (if anyone wants to help me get this working, please contact me via the email address at the top of this page, or by leaving a comment below).

Go to the cssSandpaper documentation to download the latest version.

My Favourite Third Party JavaScript Libraries

zoltan — Tue, 22 Dec 2009 22:15:23 +0000

Source: remix of images created by

Source: remix of images created by Everaldo Coelho and Wikimedia Commons user S.Möller.

Blogging has been a powerful tool for me to publicize code that I have written. Not only can I announce code that I want to release, I am always complimented by the fact that others like to share what they read here as well. Over the years, however, I have found bits of code others have written that have found irreplaceable in my web developer toolkit. Some of them are popular, but others are either obscure or not talked about at all. In order to give back to those who have unknowingly helped me do my job in the last decade, I am publishing the first in what hope is a series of articles about 3rd party JavaScript libraries. If anyone else would like to add to this list, please feel free to do so in the comment area below – I’d love to hear what others find as useful as what I have listed here.

Object Oriented Timeouts

I start off with a script that has been around for a while but to my knowledge is hardly ever talked about. It concerns Timeouts – which are quite important in this day-and-age of the “nifty-Web-2.0-animated-fade-in-and-out-effect”. When I starting coding JavaScript back in the mid-1990′s, setTimeout() and setInterval() did what I needed them to do – pause the application logic for a specified amount of time. However, when I starting to use the object-oriented features of JavaScript, I found a few problems:

setTimeout()and setInterval() both lose track of scope when calling a method of an object
setTimeout()and setInterval() can only pass strings and numbers to methods, not an arbitrary object.
the function call passed to setTimeout()and setInterval()is passed as a string. Parameters of the function call must be inserted by using ugly string concatenation:

setTimeout('fadeInLayer(' + (n+50).toString() +')');

However, back in 2003, a user named “algorithm” on Coding Forums came up with a great solution for Object Oriented Timeouts. Timeouts can now be done with objects and with a more elegant syntax:

function AjaxDialogue() {
   var me = this;

   // declaration of Timer object.
   me.timer = new Timer(me);

   // a timeout function using the Timer object:
   me.fadeInLayer = function (n, layerOpened, onFadeInEvent){

      ....

      /*
       * This call will set the opacity level of the node layeredOpened to n
       * percent
       */
      CSSHelpers.setOpacity(layerOpened, n);

      if (n < 100) {

         /*
          * setting a timeout of 10 milliseconds on the *public* method fadeInLayer() with the
          * parameters n+50, layerOpened, and onFadeInEvent.  Note only the first parameter
          * is not an object.
          */
         me.timer.setTimeout('fadeInLayer', 10, n+50, layerOpened, onFadeInEvent);

      }
   }
}

The question is: who is this “algorithm” person? This is brilliant code and should be credited correctly. It should also have a better home than just a forum posting.

Calendar Widget

HTML5 will have date input tags (i.e. ), complete will pop-up calendars, but until it is implemented by all browser vendors, what is a developer to do when they want users to input dates in a user friendly way? The best calendar widget I have found is dynarch.com’s Ex-“Coolest” DHTML Calendar. Although they have a cooler version, I like the former one more because it was released under the GNU Lesser Public License, so it is free as in beer as well as in freedom.

Querystring Parsing and Ajax Form Data Submission

I always found it odd that there is no built-in method in JavaScriptto grab form data from the query string from a web page’s URL. Adam Vandenberg’s Querystring Object filled in this gap with a simple script that gets this job done. Suppose your web page had the following URL:

http://me.com/mypage.html?page=3&itemsPerPage=10&query=Biker+Babes

To tell JavaScript to retrieve the value inside the CGI variable query, use the following code:

var qs = new Querystring();
var message = qs.get('query');

But how about if you have data in a form and you want to submit it using Ajax instead of the traditional post-to-the-server-and-retrieve-from-the-server way? Matthew Eernisse’s formData2QueryString() will construct a query string from a form so you can use with the XMLHttpRequest Object.

var queryString = formData2QueryString(form);

req=new new XMLHttpRequest();

req.onreadystatechange(myFunc);

req.open("GET", "/path/to/ajaxCall?" + queryString, true);

Logging

In any language, logging and debugging are necessary when it comes to discovering what is wrong with your code. While debuggers like Firebug are great for stepping into code line by line and understanding why an algorithm isn’t working right, it is sometimes more desirable to dump variables into a log, especially when trying to debug race conditions. Logging is also useful when you are too lazy to open a debugger but you don’t want your code bogged down by window.alert()‘s

My favourite JavaScript logger is Andre Lewis’ JSLog . It doesn’t rely on a specific JavaScript framework, and it also stays out of the way until I need it — it starts off as a small yellow box in the top left corner of the application’s page, and only shows up when I click on it.

Ajax History and Bookmarking

After Google Maps came on the scene, a few usability experts pointed out the drawbacks of a lot of “Ajax” Applications:

Ajax breaks bookmarking: when users click on a link that results in an Ajax call that changes the content on the screen, users may wish to bookmark the results, and will be disappointed to realize that they didn’t really bookmark the result of the Ajax call.
Ajax breaks browser history: when users click on a link that results in an Ajax call that changes the content on the screen, they may intuitively click the back button in order return to the page’s state, ande will be frustrated when this doesn’t happen.

Really Simple History (RSH): Ajax history and bookmarking library, developed by Brad Neuberg and Brian Dillard, fixes these issues by storing data inside an JavaScript “cache” so that application state can be bookmarked and so that the back button can be used to return your application to an earlier state. I have used this library on a number of Ajax heavy applications and it works extremely well.

Fixing IE

Although Dean Edwards’ /ie7/ is not perfect, it does fix a lot of CSS issues with elderly versions of IE. I use it as one of many utilities in my toolbox when working with Internet Explorer. It is an awesome piece of work and since Edwards is well known in the JavaScript community, the only thing I can really add that hasn’t been said before is “Rispek“.

sprintf()

I started off as a C programmer, and when I first started coding in JavaScript, I was happy with it’s “C-like” syntax. The thing I missed most from the C-world was (and is) JavaScript’s lack of a sprintf() function, which makes the task of formatting strings quite easy. sprintf() is more powerful and produces more human-legable code than using the + JavaScript’s operator.

K&L Productions has produced a very good version JavaScript implementation of sprintf that I use regularly. There are others, but this one is the most complete version I have found and works well enough that I haven’t found a reason to change it. Perhaps it would be worthy of a future blog post to compare implementations to see which performs the best.