Our thinking

My colleague Paul and I have been discussing a feature of the jQuery library that really helps when adding events to a web page.

Historically using the click event or binding events to dynamic content could be tricky. This is because it’s possible to bind more than one event to an element. Care needs to be taken otherwise another event might be added to existing elements on the page.

The live event handler is an alternate method to bind or click, for example:

$("li").live("click",function(){
// code here
});

This means all current and future list items will now have this event handler bound to them. This is great because there’s no longer the need to manage bound events to new content.

Which got us arguing, what does ‘live’ stand for? Is it:

‘live’ – meaning it handles event binding on the fly as new elements are added, rather than having to call a function that binds events to the new items after finishing (think how a football match can be aired live – it’s happening in real time)

Steven

Or:

‘live’ – is an event that lives on regardless of whether content is generated or existing.

Paul

Let us know before this gets ugly! – just leave a comment below saying which of us you think is right – or even giving us your own take on it!

Here’s something I picked up by experimentation during the development of a CRUD system, which managed users, inventory, orders and reservations. The question was, how do I have page specific forms to add, update, and delete entries?

The answer was the accordion.

The problem with using the accordion in this way from a usability perspective is it won’t save the tab you were on if you post a form (e.g. if you have an update form in tab 2, where you select an ID from a drop-down box and submit to populate the form fields with the information in the row selected).

“Remembering” the state can be achieved with a PHP statement:

if (!$_POST['update_select'] && !$_POST['delete_select']) {
?>
<script type='text/javascript'>
$(function() {
$('#name_of_accordion').accordion({ collapsible: true, active: false });
});
</script>

This code says if an update or delete id select form hasn’t been posted, initialise the accordion without any tabs active. (active: false).

Right underneath that, add the next conditional statement:

}
if ($_POST['update_select']) {
?>
<script type='text/javascript'>
$(function() {
$('#name_of_accordion').accordion({ collapsible: true, active: 1 })
});
</script>

This statement adds a new property, active: 1. This tells the accordion that this tab should be open when the page loads (note: if you’re wondering why it’s 1 instead of 2, it’s because arrays always start at 0).

The last part of the statement handles the delete selector:

}
elseif ($_POST['delete_select']) {
?>
<script type='text/javascript'>
$(function() {
$('#name_of_accordion').accordion({ collapsible: true, active: 2 });
});
</script>

This statement does exactly the same as the update_select section, but corresponds to the delete selector. Now simply close off the elseif statement and you’re ready to roll:

}
?>

I hope this tip helps you as much as it helped me!

Photo credit: Crevier via Flickr/Creative Commons

In an age where user feedback has become so popular, accessible forms have become that much more important – find out exactly how to keep your forms as accessible as possible.

Whilst recently updating our advanced CSS training course to include some CSS3 commentary, I became inspired by the amount of CSS3 that’s already out there. Browsers such as Firefox and Safari have really started embracing CSS3, which means that there’s a significant audience that you could be demonstrating your CSS3 skills to.

I have put together Top 10 CSS3 commands, some of which are fairly widely known and also some that personally I find interesting (Box-sizing – Old school box model).

Please let me know what you think and also any sites that you’ve seen using CSS3 as well.