ClassBehaviours, the javascript framework based on class-name parsing

"ClassBehaviours" is a framework for simple scripted DHTML behaviours which are easily applied through the class-names in an HTML document.

"ClassBehaviours" will scan every html-element in the page for certain keywords in the classnames and apply scripted behaviour accordingly.

"ClassBehaviours" are formatted as jQuery plugins and can be implemented without writing a single line of code..

Introduction

Woolly@WoollyMittens.nl,
posted on 2008-04-05 16:12,
about ,category,.

Inline javascripts tend to be hard to maintain in the clutter of code that forms when web-developers and web-designers have to work in the same documents.

The classBehaviour script was written in an effort to separate the markup of a page from the scripting and thus eliminate inline scripting altogether.

ClassBehaviour effects can be implemented without writing a single line of code.

The Idea Behind It

ClassBehaviour is my method for the rapid development of accessible yet dynamic browser-based user-interfaces.

Not a Framework

ClassBehaviour is not yet another javascript framework. I abhor the needless flood of "frameworks" trying to make javascript "easier" by adding another layer of abstraction. Instead, what I call, "classbehaviours" are simple scripts which are easily applied through the class-names in an HTML document.

What It Does

To apply event-handlers to html-elements, classnames are used. The classBehaviour script will scan every html-element in the page for certain keywords in the classnames and apply event-handlers accordingly. The "classbehaviours.js" contains the main parsing section of the script, while the "classBehaviours.js" contains all the seperate behaviours required on the page. These seperate functions can be removed and added freely to avoid the lengthy download of the complete collection.

The example below explains how a simple dhtml effect would be implemented:

There are blinking words in this sentence.

<html> <head> <title>Blink Example</title> </head> <body> <p> There are <span class="blink">blinking</span> <span class="blink jiffy_2">words</span> in this sentence. </p> <script type="text/javascript" src="./scripts/jquery.js"></script> <script type="text/javascript" src="./scripts/jquery.classbehaviours.js"></script> <script type="text/javascript" src="./scripts/jquery.classbehaviours.blink.js"></script> </body> </html>

The script works best if it doesn't have to wait for the whole document including all graphics and plugins to be loaded. Therefor the optimal place is near the bottom of the documents with the "classbehaviours.js" preceding "classbehaviours.js".

The example below is also a valid way to include the scripts, however the parser will rely on the "onload" event to start the effects. This may introduce a noticeable delay in pages rich in media.

<html> <head> <title>Blink Example</title> <script type="text/javascript" src="./scripts/jquery.js"></script> <script type="text/javascript" src="./scripts/jquery.classbehaviours.js"></script> <script type="text/javascript" src="./scripts/jquery.classbehaviours.blink.js"></script> </head> <body> <p> There are <span class="blink">blinking</span> <span class="blink jiffy_2">words</span> in this sentence. </p> </body> </html>

How It Works

Inside the classBehaviour include the following function scans all the tags for keywords.

// scan the document object model for target classNames parseNode: function(node) { // for all childnodes of the given node var allNodes = node.getElementsByTagName("*"); for(var a=0; a<allNodes.length; a++){ // get its className nodeClass = ' ' + allNodes[a].className + ' '; // if this node has a className if(nodeClass!=null) // for all class behaviours for (b in jQuery.classBehaviours.handlers) // if the behaviour name is in the className tested node if(nodeClass.indexOf(' ' + jQuery.classBehaviours.handlers[b].name + ' ')>-1) // apply its respective behaviour jQuery.classBehaviours.handlers[b].start(allNodes[a]); } }

In this case it applies the "blink" function to tag it finds. This function alternates the element between two classnames defined in the stylesheet to make it blink.

jQuery.classBehaviours.handlers.blink = { // properties name: 'blink', nodes: new Array(), index: -1, interval: null, // methods start: function(node){ // set the starting class, if not present if(node.className.indexOf('blinkon')<0) node.className += " blinkon"; // make new blink entry and fill it with the node's settings blinkObject = new jQuery.classBehaviours.handlers.blink.BlinkObject; blinkObject.node = node; blinkObject.jiffy = parseInt( jQuery.classBehaviours.utilities.getClassParameter(node, 'jiffy', '1') ); this.nodes[this.nodes.length] = blinkObject; // start blink loop only the first time if(this.index<0){ this.index++; this.interval = setInterval("jQuery.classBehaviours.handlers.blink.loop()", 512); } }, // events loop: function(blinkIndex){ var blk = jQuery.classBehaviours.handlers.blink; // count this update blk.index = (blk.index>100000) ? 0 : blk.index + 1 ; // for all blink objects in the list for(var a=0; a<blk.nodes.length; a++) // check if this count is the right jiffy if(blk.index%blk.nodes[a].jiffy==0) // toggle the blink class blk.nodes[a].node.className = (blk.nodes[a].node.className.indexOf('blinkoff')>-1) ? blk.nodes[a].node.className.replace('blinkoff','blinkon') : blk.nodes[a].node.className.replace('blinkon','blinkoff') ; } } jQuery.classBehaviours.handlers.blink.BlinkObject = function(){ this.node = null; this.jiffy = 1; }

Conclusion

The example above demonstrated how much inline javascript clutter is avoided using this method. The DHTML behaviour can easily be applied and degrades gracefully: Should javascript or stylesheets be disabled or overridden there should be no impact on the usability of the content.

Most examples on www.classbehaviours.com have been developed using this principle.

Comments on this Article

ClassBehaviours Index

Zoom and Rodate a High Resolution Image	jquery.classbehaviours.rotateZoom	A reference user-interface for a web-service that delivers slices of a high resolution image.	2010-09-01 09:49
Count Down to an Event	jquery.classbehaviours.countDown	A clock that counts down to a pre-determined time and triggers an event.	2009-11-05 09:11
Temporary Instructions in Input Fields	jquery.classbehaviours.inputFormat	To clarify the expected format of input there's often the temptation to fill in the field with a template. This script tries to facilitate this in the least intrusive way.	2009-11-04 13:09
Display a Close-up of a Photo	jquery.classbehaviours.zoomOnPhoto	A simple little zoom function for thumbnails.	2009-08-17 14:34
A Table with Scrolling Sections and Fixed Headers	jquery.classbehaviours.sectionedTable	A Table with Scrolling Sections and Fixed Headers	2009-08-03 12:38
Search Results that are Previewed whilst Typing	jquery.classbehaviours.realTimeSearch	This extention to a search field will retrieve the search results while typeing in the query.	2009-07-20 10:05
An Animated Effect Driven by the Scroll Position	jquery.classbehaviours.scrolledAnimation	This example implements a graphical effect not unlike Apple's "Cover flow" to a list of images in a way that doesn't sacrifice accessibility.	2009-06-29 00:50
Edit the Data in a Table Row	jquery.classbehaviours.editTableRow	Switching from a table of information to a separate page with a form in order to change some details, is very distracting and cumbersome. This script example allows individual table rows to be switched into editable versions.	2009-02-03 13:19
Search an RSS-Feed	jquery.classbehaviours.rssSearch	A search-function is a really useful function for a site with a lot of content. This however a few prerequisites, like having a database and enough access to implement a server-side script. Missing one of the prerequisites doesn't have to mean that no search function can be offered. This example implements a search function client-side, by looking through a site's RSS feed.	2008-10-16 10:46
A Cosmetic Extension of the File Selector	jquery.classbehaviours.fileUpload	File upload fields are notoriously hard to mark up. This example is a simple way to fake it.	2009-05-06 14:49
A Light-box Styled Pop-Up Layer	jquery.classbehaviours.popUpLayer	Layer-based popup replacements, or lightbox pop-ups, are quite commonplace. This example distinguishes itself by adding the popup's functionality to ordinary hyperlinks using a classname. The content presented in the popup can be inline text, an iframe or imported using AJAX.	2008-01-17 10:24
Validate Form Fields	jquery.classbehaviours.validateForm	Client-side form validation should never be an excuse to leave out server-side checking, but having it helps the user save annoying round trips to the server. This example tries to offer the best of both worlds, by making it easy to incorporate the same regular expressions used on the server. It also offers a way to submit the form's data using AJAX.	2009-03-06 11:07
Use a Sprite-sheet as a Font	jquery.classbehaviours.spriteFont	Due to "Imaginary Property" issues, fonts aren't allowed to be included in website templates. This makes it very frustrating to use non web-safe fonts for headlines, since every single title has to be saved as a separate image. This script will use all the characters of a font, rendered as an image and paste together any given title.	2009-03-16 08:12
Calculate a Total for Input Fields	jquery.classbehaviours.sumOfInput	By keeping score of all the entered numbers, this script helps a user fill in a series of values that total 100%.	2009-01-30 15:57
Restricts the Length of Textarea Input	jquery.classbehaviours.maxLength	Setting a hard limit on a text-area doesn't help the user limit his words. This indicator counts down while the user types.	2009-01-30 16:39
Change a Form's Layout Based on its Values	jquery.classbehaviours.displayOnValue	Revealing all the components of a form can be confusing when not all information applies to any given input. This example shows how a form can change it's layout based on the values that are entered.	2009-03-03 17:42
Using a Drop-down to Load Content	jquery.classbehaviours.selectContent	While it's best not to go overboard with loading content using AJAX, browsing through FAQ categories can me made a lot faster by loading the questions that way. This example allows for quick browsing through content using a drop-down list.	2008-08-24 02:01
Activate Menu Items	jquery.classbehaviours.matchActiveUrl	Marking active menu items is usualy best left to a server-side application. If a server-side approach is not possible, this script will seek out and mark active menu items, based on the URL of the page.	2009-03-04 19:56
Parallax Background Layers	jquery.classbehaviours.parallaxBackground	Paralax scrolling layers can convey a feeling of depth. The effect was often used in the video-games of the 1980's and 90's for pseuso 3D environments. Used sparingly it can result in an eye-catching effect without taking away from the contents.	2008-08-17 17:42
Chat Client Based on RSS-feed	jquery.classbehaviours.rssChat	This chat window is an example of an AJAX application based on the universal XML webservice from an earlier article. Messages are added to and stored in an XML file following the RSS standard. This way one can even subscribe to the replies in the chat using the RSS reader commonly built into browsers and email clients.	2008-07-03 21:10
Changing Values in an XML-file	jquery.classbehaviours.setNode	It's hard to make AJAX applications and still concentrate on the user-interface side of things. This simple ASPX / C# web-service can function as a sparring partner for your front-end code. Please be advised however that there is no security to this whatsoever.	2008-06-29 12:10
Make a Prototype Stylesheet	jquery.classbehaviours.makeStylesheet	If your workflow for making web pages involves making the HTML first and then fill in the styles, this script might make your life a lot more structured.	2009-02-13 15:39
Linked Selects	jquery.classbehaviours.linkedSelects	A quick AJAX-based script, that relates two drop-down lists to each other. Useful for the usual country / city combination without having all possible combinations on the page to start with.	2008-06-22 20:58
Set Values with a Slider	jquery.classbehaviours.valueSlider	A slider is curiously missing from the default set of form elements. It is however a very attractive way to set values with an upper and lower limit. This script allows for easy way to use sliders without degrading the accessibility of the form.	2008-06-22 19:48
Drag and Drop	jquery.classbehaviours.dragAndDrop	This is the most basic example of a "drag and drop" script. It can easily be expanded to accomodate the useful things one can do with "drag and drop". It is expected that this script will be expanded as soon as someone can think of something actualy useful to do with a "drag and drop" script.	2008-06-22 15:36
Center Thumbnails on a Background	jquery.classbehaviours.centeredThumbnails	Table-layout has thankfully gone the way of the dodo, but how do you center unevenly sized thumbnails now? This script uses a little javascript to compensate.	2008-06-22 14:05
Animated Class-name	jquery.classbehaviours.animatedClassName	This little script replaces the effect you expect from an anim-gif and cycles class-names instead. Animation frames can be re-used more creatively and other stylesheet effects can be added.	2008-06-21 22:23
Scrolling List	jquery.classbehaviours.scrollList	A scroll-text is an eye-catching way to parade large numbers of items along a sceen. Of course these things should be used sparingly as not to distract the user. This example of a scroller allow just about anything to be scrolled without making the content inaccessible.	2009-03-17 10:22
Thumbnail Photo Slideshow	jquery.classbehaviours.thumbnailToPhoto	Thumb-nailed slide-shows are pretty common and therefor a drag to keep re-using and modifying. This script offers the simplest most basic implementation of one, but adds a nice cross-fade effect and mouse-over effect. Functionality is easy to add, so expect this example to be expanded frequently.	2008-06-19 20:23
Click on the Parent of a Link	jquery.classbehaviours.clickOnParent	Sometimes you just can't avoid the situation where a design requires a large area to be clickable but still have block-layout inside. Of course the "A" elements shouldn't just be placed around large swath of block-elements, lest it ruin the layout.	2008-06-17 22:58
Javascript Debug Console	jquery.classbehaviours.debugConsole	Debugging your script using the "alert()" function can be really painful and not all of your browsers come with debuggers built-in or add-on. The "classBehaviour" script, contains its own debugger for convenience.	2008-06-17 20:43
Scroll-locked Elements	jquery.classbehaviours.scrollLock	It can be useful to have things like shopping-baskets and page-navigation follow along with the scrolling of the page. This script offers a sinple way to keep these elements up with the scrolling.	2008-06-17 20:43
Image Maps with Mouse Interaction	jquery.classbehaviours.imageMap	Tracing around the shape of a country's borders is a time consuming process. Scripting the highlights of all the map regions is not a welcome chore to complement this. This script, at least, takes away the additional work of scripting mouse-interactions.	2008-06-16 21:30
Insert HTML from an External URL	jquery.classbehaviours.reloadFromUrl	This simple little script allows a link to a file to be replaced by the contents of the file using AJAX.	2009-03-17 11:33
Resize an Iframe to Fit	jquery.classbehaviours.autoSizeIframe	Sometimes you absolutely have to use an iframe to include content. Apart from not validating under the strictest doctypes, an iframe doesn't scale to the content it contains. You're invariably stuck with a frame that is either too large or has scroll-bars. This script resizes an iframes to the size of its contents.	2008-06-10 23:26
ToolTips using the Longdesc	jquery.classbehaviours.longdescToolTip	The longdesc attribute allows a detailed explanation to be linked to an image, but so little people will benefit from this method that generally nobody bothers. This classbehaviour gives an incentive, by fetching the longdesc content in a custom tooltip using AJAX.	2008-06-08 16:24
Cosmetic Mouse Interaction	jquery.classbehaviours.classMouseHover	When the mouse moves over a button, link or menu-item, some highlighting is expected to indicate its interactivity. The javascript involved however is anything but straight forward to implement in an orderly way. This script simplifies the process to a single class name.	2008-06-01 11:07
Artificial Scroll-bar	jquery.classbehaviours.artificialScrollBar	It is a very bad idea to try and replace the default scrollbar the user is used to. Here's how to do just that. This trickery allows the design of the scrollbar to be completely customized, while making a best effort to keep the result accessible.	2008-05-29 22:58
Sorting Table Elements	jquery.classbehaviours.sortableTable	These three methods of sorting tables allow lists of tabular data to be ordered by a user's preference. The new order can then be submitted to the server.	2008-05-05 20:59
Including Flash for Titles	jquery.classbehaviours.flashTitle	To compensate for the inability of browsers to include fonts into web-pages, Adobe's Flash can be used to make adaptable typographic titles. But when including flash in a page, it can be a challenge to account for the availability of the plugin and the differences between browsers. This Classbehaviour example offers an easy and consistent way of including flash.	2008-05-04 18:01
Tabbed Content	jquery.classbehaviours.tabbedContent	With a tab-strip one can hide a lot of surplus content without taking it out of reach of the user. It is important however to make sure that the invisible tabs are not made inaccessible.	2009-03-13 13:54
A Many to Many Selector	jquery.classbehaviours.manyToMany	This construction is used to make and order a selection from a list of options. The classnames on the elements indicate what the desired source and destination-lists are.	2008-04-20 16:34
Folding Menu	jquery.classbehaviours.pseudoHover	This implementation the folding menu required no javascript at all to work. Only Internet Explorer 6 and older require a little help in the form of a single classbehaviour script.	2009-03-18 17:34
Rich Text-Editor	jquery.classbehaviours.richTextEditor	Most browsers have some sort of WYSIWYG (what you see is what you get) text editing function. Sadly, not all browsers implement this in the same manner. This classbehaviour function allows any textarea to be turned into a "rich" text-editor with a single classname.	2008-04-13 19:30
Picking a Calendar Date	jquery.classbehaviours.datePicker	Filling in a date in a form can go wrong in many different ways: Days and months, dashes and slashes get switched around according to local conventions. Sometimes it all goes in one box. Sometimes it's split up. A little popup calendar like the one demonstrated here makes things a lot easier and it doesn't interfere with the normal way of using the text-boxes.	2009-02-18 15:35
Opening and Closing Things	jquery.classbehaviours.toggleNextNode	These examples illustrate how one can make layout elements that open and close, without having blocks of script inline. Instead, classnames are used to give the elements their scripted behaviour. The simplicity of this method allows many different user-interface elements to be constructed. Several examples are worked-out in detail below.	2009-02-03 16:52

ClassBehaviours Index

Name

jQuery Plugin

Description

Updated

Zoom and Rodate a High Resolution Image

jquery.classbehaviours.rotateZoom

A reference user-interface for a web-service that delivers slices of a high resolution image.

2010-09-01 09:49

Count Down to an Event

jquery.classbehaviours.countDown

A clock that counts down to a pre-determined time and triggers an event.

2009-11-05 09:11

Temporary Instructions in Input Fields

jquery.classbehaviours.inputFormat

To clarify the expected format of input there's often the temptation to fill in the field with a template. This script tries to facilitate this in the least intrusive way.

2009-11-04 13:09

Display a Close-up of a Photo

jquery.classbehaviours.zoomOnPhoto

A simple little zoom function for thumbnails.

2009-08-17 14:34

A Table with Scrolling Sections and Fixed Headers

jquery.classbehaviours.sectionedTable

A Table with Scrolling Sections and Fixed Headers

2009-08-03 12:38

Search Results that are Previewed whilst Typing

jquery.classbehaviours.realTimeSearch

This extention to a search field will retrieve the search results while typeing in the query.

2009-07-20 10:05

An Animated Effect Driven by the Scroll Position

jquery.classbehaviours.scrolledAnimation

This example implements a graphical effect not unlike Apple's "Cover flow" to a list of images in a way that doesn't sacrifice accessibility.

2009-06-29 00:50

Edit the Data in a Table Row

jquery.classbehaviours.editTableRow

Switching from a table of information to a separate page with a form in order to change some details, is very distracting and cumbersome. This script example allows individual table rows to be switched into editable versions.

2009-02-03 13:19

Search an RSS-Feed

jquery.classbehaviours.rssSearch

A search-function is a really useful function for a site with a lot of content. This however a few prerequisites, like having a database and enough access to implement a server-side script.

Missing one of the prerequisites doesn't have to mean that no search function can be offered. This example implements a search function client-side, by looking through a site's RSS feed.

2008-10-16 10:46

A Cosmetic Extension of the File Selector

jquery.classbehaviours.fileUpload

File upload fields are notoriously hard to mark up. This example is a simple way to fake it.

2009-05-06 14:49

A Light-box Styled Pop-Up Layer

jquery.classbehaviours.popUpLayer

Layer-based popup replacements, or lightbox pop-ups, are quite commonplace. This example distinguishes itself by adding the popup's functionality to ordinary hyperlinks using a classname.

The content presented in the popup can be inline text, an iframe or imported using AJAX.

2008-01-17 10:24

Validate Form Fields

jquery.classbehaviours.validateForm

Client-side form validation should never be an excuse to leave out server-side checking, but having it helps the user save annoying round trips to the server.

This example tries to offer the best of both worlds, by making it easy to incorporate the same regular expressions used on the server. It also offers a way to submit the form's data using AJAX.

2009-03-06 11:07

Use a Sprite-sheet as a Font

jquery.classbehaviours.spriteFont

Due to "Imaginary Property" issues, fonts aren't allowed to be included in website templates. This makes it very frustrating to use non web-safe fonts for headlines, since every single title has to be saved as a separate image.

This script will use all the characters of a font, rendered as an image and paste together any given title.

2009-03-16 08:12

Calculate a Total for Input Fields

jquery.classbehaviours.sumOfInput

By keeping score of all the entered numbers, this script helps a user fill in a series of values that total 100%.

2009-01-30 15:57

Restricts the Length of Textarea Input

jquery.classbehaviours.maxLength

Setting a hard limit on a text-area doesn't help the user limit his words. This indicator counts down while the user types.

2009-01-30 16:39

Change a Form's Layout Based on its Values

jquery.classbehaviours.displayOnValue

Revealing all the components of a form can be confusing when not all information applies to any given input. This example shows how a form can change it's layout based on the values that are entered.

2009-03-03 17:42

Using a Drop-down to Load Content

jquery.classbehaviours.selectContent

While it's best not to go overboard with loading content using AJAX, browsing through FAQ categories can me made a lot faster by loading the questions that way.

This example allows for quick browsing through content using a drop-down list.

2008-08-24 02:01

Activate Menu Items

jquery.classbehaviours.matchActiveUrl

Marking active menu items is usualy best left to a server-side application. If a server-side approach is not possible, this script will seek out and mark active menu items, based on the URL of the page.

2009-03-04 19:56

Parallax Background Layers

jquery.classbehaviours.parallaxBackground

Paralax scrolling layers can convey a feeling of depth. The effect was often used in the video-games of the 1980's and 90's for pseuso 3D environments.

Used sparingly it can result in an eye-catching effect without taking away from the contents.

2008-08-17 17:42

Chat Client Based on RSS-feed

jquery.classbehaviours.rssChat

This chat window is an example of an AJAX application based on the universal XML webservice from an earlier article.

Messages are added to and stored in an XML file following the RSS standard. This way one can even subscribe to the replies in the chat using the RSS reader commonly built into browsers and email clients.

2008-07-03 21:10

Changing Values in an XML-file

jquery.classbehaviours.setNode

It's hard to make AJAX applications and still concentrate on the user-interface side of things. This simple ASPX / C# web-service can function as a sparring partner for your front-end code.

Please be advised however that there is no security to this whatsoever.

2008-06-29 12:10

Make a Prototype Stylesheet

jquery.classbehaviours.makeStylesheet

If your workflow for making web pages involves making the HTML first and then fill in the styles, this script might make your life a lot more structured.

2009-02-13 15:39

Linked Selects

jquery.classbehaviours.linkedSelects

A quick AJAX-based script, that relates two drop-down lists to each other. Useful for the usual country / city combination without having all possible combinations on the page to start with.

2008-06-22 20:58

Set Values with a Slider

jquery.classbehaviours.valueSlider

A slider is curiously missing from the default set of form elements. It is however a very attractive way to set values with an upper and lower limit. This script allows for easy way to use sliders without degrading the accessibility of the form.

2008-06-22 19:48

Drag and Drop

jquery.classbehaviours.dragAndDrop

This is the most basic example of a "drag and drop" script. It can easily be expanded to accomodate the useful things one can do with "drag and drop".

It is expected that this script will be expanded as soon as someone can think of something actualy useful to do with a "drag and drop" script.

2008-06-22 15:36

Center Thumbnails on a Background

jquery.classbehaviours.centeredThumbnails

Table-layout has thankfully gone the way of the dodo, but how do you center unevenly sized thumbnails now?

This script uses a little javascript to compensate.

2008-06-22 14:05

Animated Class-name

jquery.classbehaviours.animatedClassName

This little script replaces the effect you expect from an anim-gif and cycles class-names instead. Animation frames can be re-used more creatively and other stylesheet effects can be added.

2008-06-21 22:23

Scrolling List

jquery.classbehaviours.scrollList

A scroll-text is an eye-catching way to parade large numbers of items along a sceen. Of course these things should be used sparingly as not to distract the user.

This example of a scroller allow just about anything to be scrolled without making the content inaccessible.

2009-03-17 10:22

Thumbnail Photo Slideshow

jquery.classbehaviours.thumbnailToPhoto

Thumb-nailed slide-shows are pretty common and therefor a drag to keep re-using and modifying. This script offers the simplest most basic implementation of one, but adds a nice cross-fade effect and mouse-over effect.

Functionality is easy to add, so expect this example to be expanded frequently.

2008-06-19 20:23

Click on the Parent of a Link

jquery.classbehaviours.clickOnParent

Sometimes you just can't avoid the situation where a design requires a large area to be clickable but still have block-layout inside. Of course the "A" elements shouldn't just be placed around large swath of block-elements, lest it ruin the layout.

2008-06-17 22:58

Javascript Debug Console

jquery.classbehaviours.debugConsole

Debugging your script using the "alert()" function can be really painful and not all of your browsers come with debuggers built-in or add-on. The "classBehaviour" script, contains its own debugger for convenience.

2008-06-17 20:43

Scroll-locked Elements

jquery.classbehaviours.scrollLock

It can be useful to have things like shopping-baskets and page-navigation follow along with the scrolling of the page. This script offers a sinple way to keep these elements up with the scrolling.

2008-06-17 20:43

Image Maps with Mouse Interaction

jquery.classbehaviours.imageMap

Tracing around the shape of a country's borders is a time consuming process. Scripting the highlights of all the map regions is not a welcome chore to complement this.

This script, at least, takes away the additional work of scripting mouse-interactions.

2008-06-16 21:30

Insert HTML from an External URL

jquery.classbehaviours.reloadFromUrl

This simple little script allows a link to a file to be replaced by the contents of the file using AJAX.

2009-03-17 11:33

Resize an Iframe to Fit

jquery.classbehaviours.autoSizeIframe

Sometimes you absolutely have to use an iframe to include content. Apart from not validating under the strictest doctypes, an iframe doesn't scale to the content it contains. You're invariably stuck with a frame that is either too large or has scroll-bars. This script resizes an iframes to the size of its contents.

2008-06-10 23:26

ToolTips using the Longdesc

jquery.classbehaviours.longdescToolTip

The longdesc attribute allows a detailed explanation to be linked to an image, but so little people will benefit from this method that generally nobody bothers.

This classbehaviour gives an incentive, by fetching the longdesc content in a custom tooltip using AJAX.

2008-06-08 16:24

Cosmetic Mouse Interaction

jquery.classbehaviours.classMouseHover

When the mouse moves over a button, link or menu-item, some highlighting is expected to indicate its interactivity. The javascript involved however is anything but straight forward to implement in an orderly way.

This script simplifies the process to a single class name.

2008-06-01 11:07

Artificial Scroll-bar

jquery.classbehaviours.artificialScrollBar

It is a very bad idea to try and replace the default scrollbar the user is used to. Here's how to do just that.

This trickery allows the design of the scrollbar to be completely customized, while making a best effort to keep the result accessible.

2008-05-29 22:58

Sorting Table Elements

jquery.classbehaviours.sortableTable

These three methods of sorting tables allow lists of tabular data to be ordered by a user's preference.

The new order can then be submitted to the server.

2008-05-05 20:59

Including Flash for Titles

jquery.classbehaviours.flashTitle

To compensate for the inability of browsers to include fonts into web-pages, Adobe's Flash can be used to make adaptable typographic titles. But when including flash in a page, it can be a challenge to account for the availability of the plugin and the differences between browsers.

This Classbehaviour example offers an easy and consistent way of including flash.

2008-05-04 18:01

Tabbed Content

jquery.classbehaviours.tabbedContent

With a tab-strip one can hide a lot of surplus content without taking it out of reach of the user. It is important however to make sure that the invisible tabs are not made inaccessible.

2009-03-13 13:54

A Many to Many Selector

jquery.classbehaviours.manyToMany

This construction is used to make and order a selection from a list of options. The classnames on the elements indicate what the desired source and destination-lists are.

2008-04-20 16:34

Folding Menu

jquery.classbehaviours.pseudoHover

This implementation the folding menu required no javascript at all to work. Only Internet Explorer 6 and older require a little help in the form of a single classbehaviour script.

2009-03-18 17:34

Rich Text-Editor

jquery.classbehaviours.richTextEditor

Most browsers have some sort of WYSIWYG (what you see is what you get) text editing function. Sadly, not all browsers implement this in the same manner. This classbehaviour function allows any textarea to be turned into a "rich" text-editor with a single classname.

2008-04-13 19:30

Picking a Calendar Date

jquery.classbehaviours.datePicker

Filling in a date in a form can go wrong in many different ways: Days and months, dashes and slashes get switched around according to local conventions. Sometimes it all goes in one box. Sometimes it's split up.

A little popup calendar like the one demonstrated here makes things a lot easier and it doesn't interfere with the normal way of using the text-boxes.

2009-02-18 15:35

Opening and Closing Things

jquery.classbehaviours.toggleNextNode

These examples illustrate how one can make layout elements that open and close, without having blocks of script inline. Instead, classnames are used to give the elements their scripted behaviour.

The simplicity of this method allows many different user-interface elements to be constructed. Several examples are worked-out in detail below.

2009-02-03 16:52



Name:
Message:
Repeat the word: