Since the change cannot be reversed easily, this method is not to be used on AJAX functionality.

Required Files

• jQuery Addon Script: jquery.classbehaviours.disableaftersubmit.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: disableaftersubmit.html

Lorem ipsum dolor sit amet.

Required Files

• jQuery Addon Script: jquery.classbehaviours.googleeventtracker.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: googleeventtracker.html

The clock below counts down to a certain date. The input field can be adjusted as a test.

Count Down for a Specific Amount of Time

The second example counts down a specific amount of seconds after loading.

Both examples trigger an AJAX event after the timer runs out.

Required Files

• jQuery Addon Script: jquery.classbehaviours.countdown.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: countDown.html
• Example Stylesheet: inputFormat.css

Without Javascript the example template will default to a tool-tip. Equally useful.

Required Files

• jQuery Addon Script: jquery.classbehaviours.inputformat.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: inputFormat.html
• Example Stylesheet: inputFormat.css

The fading effect is very easily added using the optional "animatedClassName" addon.

Required Files

• jQuery Addon Script: jquery.classbehaviours.zoomonphoto.js
  • Optional Script: jquery.classbehaviours.animatedclassname.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: zoomOnPhoto.html
• Example Stylesheet: zoomOnPhoto.css

Manipulation this much content is a fairly slow process on aging browsers like Internet Explorer.

Required Files

• jQuery Addon Script: jquery.classbehaviours.sectionedtable.js
  • Optional Script: jquery.classbehaviours.toggleclassname.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: sectionedTable.html
• Example Stylesheet: sectionedTable.css

Lolum Catsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

• Lorem ipsum dolor sit amet
• Nemo enim ipsam voluptatem
• Quis autem vel eum iure reprehenderit

• Lorem ipsum dolor sit amet
• Nemo enim ipsam voluptatem
• Quis autem vel eum iure reprehenderit

Required Files

• Example Markup: typicalArticle.html
• Example Stylesheet: typicalArticle.css

Required Files

• Example Markup: typicalFaq.html
• Example Stylesheet: typicalFaq.css

Required Files

• Example Markup: typicalForm.html
• Example Stylesheet: typicalForm.css

Required Files

• Example Markup: typicalTabularData.html
• Example Stylesheet: typicalTabularData.css

Lorem Ipsum

25%

Dolor Sit Amet

50%

Consectetur

100%

Required Files

• Example Markup: typicalPoll.html
• Example Stylesheet: typicalPoll.css

Lolum Catsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

• Read more...

Lolum Catsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

• Read more...

Lolum Catsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

• Read more...

Required Files

• Example Markup: typicalSummaries.html
• Example Stylesheet: typicalSummaries.css

Required Files

• Example Markup: typicalSearch.html
• Example Stylesheet: typicalSearch.css

Required Files

• Example Markup: typicalSitemap.html
• Example Stylesheet: typicalSitemap.css

Required Files

• Example Markup: multipleColumns.html
• Example Stylesheet: multipleColumns.css

In contrast with rssSearch, this example required a web-service on the server. An example of which is linked below.

Required Files

• jQuery Addon Script: jquery.classbehaviours.realtimesearch.js
  • Prerequisite Script: jquery.classbehaviours.js
  • Additional Script: jquery.classbehaviours.animatedclassname.js
• Example Markup: realTimeSearch.html
• Example Webservice: realTimeSearch.php
• Example Stylesheet: realTimeSearch.css

I assume some familiarity with the "Cover flow" effect in the Apple OS X operating system or iTunes, but more information can be found on the Wikipedia page dedicated to it if needed.

Since a cover flow interface is basically a list of image previews, the HTML equivalent of that will be used as a starting point.

<ul>
	<li>
		<a href="?id=2">
			<img alt="" src="scrolledAnimation2.jpg"/><br/>
			<em>Lorem Ipsum</em>
		</a>
	</li>
	<li>
		<a href="?id=3">
			<img alt="" src="scrolledAnimation3.jpg"/><br/>
			<em>Lorem Ipsum</em>
		</a>
	</li>
	<li>
		<a href="?id=4">
			<img alt="" src="scrolledAnimation4.jpg"/><br/>
			<em>Lorem Ipsum</em>
		</a>
	</li>
</ul>
					

The above code would come out looking something like this:

By sticking to this simple structure it is ensured that the contents of the example will be accessible to even the most limited browsers, like those on mobile phones and very easily parsed by search engines.

Decoration

To shape this basic HTML into a horizontal scrolling list the individual elements are floated against each other in a container with an overflow property.

section.scrolledAnimation {
	background : #000000 url(../images/scrolledAnimation0.jpg) no-repeat 0% 0%;
	border : solid 1px #000000;
	display : block;
	margin : 0px 0px 1em 0px;
	padding : 16px;
}
	section.scrolledAnimation div {
		height : 185px;
		overflow : auto;
		overflow-x : scroll;
		overflow-y : hidden;
		width : 100%;
	}
		section.scrolledAnimation div ul {
			margin : 0px;
			padding : 0px 45% 0px 45%;
			width : 10000px;
		}
			section.scrolledAnimation div ul li {
				float : left;
				list-style-type : none;
				padding : 16px;
				text-align : center;
				width : 100px;
			}
					

Below is how the marked up list looks with all its styles applied. Please note that, even without scripting, this is a perfectly functional piece of layout.

To keep this example simple, the default scrollbar is used instead of a prettier fake one. Doing so would have made the example too complicated to follow. The browser's standard scrollbar is of course also the safest choice to make for accessibility, since it always works.

Dynamics

To add the required eye-candy to this example some scripting is required. jQuery was chosen because it allows the script to be applied in an unobtrusive way. To link the script to any cover flows on a page, the following jQuery statement was used.

// extend jQuery with this method
jQuery.fn.scrolledAnimation = function(){
	return this.each(
		function(){
			jQuery.classBehaviours.handlers.scrolledAnimation.start(this);
		}
	);
};
// set the event handler for this jQuery method
$(document).ready(
	function(){
		$(".scrolledAnimation").scrolledAnimation();
	}
);
					

The basic reasoning behind the script will be to adjust the appearance of the image as a function of the distance scrolled and the item's place in line. Below is the functionality required broken up into the simplest steps possible.

With the program laid out in plain English, transferring it to javascript is the next step.

jQuery.classBehaviours.handlers.scrolledAnimation = {
	start: function(node){
		// get the scroller from this container
		scroller = node.getElementsByTagName('DIV')[0];
		// add the event handler
		jQuery.classBehaviours.utilities.addEvent(scroller, 'scroll', this.adjustScroll);
	},
	adjustScroll: function(){
		var san = jQuery.classBehaviours.handlers.scrolledAnimation;
		// get the distance scrolled in the display
		scrollPosition = (san.focusNode!=null) ? san.focusNode.scrollLeft : 0 ;
		// get all items in the scrolling display
		scrollerItems = scroller.getElementsByTagName('LI');
		// get the width of the scrolling display
		scrollViewWidth = scrollerItems[0].parentNode.parentNode.offsetWidth;
		// for every item in the display
		for(var a=0; a<scrollerItems.length; a++){
			// measure the width of the icon
			scrollItemWidth = scrollerItems[a].offsetWidth;
			// calculate the icon's relative position to the distance scrolled
			scrollRelativePosition = Math.abs(scrollItemWidth * a - scrollPosition);
			// calculate how near the icon is to the center of the display
			scrollCenterFraction = 10 * (1 - scrollRelativePosition / scrollViewWidth * 2);
			// adjust for icons that are outside the display
			scrollCenterFraction = (scrollCenterFraction<0) ? 0 : scrollCenterFraction ;
			// make a useful rounded number
			scrollCenterFraction = Math.round(scrollCenterFraction);
			// use this number to adjust the classname of the icon
			scrollerItems[a].className = 'step_' + scrollCenterFraction;
		}
	}
}
					

As can be seen in the last line of this code example, only the class-name of the images is adjusted and the appearance not directly. This was done purposefully, to keep the decorative effects separate from the logic of the code.

The actual changes to the appearance of the images are defined in the style sheet.

/* steps indicate the relative distance from the center on a scale of 1 to 10 */
section.scrolledAnimation div ul li.step_0 {
	opacity : 0.00; -moz-opacity : 0.00; -khtml-opacity : 0.00; filter : alpha(opacity=0);
}
section.scrolledAnimation div ul li.step_1 {
	opacity : 0.10; -moz-opacity : 0.10; -khtml-opacity : 0.10; filter : alpha(opacity=10);
}
section.scrolledAnimation div ul li.step_2 {
	opacity : 0.20; -moz-opacity : 0.20; -khtml-opacity : 0.20; filter : alpha(opacity=20);
}
section.scrolledAnimation div ul li.step_3 {
	opacity : 0.30; -moz-opacity : 0.30; -khtml-opacity : 0.30; filter : alpha(opacity=30);
}
section.scrolledAnimation div ul li.step_4 {
	opacity : 0.40; -moz-opacity : 0.40; -khtml-opacity : 0.40; filter : alpha(opacity=40);
}
section.scrolledAnimation div ul li.step_5 {
	opacity : 0.50; -moz-opacity : 0.50; -khtml-opacity : 0.50; filter : alpha(opacity=50);
}
section.scrolledAnimation div ul li.step_6 {
	opacity : 0.60; -moz-opacity : 0.60; -khtml-opacity : 0.60; filter : alpha(opacity=60);
}
section.scrolledAnimation div ul li.step_7 {
	opacity : 0.70; -moz-opacity : 0.70; -khtml-opacity : 0.70; filter : alpha(opacity=70);
}
section.scrolledAnimation div ul li.step_8 {
	opacity : 0.80; -moz-opacity : 0.80; -khtml-opacity : 0.80; filter : alpha(opacity=80);
}
section.scrolledAnimation div ul li.step_9 {
	opacity : 0.90; -moz-opacity : 0.90; -khtml-opacity : 0.90; filter : alpha(opacity=90);
}
section.scrolledAnimation div ul li.step_10 {
	opacity : 1.00; -moz-opacity : 1.00; -khtml-opacity : 1.00; filter : alpha(opacity=100);
}
	section.scrolledAnimation div ul li.step_0 a img {
		height : 64px; margin : 16px; width : 64px;
	}
	section.scrolledAnimation div ul li.step_1 a img {
		height : 68px; margin : 14px; width : 68px;
	}
	section.scrolledAnimation div ul li.step_2 a img {
		height : 74px; margin : 11px; width : 74px;
	}
	section.scrolledAnimation div ul li.step_3 a img {
		height : 82px; margin : 7px; width : 82px;
	}
	section.scrolledAnimation div ul li.step_4 a img {
		height : 92px; margin : 2px; width : 92px;
	}
	section.scrolledAnimation div ul li.step_5 a img {
		height : 96px; margin : 0px; width : 96px;
	}
	section.scrolledAnimation div ul li.step_6 a img {
		height : 100px; margin : -2px; width : 100px;
	}
	section.scrolledAnimation div ul li.step_7 a img {
		height : 110px; margin : -7px; width : 110px;
	}
	section.scrolledAnimation div ul li.step_8 a img {
		height : 118px; margin : -11px; width : 118px;
	}
	section.scrolledAnimation div ul li.step_9 a img {
		height : 124px; margin : -14px; width : 124px;
	}
	section.scrolledAnimation div ul li.step_10 a img {
		height : 128px; margin : -16px; width : 128px;
	}
					

This makes it easy for anyone modifying the example to stay out of the script, if the thought of changing the logic is too daunting.

With the script cycling through the animation steps defined in the style sheet, the effect is complete. Every image is scaled and faded according to its position relative to the center of the display.

As an extra feature, clicking on the images, will open a larger version in a floating popup layer, commonly referred to as a "light-box". This effect is scripted similarly to the cover flow example and discussed elsewhere on this site in popUpLayer: A Light-box Styled Pop-Up Layer.

Required Files

• jQuery Addon Script: jquery.classbehaviours.scrolledanimation.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: scrolledanimation.html
• Example Stylesheet: scrolledanimation.css
• Example XML: scrolledanimation.html

Tabular Form

Label	Input
* lorem ipsum dolor	Submit
Lorem Ipsum *
Dolor Sit Amet*
Lorem Ipsum *
Dolor Sit Amet*
Lorem Ipsum *

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

	Name	Company	E-Mail
	Submit Changes
	Lorem Ipsum	Molesti Molesti Lorem Ipsum Dolor Sit Amet	lorem@ipsum.com
	Lorem Ipsum	Molesti Molesti Lorem Ipsum Dolor Sit Amet	lorem@ipsum.com
	Lorem Ipsum	Molesti Molesti Lorem Ipsum Dolor Sit Amet	lorem@ipsum.com
	Lorem Ipsum	Molesti Molesti Lorem Ipsum Dolor Sit Amet	lorem@ipsum.com
	Lorem Ipsum	Molesti Molesti Lorem Ipsum Dolor Sit Amet	lorem@ipsum.com
	Lorem Ipsum	Molesti Molesti Lorem Ipsum Dolor Sit Amet	lorem@ipsum.com

The changes can be posted to the server using AJAX when a row is switched back, or using a submit button elsewhere on the page.

Required Files

• jQuery Addon Script: jquery.classbehaviours.edittablerow.js
  • Prerequisite Script: jquery.classbehaviours.js
  • Additional Script: jquery.classbehaviours.echoinput.js
• Example Markup: echoInput.html

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.

Search through an RSS feed

Type a word in the example below. Using AJAX, the RSS feed is loaded and any item which matches the search string is displayed in paged results.

If no results show up, try looking for "e".

The results are pre-formatted in javascript. Using the commented HTML as a prototype is a possibility should the need occur.

Required Files

• jQuery Addon Script: jquery.classbehaviours.rsssearch.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: rssSearch.html
• Example Stylesheet: rssSearch.css
• Example XML: rssSearch.xml

A small script transfers the filename to the placeholder after a file is selected.

Required Files

• jQuery Addon Script: jquery.classbehaviours.fileupload.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: fileUpload.html
• Example Stylesheet: fileUpload.css

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The border is made up of one oversized version of the border, used as a sprite-sheet. It can even contain transparency for the drop-shadows;

Required Files

• Example Markup: borderedContainer.html
• Example Stylesheet: borderedContainer.css
• Example Image: borderedContainer.png

Below are several ways to implement the layers. For these first examples the content of the pop-up need to be present inline. This is useful for things like disclaimers and help text, which is present in the document anyway.

The link triggers an animation that fades in the content.

• Open a pop-up with a scroll-bar.
• Open a pop-up without a scroll-bar.
• Open a pop-up with an IFRAME.

The only notable difference between these two is the position of the scroll-bar which is a matter of personal preference.

Using the Pop-ups in applications

If a pop-up needs to open immediately after loading the page, simply add "noFadeIn" to the hyperlink's class-name.

Ideally the pop-up HTML should be inserted outside the document's containers to avoid layout problems. An additional classbehaviour "moveToEnd" can be used to modify the document accordingly during loading.

Required Files

• jQuery Addon Script: jquery.classbehaviours.popuplayer.js
  • Prerequisite Script: jquery.classbehaviours.js
  • Additional Script: jquery.classbehaviours.animatedclassname.js
  • Additional Script: jquery.classbehaviours.movetoend.js
• Example Markup: popUpLayer.html
• Example Stylesheet: popUpLayer.css
• Example XML / IFRAME: popUpLayer.xml

The "alphanumeric" test has a custom regular expression to test against, stored in a hidden form field.

Submitted by AJAX

The next example submits itsself using AJAX. The server's reply replaces the form.

Test form

* required fields	Submit
Bank Account:
Money:
Not Empty*:
Select Anything*:	-- choose -- Selection One Selection Two Selection Three
Any Checkbox*:	Check 0 Check 1 Check 2 Check 3
Which Radio*:	Radio 0 Radio 1 Radio 2 Other:
Date*:
Date:	-- 12345678910 11121314151617181920 21222324252627282930 31 -- 12345678910 1112 ---- 1900190119021903190419051906190719081909 1910191119121913191419151916191719181919 1920192119221923192419251926192719281929 1930193119321933193419351936193719381939 1940194119421943194419451946194719481949 1950195119521953195419551956195719581959 1960196119621963196419651966196719681969 1970197119721973197419751976197719781979 1980198119821983198419851986198719881989 1990199119921993199419951996199719981999 2000200120022003200420052006200720082009 2010201120122013201420152016201720182019
Upload:	Lorem ipsum dolor Upload

The radio buttons and password examples introduce two forms interdependence.

Recalculated using AJAX

The next example submits itsself using AJAX and refreshes the form after every change.

This way the validation-script can be used to support complex server-side functionality.

Required Files

• jQuery Addon Script: jquery.classbehaviours.validateform.js
  • Prerequisite Script: jquery.classbehaviours.js
  • Optional Script: jquery.classbehaviours.inputformat.js
  • Optional Script: jquery.classbehaviours.fileupload.js
  • Optional Script: jquery.classbehaviours.datepicker.js
• Example Markup: validateForm.html
• Example Stylesheet: validateForm.css
  • Optional Stylesheet: inputformat.css
  • Optional Stylesheet: fileupload.css
  • Optional Stylesheet: datepicker.css
• Example XML / IFRAME: validateForm.xml

Impact Font Example

The font in the title above was created using the generator below. It does not have to be installed on the end-user's computer. The individual characters in the title were rendered as images, cut from a single master image; a sprite-sheet. This sprite-sheet was generated, with the tool below, on a computer with the required font installed.

Helvética

Above the font "Helvetica" is used to the same effect. The "matrix" and "tweaks" parameters in the hidden form element is used to set the kerning of the image elements and fine-tune the font.

Stone Sans ITC Semi Font Example

Stone Sans ITC Semi Font Example

This example shows the same font twice, but the second spritesheet had photoshop filters applied to it and reacts to mouse interaction.

• Lorem Ipsum
• Dolor Sit
• Amet
• Consectetur Adipisicing

The method even works on menus.

Generating Sprite Map

The tool below positions and measures all the characters of a font. The generated map can be screen-grabbed and used as a spritesheet.

Required Files

• jQuery Addon Script: jquery.classbehaviours.spritefont.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: spriteFont.html
• Example Stylesheet: spriteFont.css
• Example Image: spriteFont_impact.png
• Example Image: spriteFont_helvetica.png
• Example Image: spriteFont_stonesans.png
• Example Image: spriteFont_stonesans2.png
• Example Image: spriteFont_stonesans3.png

Required Files

• jQuery Addon Script: jquery.classbehaviours.sumOfInput.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: sumOfInput.html
• Example Stylesheet: sumOfInput.css

characters left

Required Files

• jQuery Addon Script: jquery.classbehaviours.maxLength.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: maxLength.html
• Example Stylesheet: maxLength.css

Try the different options in the first two rows of this form. The script will only show the fields related to the choice.

This way the user can be guided through a complex form without asking for irrelevant information.

Applied from the source element using "displayIfChecked"

The same functionality can also be applied in reverse using "displayIfChecked" instead.

Either way can be useful in particular situations.

Required Files

• jQuery Addon Script: jquery.classbehaviours.displayonvalue.js
  • Prerequisite Script: jquery.classbehaviours.js
  • Extra Script: jquery.classbehaviours.zebratable.js
• Example Markup: displayOnValue.html

• jQuery Addon Script: jquery.classbehaviours.selectcontent.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: selectContent.html
• Example Stylesheet: selectContent.css
• Example XML: selectContentA.xml

The list below contains many links to this page, called with a different URL each. This simulates the many URLs of a web-site. Click on each and observe the selected link light up and its contents revealed.

• Lorem ipsum dolor
  • Sit amet consectetur
  • Magna aliqua
  • Sunt in culpa qui
• Laboris nisi ut aliquip
  • Ex ea commodo consequat
  • Cillum dolore eu
  • Officia deserunt
• Mollit anim
• Id est laborum

The script compares the HREF of each link to the URL of the page. When it finds a match, it will add the class-name "active".

Required Files

• jQuery Addon Script: jquery.classbehaviours.matchactiveurl.js
  • Prerequisite Script: jquery.classbehaviours.classmousehover.js
  • Prerequisite Script: jquery.classbehaviours.srcmousehover.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: matchActiveUrl.html
• Example Stylesheet: matchActiveUrl.css

• jQuery Addon Script: jquery.classbehaviours.parallaxbackground.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: parallaxBackground.html
• Example Stylesheet: parallaxBackground.css

The message window below continualy updates the list of chat messages from an RSS feed. Using the form, new messages can be added.

{title}

{status}

{author} {pubDate} in reply to

{description}

	Send
Name:
Message:

The script tries to manage the message post times using the client's regional settings. The success of this varies wildly between browsers and operating systems.

Required Files

• jQuery Addon Script: jquery.classbehaviours.rsschat.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: rssChat.html
• Example Stylesheet: rssChat.css

• Example Markup: setNode.html
• Example XML: setNode.xml
• Web-service Source: ClassBehaviours.zip

A typical workflow for creating web pages involves typing out the HTML for the most common things on the page like lists for navigation and "divs" for columns. After this one is left with an empty style-sheet that is very tedious to fill and structure properly with styles.

The button in the example below will generate an empty style-sheet based on the HTML on this page, structured and cascading Exactly like the HTML.

It's a very solid and reproducible method for filling out the styles of every element without losing the overview.

Required Files

• jQuery Addon Script: jquery.classbehaviours.makestylesheet.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: makeStylesheet.html
• Example Stylesheet: makeStylesheet.css

• jQuery Addon Script: jquery.classbehaviours.linkedselects.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: linkedSelects.html
• Example Stylesheet: linkedSelects.css
• Example XML: linkedSelects_fruit.xml

• jQuery Addon Script: jquery.classbehaviours.valueslider.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: valueSlider.html
• Example Stylesheet: valueSlider.css

• jQuery Addon Script: jquery.classbehaviours.draganddrop.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: dragAndDrop.html
• Example Stylesheet: dragAndDrop.css

The icons below are all centered in a grid, but the individual icons are all of a different height. The "centeredThumbnails" script measured up the available space and centers the thumbnails using margins.

Below is the same grid without the script.

Example Without Script

In the following example the container is displayed as a table-cell and centered using styles.

For Internet Explorer conditional comments were used to overcome Microsoft's lack of support for "display : table-cell;".

Required Files

• jQuery Addon Script: jquery.classbehaviours.centeredthumbnails.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: centeredThumbnails.html
• Example Stylesheet: centeredThumbnails.css

The first example cycles through 4 numbered class-names, each changing the background image into a new animation frame.

All the animation frames are stored in one big image containing all steps. This should eliminate any issues with caching.

Cycling Layered Effects

The example below cycles through a dozen class-names, changing the opacity of a layer covering a static background.

Since fading is very browser-specific, this example might not work consistently.

Animated Menu Items

The next example is an animated menu bar. The background shifts when the mouse is moved over the menu items, but the animation doesn't loop.

Triggered Animations

The most complex involves clicking the following buttons to trigger different animations in a single target element.

Lorem Ipsum Dolor Sit Amet Molesti

• Lorem Ipsum
• Dolor Sit Amet
• Molesti

A Folding Menu

The animation effect can be combined with existing folding effects to create a more attractive result.

The menu opens and closes with :hover construction in the stylesheet, but the animation is added using this scripted behaviour.

Required Files

• jQuery Addon Script: jquery.classbehaviours.animatedclassname.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: animatedClassName.html
• Example Stylesheet: animatedClassName.css
• Example Image: animatedClassName.png

To avoid visible breaks in the scrolling, the content is duplicated to allow the first item to re-enter the screen when the last one leaves. This feature sets it apart from the "marquee" element.

Several examples of mouse interactions are provided. The buttons interrupt the speed and direction and the default settings reset after a few moments of inactivity.

Required Files

• jQuery Addon Script: jquery.classbehaviours.scrolllist.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: scrollList.html
• Example Stylesheet: scrollList.css

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Required Files

• jQuery Addon Script: jquery.classbehaviours.pagelist.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: pageList.html
• Example Stylesheet: pageList.css

Below is the portfolio page re-used as a slide-show. Clicking on the thumbnails will highlight them with some stylesheet-trickery and the main slide will fade over to the large version of the image.

• Previous
• Next

Without javascript the thumbnails will simply link to the larger version of the image directly.

Required Files

• jQuery Addon Script: jquery.classbehaviours.thumbnailtophoto.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: thumbnailToPhoto.html
• Example Stylesheet: thumbnailToPhoto.css

• jQuery Addon Script: jquery.classbehaviours.clickonparent.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: clickOnParent.html
• Example Stylesheet: clickOnParent.css

• jQuery Addon Script: jquery.classbehaviours.scrolllock.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: debugConsole.html

• jQuery Addon Script: jquery.classbehaviours.scrolllock.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: scrollLock.html
• Example Stylesheet: scrollLock.css

• jQuery Addon Script: jquery.classbehaviours.imagemap.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: imageMap.html

In the example below the link to "reloadFromUrl.xml" is used to get the contents of that file using AJAX.

The contents are then inserted in the spot where the link was.

Loading the Content Automatically

In the example below this link is loaded automatically.

The optional "interval" class name enables a refresh loop.

Replacing Specific Content

The following links will insert just one of a few specific segments of the linked file, indicated by an ID:

• Contents of the element named "insertFragmentA" from "reloadFromUrl.xml".
• Contents of the element named "insertFragmentB" from "reloadFromUrl.xml".
• Continually refresh the contents of "reloadFromUrl.xml".

Posting a Form Using AJAX

Using this same method the values of a form can also be submitted with the new content.

By replacing selective ID's, forms can be validated using the server-side code.

Required Files

• jQuery Addon Script: jquery.classbehaviours.reloadfromurl.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: reloadFromUrl.html
• Example XML: reloadFromUrl.xml
• Example Stylesheet: reloadFromUrl.css

• jQuery Addon Script: jquery.classbehaviours.autosizeiframe.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: autoSizeIframe.html
• Example Stylesheet: autoSizeIframe.css

• jQuery Addon Script: jquery.classbehaviours.longdesctooltip.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: longdescToolTip.html
• Example Stylesheet: longdescToolTip.css
• Example Longdesc: longdescToolTip_unlink.html

In this example the text in the button is surrounded by a DIV, which in turn is also encased in a DIV. Both containers have a single background image but at a slight offset.

Elit Sed Do

This method allow both backgrounds to contain transparency. For example the left, right and highlighted backgrounds are all contained in a single image file. The stylesheet allows for this re-use, through clever positioning.

Animated buttons

Through the addition of another behaviour; "animatedClassNames", the buttons can be given a fading effect.

Elit Sed Do

Required Files

• Example Markup: overlapButton.html
• Example Stylesheet: overlapButton.css
• Example Button Skin: overlapButton.png
• Optional jQuery Addon Script: jquery.classbehaviours.animatedclassname.js
  • Optional prerequisite Script: jquery.classbehaviours.js

• jQuery Addon Script: jquery.classbehaviours.classmousehover.js
  • Optional Script: jquery.classbehaviours.srcmousehover.js
  • Optional Script: jquery.classbehaviours.fademousehover.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: classMouseHover.html
• Example Stylesheet: classMouseHover.css

• Example Markup: footerAtBottom.html
• Example Stylesheet: footerAtBottom.css

• jQuery Addon Script: jquery.classbehaviours.artificialscrollbar.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: artificialScrollBar.html
• Example Stylesheet: artificialScrollBar.css

• jQuery Addon Script: jquery.classbehaviours.sortbycolumn.js
  • Optional Script: jquery.classbehaviours.dragtosort.js
  • Optional Script: jquery.classbehaviours.clicktosort.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: sortableTable.html
• Example Stylesheet: sortableTable.css

• jQuery Addon Script: jquery.classbehaviours.flashtitle.js
  • Prerequisite Script: jquery.classbehaviours.js
  • Optional Script: AC_RunActiveContent.js (© Adobe)
• Example Markup: flashTitle.html
• Example XML: flashTitle.xml
• Example Flash: flashTitle.fla
• Example Flash: playSound.fla

An optional pager is updated at the bottom to leaf through the pages.

Required Files

• jQuery Addon Script: jquery.classbehaviours.tabbedcontent.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: tabbedContent.html
• Example Stylesheet: tabbedContent.css

• jQuery Addon Script: jquery.classbehaviours.manytomany.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: manyToMany.html
• Example Stylesheet: manyToMany.css

The trick behind having this menu operate without any script is the ":hover"-cascade, which in the stylesheet looks something like this:
ul.pseudoHover {}
ul.pseudoHover li:hover ul {}
ul.pseudoHover li:hover ul li:hover ul {}
ul.pseudoHover li:hover ul li:hover ul li:hover ul {}
By stacking the effects of the "li:hover" pseudo-class, the mouse can remain active over list-items to an unlimited depth.

Vertical menu

For the menu every level in the cascade is marked up to be invisible, but visible when the mouse passes over. The result is a folding menu.

• Lorem Ipsum
  • Dolor Sit Amet
    • Consectetur
    • Adipisicing
    • Elit Sed Do
    • Ut Enim
  • Eiusmod Tempor
    • Incididunt Ut
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Ad Minim
    • Veniam Quis
  • Aliqua
    • Ullamco Laboris
    • Nisi Ut
    • Aliquip Ex
    • Ea Commodo
    • Consequat
  • Duis Aute Irure
  • Dolor In
  • Reprehenderit
  • In Voluptate
• Dolor Sit Amet
  • Consectetur
    • Ullamco Laboris
    • Nisi Ut
    • Aliquip Ex
  • Adipisicing
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Ea Commodo
    • Consequat
  • Elit Sed Do
    • Duis Aute Irure
    • Dolor In
    • Reprehenderit
    • In Voluptate
    • Incididunt Ut
  • Ut Enim
  • Ad Minim
  • Veniam Quis
• Eiusmod Tempor
  • Incididunt Ut
    • Ullamco Laboris
    • Nisi Ut
    • Aliquip Ex
    • Ea Commodo
  • Labore Et
    • Incididunt Ut
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Consequat
  • Dolore Magna
  • Nostrud
  • Exercitation
• Aliqua
  • Ullamco Laboris
    • Incididunt Ut
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Ullamco Laboris
    • Nisi Ut
  • Nisi Ut
    • Aliquip Ex
    • Ea Commodo
    • Consequat
  • Aliquip Ex
  • Ea Commodo
  • Consequat

For any modern browser except Internet Explorer 6, no javascript is needed. The full functionality is contained in the stylesheet. For Internet Explorer another version of the stylesheet is included that compensates for the loss of the ":hover" functionality by using the class ".hover" and some javascript functions from "classbehaviours.js".

Horizontal menu

With a slight modification to the stylesheet the menu can be arranged in a horizontal layout.

• Lorem Ipsum
  • Dolor Sit Amet
    • Consectetur
    • Adipisicing
    • Elit Sed Do
    • Ut Enim
  • Eiusmod Tempor
    • Incididunt Ut
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Ad Minim
    • Veniam Quis
  • Aliqua
    • Ullamco Laboris
    • Nisi Ut
    • Aliquip Ex
    • Ea Commodo
    • Consequat
  • Duis Aute Irure
  • Dolor In
  • Reprehenderit
  • In Voluptate
• Dolor Sit Amet
  • Consectetur
    • Ullamco Laboris
    • Nisi Ut
    • Aliquip Ex
  • Adipisicing
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Ea Commodo
    • Consequat
  • Elit Sed Do
    • Duis Aute Irure
    • Dolor In
    • Reprehenderit
    • In Voluptate
    • Incididunt Ut
  • Ut Enim
  • Ad Minim
  • Veniam Quis
• Eiusmod Tempor
  • Incididunt Ut
    • Ullamco Laboris
    • Nisi Ut
    • Aliquip Ex
    • Ea Commodo
  • Labore Et
    • Incididunt Ut
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Consequat
  • Dolore Magna
  • Nostrud
  • Exercitation
• Aliqua
  • Ullamco Laboris
    • Incididunt Ut
    • Labore Et
    • Dolore Magna
    • Nostrud
    • Exercitation
    • Ullamco Laboris
    • Nisi Ut
  • Nisi Ut
    • Aliquip Ex
    • Ea Commodo
    • Consequat
  • Aliquip Ex
  • Ea Commodo
  • Consequat

Required Files

• jQuery Addon Script: jquery.classbehaviours.pseudohover.js (only for MSIE 6)
  • Prerequisite Script: jquery.classbehaviours.js (only for MSIE 6)
• Example Markup: pseudoHover.html
• Example Stylesheet: pseudoHover.css

• jQuery Addon Script: jquery.classbehaviours.richtexteditor.js
  • Prerequisite Script: jquery.classbehaviours.togglenextnode.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: richTextEditor.html
• Example Stylesheet: richTextEditor.css
• Example XML: richTextEditor.xml

Date:	-- 12345678910 11121314151617181920 21222324252627282930 31 -- 12345678910 1112 ---- 1900190119021903190419051906190719081909 1910191119121913191419151916191719181919 1920192119221923192419251926192719281929 1930193119321933193419351936193719381939 1940194119421943194419451946194719481949 1950195119521953195419551956195719581959 1960196119621963196419651966196719681969 1970197119721973197419751976197719781979 1980198119821983198419851986198719881989 1990199119921993199419951996199719981999 2000200120022003200420052006200720082009 2010201120122013201420152016201720182019
Date:
Date:

Required Files

• jQuery Addon Script: jquery.classbehaviours.datepicker.js
  • Prerequisite Script: jquery.classbehaviours.togglenextnode.js
  • Optional Script: jquery.classbehaviours.inputformat.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: datePicker.html
• Example Stylesheet: datePicker.css
• Example XML: datePicker.xml

Adjacent objects

Clicking on the link will make an image disappear and re-appear .

Unrelated objects

Clicking this link will make an image disappear and re-appear that is not adjacent to it.

The Harmonica List

Revealing a single description in a list

Clicking on the titles will reveal or hide one of the hidden descriptions.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Duis aute irure dolor

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Excepteur sint occaecat

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Folding menu

Here a simple folding menu was constructed that extends on over the rest of the page.

Explorer Tree

The arrows control the folding action of the tree below.

Lorem ipsum

• Sed do eiusmod
  • Dolore magna aliqua
  • Ut enim ad minim
  • Veniam quis
• Tempor incididunt
  • Dolore magna aliqua
  • Ut enim ad minim
  • Veniam quis
• Ut labore et

Dolor sit amet

• Sed do eiusmod
  • Dolore magna aliqua
  • Ut enim ad minim
  • Veniam quis
• Tempor incididunt
• Ut labore et

Consectetur adipisicing

• Sed do eiusmod
  • Dolore magna aliqua
  • Ut enim ad minim
  • Veniam quis
• Tempor incididunt
• Ut labore et

Help Bubbles in a Form

Tabbing or clicking through the fields will toggle helpful explanations next to the fields.

* required fields
Dolor sit amet*	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor Sit Amet
Dolor sit amet*	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dolor Sit Amet
Lorem ipsum*	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum*	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum*	Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Consectetur*	Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Lorem ipsum Dolor Sit Amet
Consectetur*	Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Lorem ipsum Dolor Sit Amet Lorem ipsum Dolor Sit Amet Lorem ipsum Dolor Sit Amet
Adipisicing*	At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Elit sed do*	Et harum quidem rerum facilis est et expedita distinctio. Dolor

The individual explanations are stored near the field and toggled on and off as required.

Required Files

• jQuery Addon Script: jquery.classbehaviours.togglenextnode.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: toggleNextNode.html
• Example Stylesheet: toggleNextNode.css

Lorem ipsum dolor sit amet.

Required Files

• jQuery Addon Script: jquery.classbehaviours.spritecanvas.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: spriteCanvas.html
• Example Stylesheet: spriteCanvas.css

• jQuery
  • jQuery.fn
    • jQuery.fn.animatedClassName
    • jQuery.fn.artificialScrollBbar
    • jQuery.fn.autoSizeFromIframe
    • etc.

    The individual ClassBehaviour scripts add themselves here for use in the jQuery syntax.

  • jQuery.classBehaviours
    • jQuery.classBehaviours.ajax

      A custom AJAX HTTP-request object with queueing and virtual events handler.

    • jQuery.classBehaviours.console

      A simple debugging console to output classBehaviour related messages in a non-intrusive way.

    • jQuery.classBehaviours.cookies

      An object to standardize the handling of cookies within ClassBehaviours.

    • jQuery.classBehaviours.fader

      A collection of reusable fades and whipes with virtual event handlers.

    • jQuery.classBehaviours.utilities

      Generic functions that compliment the XML DOM.

    • jQuery.classBehaviours.parser

      An object vital to ClassBehaviours, that facilitates the efficient parsing of HTML documents for class-names.

    • jQuery.classBehaviours.handlers
      • jQuery.classBehaviours.handlers.animatedClassName
      • jQuery.classBehaviours.handlers.artificialScrollBbar
      • jQuery.classBehaviours.handlers.autoSizeFromIframe
      • etc.

      The individual ClassBehaviour scripts add themselves to this object for interoperability within ClassBehaviours.

No Scripting Required

All classBehaviour scripts forsee in their own functionality by default, parsing the page for targetted class-names. For example; just adding the ClassBehaviour "jquery.classbehaviours.openlayerpopup.js" to the document would cause the script to manifest itsself like this:

$(".openLayerPopUp").openLayerPopUp();

This does not have to be scripted manually by the user of ClassBehaviours.

Download Individual "classBehaviours" jQuery Add-ons

Individial jQuery add-ons can be downloaded from the bottom of their respective documentation pages in the list of examples.

Download the Complete "classBehaviours" Source Code

The complete download contains all scripts and support files needed to implement the examples.

SourceForge Project

Download classBehaviours - Archive Release

Google Code Project

Download classBehaviours - Archive Release