This post by Nate Dudek was originally published to his blog, Caffeine Dependency Injection, on 11/2/2009.
Recently, I was working on a website redesign project for a client. They wanted to keep some of their product catalog, shopping cart and back-end pages, but redesign their homepage while keeping the catalog’s borders and styles. The existing design had a drop shadow around the main content along with several borders. I designed a new CSS-based layout for the page, and instead of trying to modify all of the existing drop shadow and border graphics to fit, I decided to use jQuery and the LiquidCanvas plugin to keep the page size small while retaining all of the visual effects.
LiquidCanvas can be used to draw all sorts of graphics without any actual images, such as drop shadows, rounded corners, gradients, borders, and shapes. The developer’s demo page shows a lot of examples.
I’ve seen a lot of forum posts discuss how the plugin looks great in Firefox and IE8, but fails to render in IE6 and IE7. If you are here looking for a LiquidCanvas fix for IE6 and IE7, it’s included in this post. You’ll kick yourself at how easy the fix is.
Getting Started
To start using LiquidCanvas in your site, download jQuery and the LiquidCanvas plugin from their respective sites. Copy the scripts to a location that your website can access (I’m using a subdirectory called js in my examples), and then add the following lines to the header section of your HTML:
[code language="html"]<head> ... <script type="text/javascript" src="/js/jquery-1.3.2.js" </script> <script type="text/javascript" src="/js/liquid-canvas.js"</script> <script type="text/javascript" src="/js/liquid-canvas-plugins.js"</script> ... </head>[/code]
Most jQuery scripts are loaded using the $(document).ready() function. However, IE6 and IE7 choke on this with LiquidCanvas, so you need to use $(window).load() instead.
To start drawing, use a jQuery selector to select a div or other container. Call the liquidCanvas() function on your selection and pass in parameters to add your visual effects.
To produce a simple rectangle with a border:
[code language="javascript"]$(window).load(function() {
$("#container").liquidCanvas(
"border => rect");});
[/code]
IE6/7 Fix
Even when using $(window).load(), IE6 and IE7 won’t render the effects. The fix for these browsers is incredibly simple – you simply need to add one more script that’s included with the LiquidCanvas package:
[code language="javascript"] <!--[if IE] <script type="text/javascript" src="/js/excanvas.js"</script> <![endif]--> [/code]
That’s it. The [if IE] statement that wraps the script include tells IE to load the script while all other browsers simply ignore it. This one line makes your visual effects fully cross-browser compatible. Now that we’re up and ready to go, let’s play around with some examples.
Examples
To fill a rectangle with a color (we used blue, but gray is the default if you don’t specify one), you can use:
[code language="javascript"]$(window).load(function() {
$("#container").liquidCanvas(
"fill{color:#39c} => rect");});[/code]
To pass in multiple parameters, you can use an array. To fill a rounded rectangle with gray and add a drop shadow:
[code language="javascript"]$(window).load(function() {
$("#container").liquidCanvas(
"[shadow fill] => roundedRect");});[/code]
Even in an array, you can set your colors and other options. Here, we’ll add a semi-transparent gradient and a blue border to a rectangle:
[code language="javascript"]$(window).load(function() {
$("#container").liquidCanvas(
"[gradient{from:rgba(255, 255, 255, 0.2); to:#888;} border{color: #00f}] => rect");});[/code]
To create the gray drop shadow and light gray border around the white main content container on my client’s site, we used the following snippet:
[code language="javascript"]$(window).load(function() {
$("#container").liquidCanvas(
"[shadow{color:#333} border{color:#eee} fill{color:#fff} ] => roundedRect{radius:5}");});[/code]
Creating Your Own Effects With Custom LiquidCanvas Plugins
If you really want to dive in, you can create your own effects by writing your own LiquidCanvas plugins. On the demo page, for example, the final example uses a user-written effect called “Mandala” to create a circular background effect.
[code language="javascript"]
$("#container").liquidCanvas(
"fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})");[/code]
To accomplish this, the author uses the .registerLiquidCanvasPlugin() function and writes the custom painting code:
[code language="javascript"]$.registerLiquidCanvasPlugin({
name: "mandala",
paint: function(area) {
var opts = this.opts;
var ctx = area.ctx;
var min = area.width > area.height ? area.height : area.width;
var trans = min / 2;
var rad = trans / 3;
for (var i = 0; i < 10; ++i) {
area.save();
ctx.translate(area.width / 2, area.height / 2);
ctx.rotate(i * 2*Math.PI / 10);
ctx.translate(trans - rad, 0);
area.width = 10;
area.height = 10;
this.action.paint(area);
area.restore();
}
}
});[/code]
There several things to focus on in this function. The key variable is “area.” By modifying properties like the height and width of the area variable, you can manipulate what gets drawn. The “ctx” variable, which is really the area.ctx property, allows you to perform other functions on the drawing such as translating (moving where the image gets drawn) and rotating. The best way to see how this plugin works is to modify various things in the function and see what happens to your drawing. Once you get the basics down, you’ll be well on your way to creating your own custom effects.
Conclusion
There are lots of possibilities with this plugin to create great visual enhancements while keeping your page size small (no images!) and cross-browser compliant. Add it to your toolbox today!
No comments yet
No comments yet.
RSS feed for comments on this post. TrackBack URL
Leave a comment