AfterLoad ??

[pamelafluente]

Ok I am trying to attach the handlers dynamically:

(within a JS file: )
-------------------------------------------------------

window.onload = addCellHandlers();

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs;
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}


hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

 

[Laurent Bugnion]

Hi,

Ok I am trying to attach the handlers dynamically:

(within a JS file: )

Should be window.onload = addCellHandlers;

What you want to do is assign a reference to a Function object to the
onload property of the Window object. The reference to the Function
object must be passed without the (). What you do is call the function,
and assign the result (which doesn't exist in that case) to the
window.onload property.

HTH,
Laurent

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs;
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}


hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

 

[pamelafluente]

I just tried also with:

window.afterLoad = addCellHandlers();

it's the same. The function is invoked but foundDivs has always zero
lenght .
What is going on here?

function addCellHandlers() {
var foundDivs = document.body.getElementsByTagName("div");

-P

 

[pamelafluente]

Hi Laurent.
Just tried. Without "()" the function is not invoked.


The problem seems to be that the array foundDivs is empty. Why?

-P

Laurent Bugnion ha scritto:

Hi,

Ok I am trying to attach the handlers dynamically:

(within a JS file: )

Should be window.onload = addCellHandlers;

What you want to do is assign a reference to a Function object to the
onload property of the Window object. The reference to the Function
object must be passed without the (). What you do is call the function,
and assign the result (which doesn't exist in that case) to the
window.onload property.

HTH,
Laurent

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs;
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}


hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

 

[pamelafluente]

(e-mail address removed) ha scritto:

Hi Laurent.
Just tried. Without "()" the function is not invoked.


The problem seems to be that the array foundDivs is empty. Why?

No actually you are right !! Now it works.

It's strange that the function is called both with and without "()".
But, in the first case the foundDivs remains empty (??)


Now there must be some other problems because the handlers do
not get attacched to the div.

I suspect that:

divElement.onclick = "cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;

is a wrong way to do that. What's wrong here?

-P

 

[Laurent Bugnion]

Hi,

Hi Laurent.
Just tried. Without "()" the function is not invoked.


The problem seems to be that the array foundDivs is empty. Why?

-P

I checked your code, and there are multiple problems.

- First, related to your other post in that thread, there is no
afterLoad event. onload is correct, it will be called after the document
has been parsed and interpreted. When onload is called, the DIVs are there.

- getElementsByTagName is in document, not document.body
-->
var foundDivs = document.getElementsByTagName("div");
alert( foundDivs.length );

- You must use
window.onload = addCellHandlers; // without ()

- Similarly, in your function addCellHandlers, you must also assign the
event handlers without () and it may not be a string.

For example:

divElement.onclick = cellClick;
divElement.onmouseover = mOver;
divElement.onmouseout = mOut;

As you'll probably notice, this doesn't allow passing any parameter.
Thankfully, JavaScript has closure, which allows you to refer to
externally defined variables from inside a function:

var thisLocal = this;
divElement.onclick = function() { mOver( thisLocal ) };

In that case I create an anonymous function, which I pass to the
divElement.onclick property. Note the use of closure: I assigne the
content of "this" to a local variable, defined outside of the anonymous
function. Then from inside the function, I can refer to that external
variable, because the context in which the function was defined is
accessible when the function is called. That's closure.

- Question: Did you define "hasHandlers" yourself in the server-side
code? It's not a standard attribute of DIV. That might cause validation
errors because it's not standard HTML, but it's not that big an issue.

HTH,
Laurent

Laurent Bugnion ha scritto:

Hi,

Ok I am trying to attach the handlers dynamically:

(within a JS file: )

Should be window.onload = addCellHandlers;

What you want to do is assign a reference to a Function object to the
onload property of the Window object. The reference to the Function
object must be passed without the (). What you do is call the function,
and assign the result (which doesn't exist in that case) to the
window.onload property.

HTH,
Laurent

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs;
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}


hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

 

[Ian Collins]

(e-mail address removed) ha scritto:




No actually you are right !! Now it works.

It's strange that the function is called both with and without "()".
But, in the first case the foundDivs remains empty (??)

Because the function gets called when the script is interpreted (before
the body is loaded) and its result gets assigned to onload!

 

[pamelafluente]

Laurent Bugnion ha scritto:

Hi,

Perfect, so I changet it to:

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs;

if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick = cellClick; -> not working
divElement.onmouseover = mOver; ->not working
divElement.onmouseout = mOut; ->not working
}
}
}

What I am not understanding is how do I pass the 2 parameters as in

cellClick(event,this) ?

As you'll probably notice, this doesn't allow passing any parameter.
Thankfully, JavaScript has closure, which allows you to refer to
externally defined variables from inside a function:

var thisLocal = this;
divElement.onclick = function() { mOver( thisLocal ) };

In that case I create an anonymous function, which I pass to the
divElement.onclick property. Note the use of closure: I assigne the
content of "this" to a local variable, defined outside of the anonymous
function. Then from inside the function, I can refer to that external
variable, because the context in which the function was defined is
accessible when the function is called. That's closure.

Hmmm ... Seems complicate: I have to digest that. Could you show in
particular how
do I adapt it to my case where I have actually 2 parameters: event,
this ?

"cellClick(event,this)"

Actually Ian suggested to remove them. But I do not know how to get
them from within the function.

- Question: Did you define "hasHandlers" yourself in the server-side
code? It's not a standard attribute of DIV. That might cause validation
errors because it's not standard HTML, but it's not that big an issue.

Right. Exactly.

Ian suggested to use a class in a precedent post. But I do not
understand his suggestion. I already have a class defined for styles
(see my reply).

Not all the DIVs which have a certain style have handlers attached.


Thank you Laurent

-P

 

[pamelafluente]

Ian Collins ha scritto:

Because the function gets called when the script is interpreted (before
the body is loaded) and its result gets assigned to onload!

Enlighting (and unexpected) !!

 

[pamelafluente]

Laurent Bugnion ha scritto:

As you'll probably notice, this doesn't allow passing any parameter.
Thankfully, JavaScript has closure, which allows you to refer to
externally defined variables from inside a function:

var thisLocal = this;
divElement.onclick = function() { mOver( thisLocal ) };

In that case I create an anonymous function, which I pass to the
divElement.onclick property. Note the use of closure: I assigne the
content of "this" to a local variable, defined outside of the anonymous
function. Then from inside the function, I can refer to that external
variable, because the context in which the function was defined is
accessible when the function is called. That's closure.

I tried this:

----------

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs;

if ( divElement.getAttribute("hasHandlers") == "True" ) {
// divElement.onclick = cellClick;
// divElement.onmouseover = mOver;
// divElement.onmouseout = mOut;

var thisLocal = this;
var eventLocal = event;
divElement.onclick = function() { cellClick( eventLocal,
thisLocal ) };
divElement.onmouseover = function() { onmouseover(
thisLocal ) };
divElement.onmouseout = function() { onmouseout(
thisLocal ) };

}
}
}

----------

gives a run time error: "Object Expected"

divElement.onmouseover = function() { onmouseover( thisLocal ) };


I am not sure I understand this mechanism (??)

-P

 

[Richard Cornford]

Perfect, so I changet it to:

What is perfect?

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs;

if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick = cellClick; -> not working
divElement.onmouseover = mOver; ->not working
divElement.onmouseout = mOut; ->not working
}
}
}

What I am not understanding is how do I pass the 2 parameters as in

cellClick(event,this) ?

<snip>

You don't. As the functions are assigned to properties of the element,
and called by the browser as methods of the element, the - this - value
is a reference to the element within the function when it is called. In
some browser the event object will be passed as the fist argument (and
only) argument to the method when it is called by the browser , and
when it is not the - event - Identifier will resolve as a reference to
a global event object. So you do:-

function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to
// the event object if it has not been passed in.
this. <...> // Use - this - to refer to the element.
}

- with:-

divElement.onclick = cellClick;

Richard.

 

[pamelafluente]

Richard Cornford ha scritto:

Thanks Richard

a global event object. So you do:-

function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to
// the event object if it has not been passed in.
this. <...> // Use - this - to refer to the element.
}

I am very Sorry Richard. I am very new to javascript. I am not sure to
understand your suggestion. Are you referring to a way to eliminate the
parameters, as Ian suggested, or are you suggesting how to pass them
when attaching the handlers.

Sorry again Richard . This is all new to me. I would need to see it
within my code to understand what you are referring to...

-P

 

[Laurent Bugnion]

Pamela,

What I am not understanding is how do I pass the 2 parameters as in

cellClick(event,this) ?

What does "this" refer to in your expectation?

To use the event argument as well as a second argument, here is a
simplified example:

function bodyOnLoad()
{
var nDivRed = document.getElementById( "divRed" );
var strMessage = "Hello";

if ( nDivRed )
{
// The "evt" variable is set in Mozilla browsers when
// the event is fired.
nDivRed.onmousemove = function( evt )
{
displayMousePosition( strMessage, evt )
};
}
}

function displayMousePosition( strMessage, evt )
{
// In IE, the event is stored in a global window.event property
if ( window.event )
{
evt = window.event;
}

var nSpanStatus = document.getElementById( "spanStatus" );
if ( nSpanStatus )
{
nSpanStatus.firstChild.nodeValue = "Position: "
+ evt.clientX + ":" + evt.clientY
+ " / Message: " + strMessage;
}
}

It's a bit tricky to understand, I'll try to explain:

1) The onmousemove event (and the others too) is always called with a
parameter in Mozilla browsers, and with no parameter in IE. The
parameter is named "evt" in my anonymouse function. Because my
user-defined function displayMousePosition has two parameters, I can
pass evt to it as well as another (or two or three or more) parameter.

2) When the even is fired, the anonymous function is executed. The only
thing it does is call the displayMousePosition function. Because of
closure, it still remembers the value of strMessage. Additionally, in
Mozilla, evt is defined. In IE, evt is undefined, but it doesn't matter.

3) In displayMousePosition, we test to see if a global window.event
property exists. If yes, it means that evt is undefined, so we assign
window.event to evt (this simplifies the code later).

About closure: This is probably the trickiest concept in JavaScript.
Closure means that the function's context is saved together with the
function definition. So it means that variables visible in the same
scope as the function are accessible from inside the function, even if
the function is called in another context.

HTH,
Laurent

 

[Richard Cornford]

Richard Cornford ha scritto:

I am very Sorry Richard. I am very new to javascript. I am not sure to
understand your suggestion. Are you referring to a way to eliminate the
parameters, as Ian suggested, or are you suggesting how to pass them
when attaching the handlers.

When the event parameter is passed (by non-IE style browsers) that is
done automatically, and the - this - value refers to the DIV in a
function that is called as a method of the DIV. Such a function must
expect the event object as an argument (but handle not getting it) and
does not need any mechanism other than - this - to refer to the DIV
element.

Sorry again Richard . This is all new to me. I would need to see it
within my code to understand what you are referring to...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload = function(){
var div;
if((div = document.getElementById('test'))){
div.onclick = cellClick;
}
}

function cellClick(ev){
ev = ev || event;
alert(
'Event type = '+ ev.type+
'\nEvent screenY = '+ ev.screenY +
'\n\nElement Tag Name = '+ this.tagName +
'\nElement ID = '+ this.id +
'\nElement offsetTop = '+ this.offsetTop
);
}

</script>
</head>
<body>
<div id="test" style="border:5px solid red;margin:2em;">
test div
</div>
</body>
</html>

Richard.

 

[Laurent Bugnion]

Hi,

Try this:

var thisLocal = this;
divElement.onclick = function( evt ) { cellClick( evt, thisLocal ) };
divElement.onmouseover = function() { doOnmouseover( thisLocal ) };
divElement.onmouseout = function() { doOnmouseout( thisLocal ) };

And then:

function cellClick( evt, thisLocal )
{
if ( window.event )
{
evt = window.event;
}

// ...

}

I renamed mouseover and mouseout to doOnmouseover and doOnmouseout to
avoid confusion with window.onmouseover

HTH,
Laurent

 

[pamelafluente]

Richard, Laurent,

I am very embarassed to admit I do not understand how to convey your
theory suggestions into my actual code..

Could you please suggest ONLY the exact corrections I need to make to

function addCellHandlers() ?

Theorical discussion is not easy to grab for me if first I do not see
it applied to my specific problem and understand this specific case.


I make a summary providing full source code :

I have a JS file which contains:
---------------------------------------------

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs;

if ( divElement.getAttribute("hasHandlers") == "True" ) {

var thisLocal = this;
var eventLocal = event;
divElement.onclick = function() { cellClick( eventLocal,
thisLocal ) };
divElement.onmouseover = function() { onmouseover(
thisLocal ) };
divElement.onmouseout = function() { onmouseout(
thisLocal ) };

}
}
}


-------------------------------------

This is called within an HTML file which looks like this (this file may
contain thousands of those DIVs. I left only a couple of them ):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css" media="screen">


..c7bg{position:absolute;background:#008000;border-width:1px;border-styleu­tset;}

..c7fg{position:absolute;border-width:0;color:#ffffff;background:transparent­;text-align:center;font-family:Tahoma;font-size:11px;font-weight:bold;}

..c8bg{position:absolute;background:#228b22;border-width:1px;border-styleu­tset;}

..c8fg{position:absolute;border-width:0;color:#ffffff;background:transparent­;text-align:center;font-family:Tahoma;font-size:11px;font-weight:bold;}

..menuItemStyle{
background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;fo­nt-size:11px



}


</style>

<script language="javascript" src="Ajax_Javascript.js"></script>
</head>
<body>


<div id ="RG1,0,0" class=c7bg enabledActions="4,6"
onclick="cellClick(event,this)" onmouseover = "mOver(this)" onmouseout
= "mOut(this)" style="top:170px;left:20px;width:89px;height:30px;">
<div class=c7fg style="top:7px;left:2px;"><table><tr><td width=83px
height=14px valign=middle>SHIPCOUNTRY</td></tr></table></div></div>
<div id ="RG1,0,1" class=c8bg enabledActions="4,2,6"
onclick="cellClick(event,this)" onmouseover = "mOver(this)" onmouseout
= "mOut(this)" style="top:170px;left:112px;width:89px;height:30px;">


<div
style="position:absolute;top:2253px;font-family:Tahoma;font-size:11px;font-­weight:bold"><font

color="#c0c0c0">Report generated: <br>lunedì ²5 settembre 2006
18.17.59</font><br><a href="http://somesite/"><font
color="#c0c0c0">http://somesite/</font></a><p></p></div>


<form name="form1" method="get" action="ReportProcessor.aspx">
<input type="hidden" name="hiddenFieldName" id="hiddenFieldID"/>
</form>


<div id="menuActions" style="position:absolute; display:none">
<table >
<tr>
<td bgcolor="#eeaa66" style="width: 15px"> </td>
<td id="menuItemContainer"></td>
</tr>
</table>
</div>


</body>
</html>



--------------------

Other function in the JS file are the following:

// JScript File: Ajax_Javascript.js

//http://groups.google.it/group/comp.lang.javascript/browse_frm/thread/b3b8fa7bad9223a4?hl=it
//Laurent Bugnion, GalaSoft

function setStatus( strMessage )
{
var statusInfo = document.getElementById("statusInfo");
// if (statusInfo.id != null) {
// statusInfo.firstChild.nodeValue = strMessage;
// }

// alert(strMessage);
window.status = strMessage;
}

var submitURL;
var oHttp = null;

function submitOnlyIfUrlActive() {

if ( window.XMLHttpRequest ) {
oHttp = new window.XMLHttpRequest();
}
else {
if (window.ActiveXObject ) {
oHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}
else {
setStatus("Unsupported Platform");
}
}
if ( !oHttp ) {
setStatus("Error");
}
setStatus( "Checking existence of Report Processor " + submitURL +
" ...");

oHttp.onreadystatechange = submitOnlyIfUrlActiveCallback;
oHttp.open("HEAD", submitURL, true ); // true = async, false = sync

oHttp.send( null );
}

function submitOnlyIfUrlActiveCallback() {

if ( oHttp.readyState == 4 ) {
if ( oHttp.status == 200 ) {
setStatus("Report Processor (" + submitURL + ") Found");
document.form1.submit();
}
else {
if (oHttp.status == 404) {
setStatus("Report Processor (" + submitURL + ") Not
Found");
}
else {
setStatus("Error: " + oHttp.status );
}
}
}
}

// JScript File: DynamicMenu.js

// onclick on the menuItem return coded info on the action
// and on the cell: MenuItem.id + "," + myCell.id

var menuActions;
var currentCell;
var mouseIsOnCellorMenu;
var previousStyle;

var UserActions=new Array();
UserActions[0]= "DRILL DOWN: include next dimension";
UserActions[1]= "DRILL DOWN this value" ;
UserActions[2]= "DRILL DOWN all values";
UserActions[3]= "DRILL DOWN parent value";

UserActions[4]= "ROLL UP: exclude next dimensions";
UserActions[5]= "ROLL UP this value";
UserActions[6]= "ROLL UP all values";
UserActions[7]= "ROLL UP parent value";

document.onmousedown = mMouseDownOnDoc;

function cellClick(event, myCell) {

currentCell = myCell;

if (myCell.id != null) {

var flags = myCell.getAttribute("enabledActions");
menuActions = document.getElementById("menuActions");
var separerToken = "-"
var actionCodes = flags.split(separerToken)

var menuItemContainer =
document.getElementById("menuItemContainer");
menuItemContainer.innerHTML = "";
for ( var i = 0; i < actionCodes.length; i++ ) {
var actionCode = parseInt(actionCodes)

menuItemContainer.innerHTML += "<div id=" + actionCodes
+
" class=menuItemStyle" +
" onmouseover='mOverMenuItem(this)'
onmouseout='mOut(this)' onclick='mClick(this)'>" +
" &nbsp " + UserActions[actionCode] + "
&nbsp</div>"
}
if (event == null) event = window.event;
var scrollTop = document.body.scrollTop ?
document.body.scrollTop : document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft ?
document.body.scrollLeft : document.documentElement.scrollLeft;
menuActions.style.left = event.clientX + scrollLeft + 'px';
menuActions.style.top = event.clientY + scrollTop + 'px';
menuActions.style.display = 'block';
}
}

function mMouseDownOnDoc() {
if (!mouseIsOnCellorMenu) {
if (menuActions != null) {
menuActions.style.display = 'none';
}
}
}

function mOver(MyDiv) {

menuActions = document.getElementById("menuActions");
if (menuActions == null) {return; } //in case page still
loading

mouseIsOnCellorMenu = true;

if (currentCell != MyDiv) {
menuActions.style.display = 'none';
currentCell = MyDiv;
}

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffff00";
}
}


function mOverMenuItem(MyDiv) {

mouseIsOnCellorMenu = true;

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffee22";
}
}

function mOut(MyDiv) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
MyDiv.style.backgroundColor = previousStyle;
previousStyle = null;
}
}

function mClick(menuItem) {

// alert("Clicked " + menuItem.id + "," + currentCell.id );

var hiddenField = document.getElementById("hiddenFieldID");
hiddenField.value = menuItem.id + "," + currentCell.id;
submitURL = document.form1.action;
submitOnlyIfUrlActive();
}


Thank you very much.

 

[pamelafluente]

And clearly the HTML reflects the situation before Ian's suggestion to
use dynamic handlers.
After that the DIVs look like (see for instance hasHandlers="True" ):


<div id ="RG1,76,0" class="c3bg" enabledActions="4-5-6"
hasHandlers="True"
style="top:1813px;left:20px;width:88px;height:295px;">
<div class=c3fg style="top:2px;left:2px;"><table><tr><td width=82px
height=289px valign=middle> USA </td></tr></table></div>
</div>

-P

 

[pamelafluente]

Laurent Bugnion ha scritto:

Hi,

Try this:

var thisLocal = this;
divElement.onclick = function( evt ) { cellClick( evt, thisLocal ) };
divElement.onmouseover = function() { doOnmouseover( thisLocal ) };
divElement.onmouseout = function() { doOnmouseout( thisLocal ) };

OK I am almost there. Here is the revised code (myCell is what we
called thisLocal ):

//CELL handlers


window.onload = addCellHandlers;

function addCellHandlers() {

var aDivs = document.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs;

if ( divElement.getAttribute("hasHandlers") == "True" ) {

var myCell = this;
var evt = event;

divElement.onclick = function() { cellClick( evt, myCell )
};
divElement.onmouseover = function() { doOnmouseover( myCell
) };
divElement.onmouseout = function() { doOnmouseout( myCell )
};
}
}
}



function doOnmouseover(myCell) {

menuActions = document.getElementById("menuActions");

if (menuActions == null) {return; }
//in case page still loading

mouseIsOnCellorMenu = true;

if (currentCell != myCell) {
menuActions.style.display = 'none';
currentCell = myCell;
}

if (previousStyle == null) {
previousStyle = myCell.style.backgroundColor;
myCell.style.backgroundColor = "#ffff00";
}
}


function doOnmouseout(myCell) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
myCell.style.backgroundColor = previousStyle;
previousStyle = null;
}
}





when the mouse over this DIV

<div id ="RG1,76,0" class="c3bg" enabledActions="4-5-6"
hasHandlers="True"
style="top:1813px;left:20px;width:88px;height:295px;">
<div class=c3fg style="top:2px;left:2px;"><table><tr><td width=82px
height=289px valign=middle>EXXX USA</td></tr></table></div>
</div>


I get a runtime error on this line:

previousStyle = myCell.style.backgroundColor;

of the function doOnmouseover(myCell).

"myCell.style is Null or is not an Object"


There seems to be a mix up in the sender MyCell...



-P

 

[Laurent Bugnion]

Hi,

(e-mail address removed) wrote:

I get a runtime error on this line:

previousStyle = myCell.style.backgroundColor;

of the function doOnmouseover(myCell).

"myCell.style is Null or is not an Object"


There seems to be a mix up in the sender MyCell...

That's why I asked you what "this" is supposed to represent ;-)

At the moment where you assign "this" to "myCell", "this" represents the
function itself, and it doesn't have a style property, which is why you
get the error.

To solve this, you must not pass "this" to the function, but rather the
divElement itself:

if ( divElement.getAttribute("hasHandlers") == "True" )
{
divElement.onclick = function( evt ) { cellClick( evt, divElement ) };
divElement.onmouseover = function() { doOnmouseover( divElement ) };
divElement.onmouseout = function() { doOnmouseout( divElement ) };
}

HTH,
Laurent

 

[pamelafluente]

Richard Cornford ha scritto:

function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to

hmmm let me understand. Is

evt = evt || event;

the same as:

if (evt == null) evt = window.event;


or

if ( window.event ) {
evt = window.event;
}


or they are different things ?

-P