Author Archive

jQuery UI 1.7 – The User Interface library for jQuery – reviewed

Thursday, February 25th, 2010

jQuery UI 1.7 by Dan Wellman

jQuery UI 1.7 by Dan Wellman

jQuery UI is the official interface library for jQuery, the leading JavaScript framework. Dan Wellman’s book, jQuery UI 1.7 – The User Interface library for jQuery, is intended to be the ‘missing manual’ – fleshing out the online documentation with examples, tutorials, and an in-depth look at the API. The book is supported by many great code samples, which are available at Packt’s support site.

There are thirteen chapters in total, covering the high-level widgets (such as the accordion) and low-level widgets (such as the draggable and droppable interaction helpers.) In addition, the CSS and effects frameworks are covered too.

No knowledge of jQuery UI is assumed, although it is expected that the reader will have a decent grasp of HTML, CSS, and jQuery. The book is pitched at the beginner to intermediate level jQuery UI user, although I would think that even advanced users will find that it contains valuable information.

The structure of each chapter is similar. Starting with the most basic example to get you up and running, more options are gradually introduced to give you a greater level of control, with plenty of code samples to help you along. Most chapters finish with a more advanced scenario, showing some really imaginative uses in which jQuery UI shines. For example, the drag and drop chapter walks the reader through creating a simple game.

The book also takes the time to describe some of the rare occasions where cross-browser issues might rear their heads, along with the fixes. It would have been easy for the author to skip past those parts, but I appreciated this honest approach. It may not be the sexiest subject matter, but it’s something that we as web developers deal with on a day-to-day basis, so it was great to see it tackled in the book.

One of the major strengths of jQuery UI is its online documentation; there are several examples for each widget, and options and methods are well documented. I was initially a little concerned about what the book could add to this, but my concerns were unfounded. Every chapter revealed methods and options that I had missed, along with examples that used the library in ways I would never have thought of.

One of the biggest revelations to me was the chapter relating to the CSS framework. Although I’d used Themeroller before, I’d never appreciated the full extent to which it can be used, creating a consistent look and feel throughout your site and containing many valuable helper classes.

One area where I would have liked to see some information is that of extending jQuery UI. I would have liked to have read about writing your own widgets, inheriting from $.widget, but I appreciate that this would probably be out of scope for this type of book.

Although jQuery UI 1.8 is just round the corner, I would have no hesitation in recommending this book. There is a wealth of information here, and it is presented in such a way that the reader is given a real understanding of the library, meaning that you won’t have any problems when the next version rolls along. In fact, if you read this book now, you’ll be well prepared for all the goodies that 1.8 contains!

So if you’re looking for a jQuery UI book, you should definitely check this one out!

Tags: , ,
Comments

Serving html5 videos with Apache

Wednesday, February 24th, 2010

Just a quick tip today – the solution to a bit of a ‘gotcha’!

While writing the jCaps plugin, we came up against an issue where .ogv videos were refusing to load, but bizarrely, only in Firefox. In its place was a grey box where the video should be, with a question mark in the middle.

After a little bit of head-scratching, we found the solution – Apache wasn’t sending the right MIME type with the video, resulting in a Firefox fail. The solution is to put the following AddType directive in your .htaccess or httpd.conf file (mod_mime is required):

AddType video/ogg .ogv

Make sure that you restart Apache if you put it in httpd.conf.

On another note, jCaps is nearing another release – hopefully this week. It will take into account some of Bruce Lawson’s wishlist, and includes a big refactoring of many elements of the plugin, including the API. It should be leaner, meaner, and easier to use! In the meantime, you can fork or download the project at Github.

Tags: , ,
Comments

Atwood’s Law and browser features

Friday, February 19th, 2010

“Any application that can be written in JavaScript, will eventually be written in JavaScript.” – Jeff Atwood

Wednesday’s blog post introducing the jCaps plugin (which aims to provide accessible captions for HTML5 videos) sparked an interesting discussion with John Foliot on Twitter the other night.

John brought to my attention the WAI’s Media TextAssociations specification, which will tell browsers how to associate alternative content with rich media, such as video. Little did I know that while I was developing a “home-made JavaScript solution” (which the spec is specifically designed to counteract), the task force was carrying out a meeting to move the spec forward to the testing and implementation stage.

If there’s a W3C endorsed spec which will handle the issue, then great! My concern, though, is the length of time it will take for the specification to be implemented by browser manufacturers. Even if we’re only months away from a spec, it could be much longer until it is reliably implemented.

So in a similarly self-aggrandising way, I’d like to propose McCollum’s law: “If a browser feature which should exist, doesn’t, someone will write a javascript implementation.”

Witness the excellent jQuery UI library. HTML5 provides a datepicker element, a slider element, and native drag and drop functionality, but until these elements are natively supported across the majority of browsers, we’re stuck with home-made JavaScript.

Finding the right compromise between pragmatism and idealism is essential for modern web development.

What are your thoughts? How do you find a balance? Should jCaps development proceed, or should we wait until standards catch up?

Tags: , , , ,
Comments

jCaps – easier html5 video captions with jQuery

Wednesday, February 17th, 2010

It’s been a good year so far for html5 video. You might have noticed that YouTube and Vimeo have introduced their own player, and with the iPad’s lack of flash support, we are likely to see the tag used in more and more places, at least as an option alongside Flash.

Bruce Lawson of Opera recently showed off a proof-of-concept subtitling system for html5 video. It’s a great concept, and I’m happy to present the work I’ve done on the subject, turning it into a jQuery plugin, with a few extra enhacements. I hope that doing this will provide an easy API for front-end-developers.

Check out the demonstration here.

The latest version has the following features:

  • Multiple language support
  • Public methods to show, hide, or toggle captions
  • Ability to show full transcript in the selected language

The HTML

Make sure you’re using the HTML5 Doctype. Link to the stylesheet, jQuery and the plugin as below:

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="jcapstyles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="jquery.jcap.js"></script>
</head>

Next, embed the video in the page, doing something like the following. I’m using Bruce’s slightly silly sample video here, since it has a multi-language transcription already!


<video id="myVid" width="400" src="http://www.360innovate.co.uk/blog/leverage-a-synergy.ogv" autobuffer controls>
<p>This page is to demonstrate open HTML5 video, so if you're not using a browser that can display the open Ogg Theora codec, there's not much to see. Sorry!</p>
</video>

Finally, create the transcript HTML.


<div id="transcripts">
<div lang="en">
<p>
<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein and I'm a Doctor of Science at the University of Science</span>
</p>
<div/>
<div/>

Note that you must give the child div a ‘lang’ attribute.

The JavaScript

This is where the action happens. First, pass an anonymous function to jQuery to execute as a callback for when the document is ready. Then, call the jCaps plugin, with an object literal as a parameter. You should pass the following as a bare minimum, but there are other options that can be passed – see the code file for details.


$(function(){
$("#myVid").jCaps({
transcriptsDiv: $('#transcripts'),
language: $('select[name="changeLang"]').val()
});
})

Note that you must pass a transcripts div as a bare minimum. This will hide the transcripts div from view. By default, captions are not shown. You can switch it on by attaching the following methods to a click event on a button, or link for example:


$('#toggleCaptions').click(function(){
$('#myVid').jCaps.toggle();
});


$('#switchOn').click(function(){
$('#myVid').jCaps.switchOn();
});


$('#switchOff').click(function(){
$('#myVid').jCaps.switchOff();
});

switchOff() and switchOn() should be self-explanatory; toggle() will show the captions if they are hidden, and vice-versa.

You can change the language of the captions by calling the switchLanguage method:

$('select[name="changeLang"]').change(function(){
$('#myVid').jCaps.switchLanguage('ja');
});

There is one final public method at present: swapOut(). This shows the full transcript in the selected language when activated.


$('#transcript').click(function(){
$('#myVid').jCaps.swapOut();
});

That’s it! You can view the demonstration here.

Please note that this is very experimental, and might change or break at any time. You can download the source at github, and of course I would welcome any feedback or pull requests. Credit for the original script goes to Bruce Lawson, Philip Jägenstedt, and Daniel Davis.

Tags:
Comments

How we built 360innovate.co.uk

Thursday, February 11th, 2010

As you might be aware, we recently re-launched the 360innovate website. We thought that some of the geekier blog readers out there might be interested in the technologies we used to put the site together!

The 360innovate website marked a departure for us; it was the first website that we have built using Django, the Python based web framework. We’ve built many, many sites using PHP, so why did we decide to change that for this development?

Put simply, Django is a joy to work with. It combines superb flexibility with out-of-the-box features to provide a great platform to use as a base for bespoke web development. It espouses a DRY philosophy – “don’t repeat yourself” – which means that changes to the site can be quickly programmed and rolled out.

It also saves a great deal of time on back-end development, as it comes with an admin area that is totally customizable to the users’ needs. This means that more time and effort can be redirected to the front-end development – where the spit and polish provides a great end-user experience.

Speaking of the front-end, we once again used jQuery, jQuery UI, and a sprinkling of Flash to provide the interface for the site.

This combination of technologies wouldn’t necessarily be used for every project that we take on, but where it’s appropriate to do so, it allows us to provide a better site within the same budget.

So if you’re thinking about a bespoke web development project, please get in touch!

Comments

Accessible AJAX forms with jQuery

Monday, June 22nd, 2009

Unless you’ve buried your head in the sand for the last few years, you must have noticed the increased use of Javascript on the web.

One of the most common criticisms levelled against the increased use of Javascript is that it makes accessible web design difficult, or even impossible. This doesn’t have to be the case though – let’s take a look at how progressive enhancement techniques can improve usability without sacrificing accessibility.

The concept is straightforward – make sure that everything works without Javascript, then use Javascript to add the ‘icing on the cake’.

Basically, all the content and functionality on your site should be accessible to your users, regardless of whether Javascript is switched on or off. This not only has benefits for accessibility, but for SEO too.

In this example, I’m going to take a very plain, simple form and add a little bit of magic!

The HTML

<div id="form">
    <form action="" method="post" name="contact-form">
        <label for="name">Your name:</label>
        <input type="text" name="name" id="name" />

        <label for="email">Your email address:</label>
        <input type="text" name="email" id="email" />
        <input type="submit" name="submit" value="submit" />
    </form>
</div>

<div id="results"></div>

The jQuery

$(document).ready(function(){
    $('form[name="contact-form"]').submit(function(event){
        event.preventDefault();

        var myName    = $('input#name').val();
        var myEmail   = $('input#email').val(); 

        $.post('process.php', {name: myName, email: myEmail},
            function(data){
                $('div#results').html(data).fadeOut().fadeIn();
            }
        )
    })
})

Hopefully there’s nothing too scary in the HTML; a couple of input fields and an empty div that will hold our results.

In the javascript, the important parts are lines two and three. Notice that we’re intercepting the form submission, and passing the event as an argument to the following function.

Next, we call event.preventDefault(). This stops events from bubbling up the DOM, in this case, preventing the form from being submitted.

Next, we fire off an AJAX request to process the form. In this case, we’re just echoing out the values that have been entered by the user, but this could be a contact form, a login form, an ‘add to cart’ button – the possibilities are endless!

You can view the demo here.

Note that the form works with or without javascript. Test it yourself by turning javascript off!

I hope this explains the basics of progressive enhancement. For further reading, check out wikipedia’s entry on the subject.

Tags: ,
Comments

PeriodicalUpdater for jQuery

Monday, March 9th, 2009

Here at 360innovate we’ve benefitted greatly from free and open source software.

Whether it’s the web server our sites run on or the operating system that runs the web server, free and open source software plays a huge part in the industry we work in.

And so, we present this jQuery plugin in an effort to give a little something back!

The Prototype javascript library features a very useful PeriodicalUpdater() function. This loads content at specified intervals, but if the content being pulled in doesn’t change, the interval gradually increases.

There are several benefits to this approach – it saves bandwidth, and can reduce the CPU usage on the client’s machine.

Unfortunately, there’s been no way to replicate this using jQuery…until now!

Let’s take a look at how it works.

Step 1 – Include the latest version of jQuery and the plugin.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.periodicalupdater.js" type="text/javascript"></script>

Step 2 – call the function with the necessary options and a callback function

$(document).ready(function(){
   $.PeriodicalUpdater({
      url : 'random.php'
   },
   function(data){
      var myHtml = 'The data returned from the server was: ' + data + '';
      $('#results').append(myHtml);
   });
})

Here’s a list of all the options you can set:

url
URL for the ajax request. (Required!)

method
Can be either get or post. (Or GET or POST!)

sendData
Array of values to be passed to the page – e.g. {name: “John”, greeting: “hello”}

minTimeout
Starting value for the timeout in milliseconds.

maxTimeout
Maximum length of time between requests.

multiplier
Sets the amount of decay between ajax requests. If this is set to 2, the length of time between each request will double while the response doesn’t change.

type
Response type – can be text, xml, json etc – as with jquery.get or jquery.post.

Step 3 – Stop the requests!

Finally, you might want to stop ajax requests from PeriodicalUpdater – you can do so like this (assuming you had a link with id stop):

$('a#stop').click(function(e){
   e.preventDefault();
   clearTimeout(PeriodicalTimer);
})

We hope you find this plugin useful. It’s dual licensed under the GPL and MIT licences (just like jQuery), so please read them before you use this plugin.

View the demonstration

Download the plugin

Tags: ,
Comments