Invoking a javascript library to static page

Diwakar

Aug 22nd 2008, 1:51 am

I am invoking a js library file name selection.js to a static page using the below.

var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',onSelect:test()});

where
- grid1 is a element name
- selectedClassName is an ooption value
- onSelect an event handler
- GridColor is CSS class name and test() is function.
- test() is function

The code is

<html>
<head>
<title>Selection Grid</title>
<link rel='stylesheet' type='text/css' href='css/selection.css'>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/selection.js'></script>

<script type='text/javascript'>

$(grid1).observe('click', function(event){

var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',onSelect:test()});

})

</script>

</head>
<body>
<div class='Layout' id='GridLayout'>

<div class='GridBox' id='grid1' name='grid1'>
hai
</div>

</div>
</body>
</html>

so onSelected the element it should adds a css class and onDeselected it removes the css class.

select select function is

_select : function ( element, event )
//-----------------------------------
{

// is the element presently selected?
if ( !element._selected )
{
// if not ...

// are there any elements selected?
if ( this._selectedCount > 0 )
{
// if so ...

// are mutliple selections pemited?
if ( this.options.multiple )
{
// if so ...

// is there no selection limit or, if there is a limit, are we
// currently below it?
if ( !this.options.limit ||
this._selectedCount << this.options.limit )
{
// if so ...

// is there no specified onSelect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onSelect != 'function' ||
this.options.onSelect( event, element ) )
{
// if so ...

// select the element
element._deselected = false;
element._selected = true;
this._setElementClassName ( element );

// are there any other selected elements?
if ( !this._selectCount )
// if not, mark all other elements as 'deselected'
this._setDeselected ();

// increment the selection count
this._selectedCount++;

// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onSelected( element );
}
}
}
// otherwise, mutliple selections are not permited ...
else
{
// is there no specified onSelect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onSelect != 'function' ||
this.options.onSelect( event, element ) )
{
// if so ...

// clear the selection
this.clear ( true );

// select the element
element._deselected = false;
element._selected = true;
this._setElementClassName ( element );

// mark all other elements as 'deselected'
this._setDeselected ();

// increment the selection count
this._selectedCount++;

// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onSelected( element );

}
}

}
// otherwise, there is no current selection
else
{
// is there no specified onSelect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onSelect != 'function' ||
this.options.onSelect( event, element ) )
{
// if so ...

// select the element
element._deselected = false;
element._selected = true;
this._setElementClassName ( element );

// mark all other elements as 'deselected'
this._setDeselected ();

// increment the selection count
this._selectedCount++;

// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onSelected( element );
}
}

}
// otherwise, the clicked on element is currently selected.
else
{
// is there no specified onDeselect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onDeselect != 'function' ||
this.options.onDeselect( event, element ) )
{
// if so ...

// select the element
element._selected = false;

// increment the selection count
this._selectedCount--;

// are there any other selected elements?
if ( this._selectCount )
// if so, mark this element as deselected
element._deselected = true;
else
// if not, reset all deselected elements
this._resetDeselected ();

// set the elements class name
this._setElementClassName ( element );

// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onDeselected( element );

}
}
},

//
// Actually deselect the element
//
_deselect: function ( element, event )
//------------------------------------
{
var element = $( element );

// is there no specified onDeselect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onDeselect != 'function' ||
this.options.onDeselect( event, element ) )
{
// if so ...

// select the element
element._selected = false;

// increment the selection count
this._selectedCount--;

// are there any other selected elements?
if ( this._selectCount )
// if so, mark this element as deselected
element._deselected = true;
else
// if not, reset all deselected elements
this._resetDeselectedClassName ();

// set the elements class name
this._setElementClassName ( element );

// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onDeselected( element );

}
},

and the css file is

.Layout{

border: 1px solid blue;
width: 385px;
height: 383px;
padding-bottom:5px;
}

.GridRows{

width: 300px
height: 30px;

}

.GridBox{

border: 1px solid red;
width: 30px;
height: 30px;
margin: 4px;
float: left;
}

.GridColor{

width: 30px;
height: 30px;
margin: 4px;
float: left;
border: 1px solid green;

}

Kindly help me to invoke the js correctly