Using keypresses as an alternate way to to navigate through websites  is a great way to make sites more accessible. For instance pressing 'p' takes the user to the previous page, while pressing 'n' takes them to the next. The benefits of using jQuery to achieve this are:

1. Concise code
2. Easy to implement various functions on keypress
3. Works on IE, Firefox & Safari

DETECTING THE KEY CODE

To detect which key a user has pressed you need to set up a function that returns an ascii code each time a key is pressed. A full table of ascii codes is available here. The tricky part to this is that Mozilla and Safari define the value as charCode, while IE defines  it as keyCode. The following script is based on the 'n' key and 'p' key, it takes the links from the 'Previous' and 'Next' buttons on your site and changes page when the key is pressed. Also note that it is important to detect for both the lower-case and upper-case letter as the ascii codes will be different for each.

SOURCE

//process this function whenever a key is pressed
$(document).keypress(function (e) {
//Next
//if the keyCode or charCode is 110 (lower case n) or 78 (upper case N)
if (e.keyCode == 110 || e.charCode == 110 || e.keyCode == 78 || e.charCode == 78){
//grab the href attribute from the link with the id "next_link"
var next_link = $("a#next_link").attr("href");
//if the next link exists (i.e if it's not the last page)
if(next_link){
//go to the next page
window.location = next_link;
}
}
//Previous
//works exactly as the above example but for the 'p' and 'P' keys
if (e.keyCode == 112 || e.charCode == 112 || e.keyCode == 80 || e.charCode == 80){
var prev_link = $("a#prev_link").attr("href");
if(prev_link){
window.location = prev_link;
}
}

});

You must have the jQuery library installed on your site to run this script. For more info about jquery visit the site: http://jquery.com/

I was recently confronted with the problem of having a single html form with three different submit buttons, each button submitting the form data to a different php script. This is obviously impossible with html alone, as a form can only have one 'action' attribute, which dictates the URL of the file that the form's data is submitted to.

I searched around on the web for an easy way to implement this and found various examples. One of the best examples I found was on CoderLab's blog: Multiple submit buttons on a multiple blog which uses javascript to apply a different action attribute to the form depending on which button is pressed. Each button in the form has it's own onClick function like so:

<form name="myForm" id="myForm">
Search: <input type="text" id="wrdSearch"/>
<input type="button" name="google" id="google" value="Google" onClick="SendTo(this.id)"/>
<input type="button" name="msn" id="msn" value="MSN" onClick="SendTo(this.id)"/>
<input type="button" name="yahoo" id="yahoo" value="Yahoo" onClick="SendTo(this.id)"/>
</form>

(Visit the page to see the javascript that goes with it: http://blog.coderlab.us/2005/10/04/multiple-submit-buttons-in-a-form/)

As I already had jQuery installed on the site, and the CoderLab script would still need some modification to serve my specific purpose, I decided to see if I could find a simpler way to achieve a similar result using jQuery. The form on my site was a lot more complex, with many fields etc. So what I really needed was a script that would submit all the form data to each of the 3 php scripts depending on which submit button was clicked.

Firstly, I stripped the onClick functions out of the form and removed the name attributes from the buttons too, like so:

<form id="myForm" method="post">
Search: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
<input type="button" id="button3" value="Submit to script 3" />
</form>

I then wrote the following jQuery script to change the form's action attribute accordingly and submit it when each button is pressed:

$(document).ready(function(){

$("#button1").click(function(){
$('form#myForm').attr({action: "script_1.php"});
$('form#myForm').submit();
});

$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});

$("#button3").click(function(){
$('form#myForm').attr({action: "script_3.php"});
$('form#myForm').submit();
});

});

The script should work on any browser that is compatible with jQuery (see here: http://docs.jquery.com/Browser_Compatibility)

For more information on installing and using jQuery visit the website: http://jquery.com/

The Comus Productions website has recently undergone a major upgrade. It now has loads of new Flash presentations which incorporate a new set of Comus stings and idents.

The site is now fully content managed with the Admin76 content management system by 76 Creative, so all the text, images and video content on the site can be easily updated by the site's owner.

I used the javascript jQuery library a lot throughout the site, to fade text in and out, fade images and to switch slideshows and videos too.

A prominent feature of the site is the recreation of the Photoshop Lens Flare as an animated flash movie, which I adapted from this lensflare project on FlashDen. It was this lensflare that inspired the most experimental flash movie of the site - the Comus Viewfinder which can be seen on the links page.

Other Flash features include a more corporate style flash presentation on the services page and an explosive ident on the home page!

Visit the site: www.comusproductions.co.uk