AfterLoad ??

P

pamelafluente

Laurent Bugnion ha scritto:
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 ) };
}
Click to expand...

I did this:

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(evt) { cellClick( evt,
divElement ) };
divElement.onmouseover = function() { doOnmouseover(
divElement ) };
divElement.onmouseout = function() { doOnmouseout(
divElement ) };
}
}
}


This way the handlers do NOT get attached anymore to the DIVs. When the
mouse hover the cell nothing happen anymore (?).


Also why function(evt) has the argument and the following dont ? I am
not getting that.

-P
 
P

pamelafluente

I have done some testing.
Actually it seems I have to correct myself.

What happens is weird. When I hover the mouse on

<div id ="RG1,76,0"

the items that "responds" is another:

<div id="statusInfo">HELLO&nbsp;</div>

infact when the mouse hovers <div id ="RG1,76,0" the other element
(statusInfo) change it's background.

There must be some mix up of elements (?)

-P

here is the Demo file: ----------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Interactive Report Demo</title>

<style type="text/css" media="screen">

..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:eek:utset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
..c3bg{position:absolute;background:#FFFFF0;border-width:1px;border-style:eek:utset;}
..c3fg{position:absolute;border-width:0;color:#008000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}

</style>

</head>
<body>

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

<div id ="RG1,76,0" class="c3bg" enabledActions="4-5-6"
hasHandlers="True"
style="top:113px;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>

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


<div id="statusInfo">HELLO&nbsp;</div>


</body>
</html>
 
P

pamelafluente

Laurent Bugnion ha scritto:


Ok it seems that, after a lot of blind attempts, I got it finally it to
work.

Don't ask me "why" it works, because I have no idea !!!!!

BUT, there must be some problem with FF. Infact while all the other
events works fine, it seems that the onClick is not working with
Firefox.

When the handlers were NOT attached *dinamically* it worked.

With MSIE it *works* fine.

With FF OnClick does not seem to respond.

Any idea on the reason and how to fix it ?


Here is the current code:


//CELL handlers

function doOnclick(event, myCell) {

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

currentCell = myCell;

if (myCell.id != null) {

var flags = myCell.getAttribute("enabledActions");
if (flags == null) {return} ;
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='mMouseout(this)' onclick='mClick(this)'>" +
" &nbsp " + UserActions[actionCode] + "
&nbsp</div>"
}

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 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;
}
}



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" ) {

divElement.onclick = function() { doOnclick(event, this) };

divElement.onmouseover = function() { doOnmouseover(this)
};
divElement.onmouseout = function() { doOnmouseout(this) };
}
}
}
 
P

pamelafluente

Ok finally dinamic handlers work with FF too.


Laurent was definitely right about the event argument in Function() [
he is always right :)) ].


Actually, I do not have the slightest idea why this is working and why
only for Firefox it is necessary to pass that event argument in such a
way.


I leave explaining this to Laurent, or anyone willing to enlight us
about that ... To me all this mechanism seems quite misterious at this
"beginner" time...


javascript will never finish to surprise me ....



PS
Sorry web.dev, I got mixed up. I meant this thread.
 
W

web.dev

With FF OnClick does not seem to respond.
Click to expand...

Check below.
function doOnclick(event, myCell) {

if (event == null) event = window.event;
[...]

}
Click to expand...

Remove the above line.

[snip]
function addCellHandlers() { [...]
divElement.onclick = function() { doOnclick(event, this) }; [...]
}
Click to expand...

Instead, do the following instead:

divElement.onclick = function(event) {
if(event == null) event = window.event;

doOnclick(event, this); };


We had to make the above modifications so that it will work with FF.
The reasoning is that FF will send the event argument to your function,
however your function is not taking in that argument, so when doOnclick
is invoked, event is null. That's why we'll add the event parameter to
your function here.
 
P

pamelafluente

web.dev ha scritto:
With FF OnClick does not seem to respond.
Click to expand...

Check below.
function doOnclick(event, myCell) {

if (event == null) event = window.event;
[...]

}
Click to expand...

Remove the above line.

[snip]
function addCellHandlers() { [...]
divElement.onclick = function() { doOnclick(event, this) }; [...]
}
Click to expand...

Instead, do the following instead:

divElement.onclick = function(event) {
if(event == null) event = window.event;

doOnclick(event, this); };
Click to expand...
Exactly. Only one thing. In my case it seems i do not need...

divElement.onclick = function(event) {
if(event == null) event = window.event; <=== ... THIS !
doOnclick(event, this); };

while I did keep...

if (event == null) event = window.event; <=== ... THIS !

in the doOnclick handler.

Is this an error? (This way works fine to me with both browsers )

-P
 
L

Laurent Bugnion

Hi,

Ok finally dinamic handlers work with FF too.


Laurent was definitely right about the event argument in Function() [
he is always right :)) ].
Click to expand...

You should tell that to my wife. And my kids. And my parents. And my
boss. And... oh well.
Actually, I do not have the slightest idea why this is working and why
only for Firefox it is necessary to pass that event argument in such a
way.
Click to expand...

I'll try. The reason is that event handling is different in IE and in
Mozilla browsers.

- In IE, when an event is fired, the browser saves information about the
event in a global property named "event". To avoid confusion, I like to
refer to it with "window.event", but since it's global you can also
refer to it with "event". After storing this object, IE calls the
corresponding event handler *without any parameter*.

- In Mozilla (Netscape, Firefox...), when an event is fired, the browser
calls the corresponding event handler *with exactly one parameter*,
which is a reference to the object containing the information about the
event. This object is not stored globally.

Luckily, the object passed to the event handler is fairly compatible
between browsers, so it suffices to get a reference to that object, and
then the code can be the same for both browsers.

This is what we do here:

function eventHandler( evt )
{
// In Mozilla browsers, the parameter "evt" exists, and is a
// reference to the object I describe above.

// In IE browsers, however, evt is undefined, and we have to refer to
// the globally stored object

// There are different ways to do that:

if ( window.event )
{
// There is a global "event" object, so this is probably IE
// and evt is probably undefined. --> Copy window.event to evt
// so that the code later is simplified
evt = window.event;
}

// Another way
// This means "if evt is null (or undefined), then store window.event
// in evt. If it is not null (or undefined), keep evt.
evt = evt || window.event;

// etc...

}
I leave explaining this to Laurent, or anyone willing to enlight us
about that ... To me all this mechanism seems quite misterious at this
"beginner" time...


javascript will never finish to surprise me ....
Click to expand...

It's full of surprise, that's true.

HTH,
Laurent
 
P

pamelafluente

Laurent Bugnion ha scritto:
Hi,

Ok finally dinamic handlers work with FF too.


Laurent was definitely right about the event argument in Function() [
he is always right :)) ].
Click to expand...

You should tell that to my wife. And my kids. And my parents. And my
boss. And... oh well.
Click to expand...

:)) I could write a recommendation letter, if you want, but I do not
know how authoritative and influential is gonna be :))


Thanks all for all the nice help :)

-P
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

innerHTML += onload : how do I do it the right way ? 9
Add Image and label dynamically inside the dropdown 2
HELP to BEAUTIFY my action selector 0
I am trying to make an audio player, how do I get the selected file to be playable? 5
How can I hide a div using an event listener on multiple checkboxes? 6
Javascript fill function data from multidimensonal array 0
Dynamic code in Body, after load 2
Array to select/deselect based on boolean conditions 0

Members online

Total: 28 (members: 2, guests: 26)
Robots: 151

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,175
Latest member
Vinay Kumar_ Nevatia

Latest Threads

Top