javascript wonderland

There is a lot you can do with JavaScript and DHTML. You can have custom pop-up messages, you can make things move around the screen, you can have pop-down menus, you can even send data to web servers (AJAX). But, it takes some work to get everything running smoothly. Especially when you want a certain user interface to work great no matter what browser is used.

jQuery is a great solution for JavaScript and user interface problems. They have a wonderful library of visual affects and more. Just take a look at their demos to get a feel for what I am talking about (in terms of UI). Then, if you want to integrate it into your own site, just download the code and plug it in (with a few tweaks and bumps - but that is expected, right?). It is a great way to get good functionality going quickly and reliably in a web site.

CSS: background-position

Today I discovered a new trick I can use for background images in CSS. It is based on the background-position property. This allows the designer to offset a background image used in an object (like a span or div).

I was looking at the images that Google uses in Gmail and noticed that some of their icons come all together in one larger PNG file. They form an array of icons. After some searching the web I landed on this article that explained how to select a single image from an image array: http://www.guistuff.com/css/css_imagetech1.html

Pretty neat. It reduces page load-time (because you load one image instead of multiple ones, and each file comes with overhead transaction data) and removes the need to pre-cache images for DHTML. A little bit of JavaScript and CSS and you're all set. It is going to be a handy thing to have in my design toolbox.