sltwtr labs.

We are constantly experimenting with design and technology.

This space is devoted to our experiments, pet projects, and tibits that may help others.

It grew out of our desire to learn, study, and tinker. Some ideas are new and fresh, others are just commentary on what already exists. If you have any questions about any of it, we'd love to hear from you: bloop@sltwtr.com

Checkboxes suck.

Eric | 2.21.2012 CSS3 jQuery

That's right, they suck. They suck all of the goodness out of a nicely styled form. If you have experience working with HTML forms, then you know the frustration of styling beautiful input, textarea, and select elements, and being stuck with the same boring html checkboxes we've seen since the 90's. When we were putting together the beautiful real estate search forms for David M. Kim, the standard HTML checkboxes just weren't going to cut it.

So we made our own.... kind of. It's still your basic HTML form, and you still use label and input tags, but with the help of CSS3 and a little jQuery magic, you can see a huge difference.

We are proud to share this with the web design community, and hope you find it useful.

The HTML

<form>
    <label class="check_label" for="good">
        <input checked="checked" name="good" type="checkbox" />
    Way better.</label>
    <label class="check_label" for="better">
    	<input checked="checked" name="better" type="checkbox" />
    A world of difference.</label>
    <label class="check_label" for="best">
    	<input checked="checked" name="best" type="checkbox" />
    Night and day.</label>
</form>

The CSS

label.check_label {
	background:url(http://sltwtr.com/labs/check-on-the-check/sltwtr-check.png) no-repeat 0px -30px;
	padding-left:32px;
	height:24px;
	padding-top:6px;
	margin:8px 12px 0 0;
	cursor:pointer;
}

label.selected{
	background:url(http://sltwtr.com/labs/check-on-the-check/sltwtr-check.png) no-repeat 0px 0px;
	padding-left:32px;
}

label.check_label input {
	display:none;
}

The jQuery

function checkonthecheck($label) {
    if ( $label.hasClass('selected') ) {
        $label.removeClass("selected");	
        $label.children("input").removeAttr('checked');
    } else {
        $label.addClass("selected");
        $label.children("input").attr('checked', 'checked');
    }
}
$("label.check_label").click(function() {
    checkonthecheck( $(this) );	
});

flickrbox

Eric | 8.05.2011

Flickr is arguable the web's best image hosting service. It dials in really well with a lot of other services and fuels some sweet SEO practices. Unfortunately, the script that they offer for an embeddable slideshow is Flash, which as we all know, is not necessarily desireable for all projects anymore. Our solution was to build a Flickr gallery viewer using the gallerific jQuery image slideshow. This was originally developed for Municipal Winemakers' site, but has been implemented also on the site for the Mutiara Laut Mentawai Yacht Charter, as well as WaterWays Surf Adventures. Implementing video has been a challenge, but will be coming very soon...

Feel free to grab the code and use it wherever you would like.

Back to Top