Javascript jscss object (v )

What does it do?^{top ↑} 

JSCSS doesn't do anything in itself, it's a way of attaching CSS and javascript events to HTML elements. It allows you more detailed control and enables you develop and intergrate funtionallity easily.
download form sourceforge.net

How to use?^{top ↑} 

Firstly you have to link the jscss.js file in the head of your HTML pages. Then you need to specify the name of the method you want to run in the class name of the element you want it to effect. For example, here is an anchor tag with the 'external' method attached.
JSCSS will pickup the "js" pseudo namespace and attach the "exteral" event handelers to this element.

In the HTML...		
<a href="http://url.com" class="js:external">link</a>

// This method get's attached by JSCSS  	
function AttachExternal(el){
	if (!el.title || el.title == ''){
		el.title = 'Opens in a new window'; 
	} else {
		el.title+= ': opens in a new window'; 
	}
	el.onclick = el.onkeypress = function(){window.open(this.href)};
}		
	

pre-requestis

JsCSS is a stand alone object, I usually run it using the oncontentready loader object, but you can run it how you like.

What else do I need to know?^{top ↑} 

Methods

Public methods, e.g. the jscss.processDivs() method will test all the DIVs on the page

• jscss.processAnchors();
• jscss.processImages();
• jscss.processDivs();
• jscss.processLists();
• jscss.processTables();
• jscss.processForms();
• jscss.processExternal();

How to optimize

Don't run any of the jscss.process* methods you don't need. If your only using jscss in one area of the page, for example anchor elements in an element with the id 'divHeader' you could run jscss.processAnchors('divHeader'); this would only check anchor tags contained in the 'divHeader' element.
If you want to run jscss on a single element only you can use the jscss.processExternal('divHeader'); if your using an addon (see below).

Addon (external) v built in

Built in methods are quicker to run so if want to optimize the script you can convert your external methods to internal ones and the turn off the external method checking by setting the this.useexternalmethods paramater to false

How to create an addon, extenal, method

Your object needs to have a jscss method which takes the HTML element as a paramater.
Let's say you have a gallery of thum nail images, you have one full size image and you want to update this so when you mouse over a thubnail you see the full size image to do this you might do something like this...

Example code

// in the javascript  		
function PreviewImage(){
	this.jscss = JSCSS; // must have a jscss method 
	
	function JSCSS(a){
		a.onmouseover = a.onfocus = function(){
			document.getElementById('imgPreview').src = this.href;
			this.title = "updating image, please wait";
		}
		
	}
}
var previewimage = new PreviewImage;

// in the HTML  	
<img src="placeholder" id="imgPreview" alt="" />	

<a href="urltobigimage.png" class="js:previewimage"><img src="urltothubnail.png" alt="a thubnail" /></a>
<a href="urltobigimage.png" class="js:previewimage"><img src="urltothubnail.png" alt="another thubnail" /></a>
<a href="urltobigimage.png" class="js:previewimage"><img src="urltothubnail.png" alt="and another thubnail" /></a>

Example code in practice

 

Built in methods

Name	Detail
divs and forms
no built in methods
images
class="js:roll"	Simple roll overs on images
links
class="js:external"	Adds window.open() function to onclick and onkeypress events.
lists
class="js:menu"	Appends ... class names to lists
tables
class="js:alternaterows"	Appends "odd" and "even" to alternate tr tag class names

Example plug-in external methods

This page has an external method attached to the content div 'js:behaviorDivResize' you can resize the width of the content area buy dragging the dotted live with your mouse to suit your screen size.

Example table resize col external

This table has resizeable columns, not very usful, just an example.

header one	header two	header three
An example of a table with resizable columns (drag the vertical borders)	This is a small demo of no use what so ever!	three
If you don't know which colum the user will want to focus on		three

TODO^{top ↑} 

• add items

Supported browsers

• IE 6 +
• Firefox 2 +
• Opera 9 +
• Safari 2 +
• add more as and when...

Bugs and issues^{top ↑} 

text