ClassBehaviour Examples
A collection of working examples for all available "ClassBehaviour" scripts.
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..
"ClassBehaviours" is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
Name |
jQuery Plugin |
Description |
Updated |
|
|---|---|---|---|---|
| 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. |
Sun, 28 Jun 2009 23:50 | |
| Scalable Border around Content | - |
When borders are designed around images, usually background images have to be made for all concievable sizes. This stylesheet trick allows for borders that scale gracefully with their content. |
Thu, 29 Jan 2009 15:40 | |
| 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. |
Thu, 15 Jan 2008 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. |
Fri, 6 Mar 2009 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. |
Mon, 16 Mar 2009 8: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%. |
Fri, 30 Jan 2009 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. |
Fri, 30 Jan 2009 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. |
Tue, 3 Mar 2009 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. |
Sun, 24 Aug 2008 1: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. |
Wed, 4 Mar 2009 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. |
Sun, 17 Aug 2008 16: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. |
Thu, 3 July 2008 20: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. |
Sun, 29 June 2008 11: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. |
Fri, 13 Feb 2009 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. |
Sun, 22 June 2008 19: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. |
Sun, 22 June 2008 18: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. |
Sun, 22 June 2008 14: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. |
Sun, 22 June 2008 13: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. |
Sat, 21 June 2008 21: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. |
Tue, 17 Mar 2009 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. |
Thu, 19 June 2008 19: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. |
Tue, 17 June 2008 21: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. |
Tue, 17 June 2008 19: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. |
Tue, 17 June 2008 19: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. |
Mon, 16 June 2008 20:30 | |
| Insert HTML from an External File | jquery.classbehaviours.insertFromFile |
This simple little script allows a link to a file to be replaced by the contents of the file using AJAX. |
Tue, 17 Mar 2009 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. |
Tue, 10 June 2008 22: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. |
Sun, 8 June 2008 15:24 | |
| Graphical Buttons That Scale | - |
Buttons are often designed to have a skin to match a website's style. It is quite hard however to get the image background of a button to grow with the text on the button. These two examples offer a solution. |
Wed, 4 June 2008 22:16 | |
| 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. |
Sun, 1 June 2008 10:07 | |
| Footer at Bottom | - |
The footer belongs under the document, but when the content doesn't fill the screen the footer tends to float in the middle of the page. This example solves this problem. |
Fri, 30 May 2008 7:00 | |
| 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. |
Thu, 29 May 2008 21: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. |
Mon, 5 May 2008 19: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. |
Sun, 4 May 2008 17: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. |
Fri, 13 Mar 2009 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. |
Sun, 20 Apr 2008 15: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. |
Wed, 18 Mar 2009 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. |
Sun, 13 Apr 2008 18: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. |
Wed, 18 Feb 2009 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. |
Tue, 3 Feb 2009 16:52 | |