Projects

Course Finder Web Widget

The Course Finder is a javascript 'widget' that allows potential students to easily locate courses on a university website.  It complements the existing navigation  and sits outside of the content management system structure to provide quick and easy access to course information.  The widget expands out from a taskbar at the bottom of the screen to provide ready access to university course information, sitewide search tools and important "quick" links.

University Course Finder Application

Client

University College Falmouth

URL

www.falmouth.ac.uk

Technologies

MySQL, CSS, XHTML, AJAX, JavaScript

Go Live date

January 2010

Project description:

The Course Finder is a web application built almost entirely from javascript and  Ajax .  We refer to it as a 'widget' .  The Course Finder Widget allows potential students to easily locate courses on the University College Falmouth website. It expands out from a taskbar at the bottom of the screen to provide ready access to sitewide search tools and important "quick" links. It was created using the mootools JavaScript library.

If you want to see what it does then visit the University College Falmouth website and try it for yourself.  The beauty of it is that it can work with ANY website that can support the mootols libraries and where we can establish connections with any underlying database.

The next step is to turn it into an iPhone web application and make it mobile friendly.

Outputing html

Though most of the functionality is client side i.e. in the  users web brower, we still needed to output the course data as html. The skeleton code for the fixed taskbar was added to the template and a custom module was written to extract the course data from the database and output it as a nested html list. Using progressive enhancement like this meant that little extra work was needed to make the data available to clients without JavaScript enabled. This is important for accessibility.  If Javascript is turned off the same information is available, albeit in a slightly less user friendly form.

Styling the task bar

During the design process it was agreed that the task bar would be fixed to the bottom of the screen using a position: fixed css rule.  As usual nothing  is ever simple with browser bahaviour and there were some problems with a Firefox bug causing flickering content which need a work around. We also used a css expression technique to work around IE6's lack of position: fixed support.

The Quick links and Course finder flyout behaviour was implemented using some bespoke mootools code for opening and closing the windows. The Squeezebox class was used for the help link.

Coding the Course finder

The Course finder itself was also written as a bespoke mootools class. We used the Scroller class for the scrolling effect, the very flexible simple tabs class for the category tabs and custom code based on the autocompleter widget for the text search. The text search reads text from the dom during initialization to create an index then searches through this index when text is entered in the filter box.

Cross Browser Issues

Web development wouldn't be quite the same fun challenge without some cross browser issues to work around. Apart from the above mentioned issues with position:fixed and flickering, the main problem was with the scroller's height calculations inside a position fixed div. This was caused by a bug in the version of mootools we were using (since fixed upstream). As a mootools upgrade would have been too disruptive, we backported the fix by monkey patching the mootools Element class.

• < Prev
• Next >