I build a lot of websites and I find myself using the same helper scripts over and over. Let’s face it—websites have a lot in common! Over the years I’ve refined these scripts and I’m collecting them here for others to use and share. You may not have found a need for these because you’re relying on jQueryUI for your widgets, but I’m finding that library to be out-of-date and too bloated for my use. Maybe it’s time we all rolled our own! I chose the following list based on how often I used them.
1. Clickable Box
The popularity of individual, styled content blocks on sites has created a need for an entire div to be clickable, not just the link or button within. Now that we have lost some of the browsers that didn’t support divs inside of anchors, and we use HTML5, which allows anchors to wrap block elements, we could simply wrap an anchor around the entire div. Unfortunately, things aren’t always that simple.
For example, your active element might be an input (form submit button) instead of an anchor. Or you might be dealing with a dynamic, repeating block of content that does not give you access to the link at the start of the output (in a WordPress loop, e.g.) You may want to keep the call-to-action button clickable for usability or accessibility purposes and you can’t wrap an anchor within another anchor.
We see this most often with promotional banners in responsive layouts, where composites of text, images and active links have replaced a single graphic to allow smart resizing.
The script for dealing with this is quite simple:
2. Tab Box
I’m constantly making tab boxes. I don’t like the fact that jQueryUI needs to add 5 classes to my tab wrapper, four classes to each tab and three classes to each content box. But what bothers me more is that the tabs’ style is accomplished using png background images. I’ve got nothing against pngs, but that’s old school. Browser support for gradients is good, but even so, that look is old-fashioned.
It’s so easy to make your own!
This widget is such a core element that we require developers applying for a UI developer position in our organization to code one in under 15 minutes. It should take less than 10 minutes, but we add extra time for nerves. I like to use lists for this because of the strong sibling relationships they create, but you can easily adapt it to any structure.
4. Modal Dialog
This is a script for replacing the browser’s tooltip with one that you can style in a more attractive fashion.