Week Six JavaScripting Notes

Tonight we are going to look at JavaScript libraries to gain exposure to potential implementations.

Working with JavaScript Frameworks

We have already been exploring the JQuery framework, but we'll take a look at some other JavaScript frameworks as well. We'll start with the Highslide framework that is fully presented at http://highslide.com/.

Let's try using the framework together in class.

A slide is made available for Highslide presentation via an Anchor tag like:
<a href="images/my_image.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/my_thumbnail.jpg" width="176" height="176" alt="my description" /></a>

Also note how the HighSpace author does a nice job of suggesting adjustments you might want to make by providing properties at the top of the JavaScript file:

lang : {
	cssDirection: 'ltr',
	loadingText : 'Loading...',
	loadingTitle : 'Click to cancel',
	focusTitle : 'Click to bring to front',
	fullExpandTitle : 'Expand to actual size (f)',
	creditsText : '',
	creditsTitle : '',
 	restoreTitle : 'Click to close image, click and drag to move.
                    Use arrow keys for next and previous.'
},
// See http://highslide.com/ref for examples of settings  
graphicsDir : 'highslide/graphics/',
expandCursor : 'zoomin.cur', // null disables
restoreCursor : 'zoomout.cur', // null disables
expandDuration : 250, // milliseconds
restoreDuration : 250,
marginLeft : 15,
marginRight : 15,
marginTop : 15,
marginBottom : 15,
[...]

Let's try changing some of those together to see what they do for us.

If only every Framework were so easy to use!

We'll focus on just the slide presentation feature from the HighSpace framework and create our own simple example.

Example of a single feature framework add-on

Some JavaScript code documents available on Web incrementally add visible features to a website. For example, take a look at a JavaScript document available on-line to support vertical scrolling (latest full version website here). Note once again how useful parameters are made available at the top of the code file.

Note the curious implementation of a scroll call:
<a href="#bottom" title="scroll to bottom"><img src="./logo.png" name="#bottom" width="176" height="176" alt="apc collage" border="0" /></a>

The use of a pound sign in front of bookmark target is usually reserved for the href attbribute value. The author has chosen a familiar syntax and yet placed the syntax with a non-standard attribute value. When you use a framework, you should ask yourself if there is bound to be collisions between framework use and any other technology you might use.

We implemented the vertical scrolling feature in class to recreate our own example here.

Let's take a look at some of the JavaScript features previous students of this class borrowed from available libraries and frameworks they found on-line:

Photo Scroller feature

Maureen based her project a photoscroller feature as demonstrated here. Only the content for image #6 has been uploaded.

The Javascript is in a file named photosmove.js

Give it a try on your own page.

JQueryRotate JQuery Plug-in

A plugin is a means by which you can incrementally grow a framework without having to include all features at once. JQuery plug-ins have been developed because JQuery provides a simple plug-in interface. Let's try using one together.

The JQueryRotate plug-in lets you add rotations to images on a webpage.

Doug has provided some base code we can play with to try out JQuery image rotations with and without a JQuery plug-in.

A Dragging Framework

Christelle provided the dragdealer framework as an example of a framework that actually has good documentation and an explicit API. Let's try out using it together in class as an example of using a framework from scratch.