When someone uses the term “content” to describe the words and pictures that will go on a website, they are telling me that, at this point in time, they have absolutely no value. At some stages of development this is ok, but for most people “content” never becomes anything more worthwhile.

And that’s just too bad.

More pseudo-form elements!

The HTML

This could also be a list, if need be, or even inputs if you wanted to do that for some reason.

<div class="radio selected_radio" id="item1"> item1</div>
<div class="radio" id="item2"> item2</div>
<div class="radio" id="item3"> item3</div>

The CSS

All we’re doing here is setting up the background images for each state the buttons can be in.

.radio{
  padding-left: 32px;
  height:32px;
  background: url('radio.jpg') no-repeat;
}

.selected_radio{
  background: url('selected_radio.jpg') no-repeat;
}

The jQuery

Embed the jquery library using the same technique  as always:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Now, all we are doing is removing the generic “selected_radio” class from all radio buttons on click, then adding the same class back to the item that was just clicked.

$(".radio").click(function(e) {
    $(".radio").removeClass("selected_radio");
    $(this).addClass("selected_radio");
});

The result

Can be seen here.

Ever need some spiffy custom checkboxes? How about for a form that cannot be submitted when none are checked? (ex. the checkboxes determine where the form will be delivered to). So, let’s say you needed a series of custom checkboxes with a disable-able submit button, ok? Well, you are totally in luck.

The HTML

Nothing special here, just a series of inputs with a class so we can style them. (We use inputs so that we can remove one step when we need to add values and send the form).

<input class="custom_checkbox" id="1">Checkbox 1</input>
<input class="custom_checkbox" id="2">Checkbox 2</input>
<input class="custom_checkbox" id="3">Checkbox 3</input>
<div id="submit_btn">submit</div>

The CSS

The beauty of using jQuery for the Interaction is that a lot of the work can be done in the CSS.

#submit_btn{
  display:none;
  height:40px;
  line-height:40px;
  width:120px;
  margin-top:20px;
  background:#000;
  color:#fff;
}
.custom_checkbox{
  display:block;
  height:40px;
  width:40px;
  border:none;
  line-height:200px;
  background: #dedede url('check_bg.jpg') no-repeat;
  color:transparent;
}
.selected_checkbox{
  background: #dedede url('check_bg_selected.jpg') no-repeat;
  color:transparent;
}

The jQuery

Embed the jquery library using the same technique as last time:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

First, you will need to create the toggle effect for the checkboxes. This can be done with the “toggleClass” method, then for our submit button to work we add an if/else statement leveraging the jQuery hasClass method. Simple and easy, huh?

$(document).ready(function() {
  $(".custom_checkbox").live("click", function(e) {
    
    $(this).toggleClass("selected_checkbox");
    
    if ($(".custom_checkbox").hasClass("selected_checkbox")) {
      $("#submit_btn").show();
    } 
    else{
      $("#submit_btn").hide();
    };
    
  });
});

The Result

Can be seen here.

To make this a usable form when implementing it on your site you can simply add another function to add a value of whatever you want to the inputs that have the “selected_checkbox” class. (Something like “true” works nicely).

Note: for this demo I am hiding the submit button and just showing it when it would be available, but that is probably terrible UI depending on how you plan to use this code.

(how about that, a second post to the nerdery! Woo Hoo!)

While building out an interface recently, I came across (stumbled, really) a very easy way to create some simple CSS3, jQuery toggle buttons.

The HTML

<div class="toggle_btn">
  <span class="toggle_on">ON</span>
  <span class="toggle_off">OFF</span>
</div>

The CSS

.toggle_btn{
  margin-left: 12px;
 float: left;
 width: 80px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 background-image: 
 -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.01, rgb(205,204,203)),
 color-stop(0.51, rgb(242,242,242)));
 -webkit-border-radius: 0.40em;
 border: solid 1px #dedede;
}

.toggle_btn .toggle_on{
 display: block;
 float: left;
 width: 50%;
 height:100%;
  color:#000;
}

.toggle_btn .toggle_off{
 display: block;
 float: right;
 width: 49.5%;
 border-left:solid #dedede 1px;
 color:#777;
 height:100%;
 -webkit-box-shadow:inset 0 2px 5px rgba(0,0,0,0.3);
 background: 
 -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.02, rgb(153,153,153)),
      color-stop(0.77, rgb(196,196,196))
  )
}

.toggle_btn.selected_toggle .toggle_off{
  color:#000;
  -webkit-box-shadow: none;
  background-image: 
 -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.01, rgb(205,204,203)),
 color-stop(0.51, rgb(242,242,242)));
 }

.toggle_btn.selected_toggle .toggle_on{
 color:#777;
 -webkit-box-shadow:inset 0 2px 5px rgba(0,0,0,0.3);
 background:
 -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.02, rgb(153,153,153)),
      color-stop(0.77, rgb(196,196,196))
  );
}

The jQuery

You will (obviously) need to be using the jQuery library - I’d recommend embedding thusly:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Then it’s as simple as a call of the toggleClass method:

$(document).ready(function() {
 $(".toggle_btn").click(function () {
  $(this).toggleClass("selected_toggle");
 });
});  

The Result

Can be seen here.

Notes

This code uses styles which will only work in webkit browsers and will not gracefully degrade. Cross-Browser compatibility can be achieved simply by adding background images or colors to the spans that make up on / off sections.

Enjoy!

Check back soon for content, it will be here… I totally promise!