|
Subject:
|
Invoking selection.js library file in static page
|
|
Posted By:
|
Manoah
|
Post Date:
|
8/22/2008 2:39:42 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
|
|
Reply By:
|
jaucourt
|
Reply Date:
|
9/2/2008 3:57:15 AM
|
Your problem is fairly simple - your javascript (where you're attaching to the event, in the head) is invoked before the page has loaded. You need either to invoke that code in the window.onload event, or (and much better), use prototype's window.observe(window, 'onload', function() {alert('window has loaded');});
|
|
Reply By:
|
Manoah
|
Reply Date:
|
9/2/2008 4:05:21 AM
|
Thank you jaucourt for your reply
I have addressed this problem by using document.observe and it is working well.
|
|
