Advanced Cross-Browser DHTML Questions

Advanced Cross-Browser DHTML Questions

Hi

I have here a relatively consistent set of questions, and of course I TIA=20
whoever may provide with help.
Please, let me just say that none of these questions can be solved=20
redirecting to:
         1) The w3c website: I have downloaded all the definitons about=20
DOM-1 and nothing is included about these specific questions. Positive!
         2) Assuming that some of these questions could be solved adhering=
=20
to DOM-1 i.e. dumping DOM-0 with its browser specifical syntax would not=20
solve the issue: these questions assume a need to attain compatibility also=
=20
with generation 4 browsers (that is, NS4 must be taken into account. Sadly?=
=20
Tough reality, but reality none the less)

I hope I can be as clear as within my reach and relative command of=20
american language with my questions. Please bear some indulgence. Each=20
question includes a premise and the question body itself. It cannot be=20
excluded that some of the premises might be unaccurate/wrong. I'm assuming=
=20
the premises are correct though.

         /******* DHTML Questions start *******/

SECTION 1: Events Handling

1a]
Need: intercepting Mouse events
Target: IE4, NS4, IE5, NS6
Note: running IE5.5, to be specific
Example: onMouseDown
Example function name: eHandle()
Invoking the function: eHandle(event) - all browsers invoke this function=20
using the keyword 'event'.

         Problem and Question as follows:

Building the function:

function eHandle(e){} //the argument is set, for all browsers, to an=20
arbitary variable name, in this case 'e'.
Starts browser branching/sniffing: disregard references to variable names=20
such as 'nv' or 'nome' or 'vs' and similar: they are all variables that=20
store identificative lower-cased values for browser versions et similia;=20
their knowledge is not necessary and accuracy about their functionality is=
=20
granted, word of my mouth LOL:
So:

         eHandle(e){
var j; //initializes a local variable to ease the return. At the end of the=
=20
function its updated value will be VISUALIZED on the status bar for=20
debugging purposes, keep in mind!
if(nome.indexOf("netscape")!=3D-1&&vs=3D=3D4) //Cool, it is NS4.
{
j=3Dnew Array(e.pageX,e.pageY); //Ok, we are to return an array.
/*NS4 uses: the EVENT is invoked by whatever arbitrary argument name, in=20
this case 'e' applies. Then NS4 uses pageX and pageY*/
}
else if(nome.indexOf("explorer")!=3D-1&&vs=3D=3D4&&nv.indexOf("msie 5")=3D=
=3D-1)=20
//Cool, it is IE4.
{
j=3Dnew Array(event.clientX,event.clientY)//Ok, we are to return an array,=
 as=20
chosen.
/*IE4 uses: the EVENT must be invoked by a KEYWORD, which is: 'event'. Then=
=20
IE4 uses clientX and clientY*/
}
//arrives the problem:
else if(nv.indexOf("netscape6")!=3D-1||nv.indexOf("msie 5")!=3D-1)// UhUh!=
=20
Generation 6 browsers: NS6 and IE5.
{
j=3Dnew Array(e.clientX,e.clientY)//Ok, we are to return an array, as=
 chosen.

/*Here is the problem:
NS6 recognizes this syntax, in any possible context. Deduction: does it=20
mean that the DOM-1 syntax for event handling makes references to events=20
using simple variable names and NOT the KEYWORD 'event'? Apparently. And=20
does it mean that the DOM-1 syntax to extract the event coordinates is:=20
clientX,clientY ?
In fact, in some circumstancies IE5 recognizes it as well, but in other=20
circumstancies IE5... refuses to recognize the 'e' variable name and seems=
=20
demanding the 'event' keyword again.
How does it happens? As follows:
Use this function without taking care of NS4 for a moment, that is without=
=20
event CAPTURING. Do as follows:
make a link <a href=3D"#">bla bla bla bla bla</a>
Inserti in this link the onMouseDown event as follows:
<a href=3D"#" onMouseDown=3D"eHandle(event)">.... You can also use onClick=
 if=20
easier for you.
You will see in the status bar that BOTH IE5 and NS6 identify the syntax=20
e.clientX e.clientY and will show the value on the status bar.
Now make as follows, and you will se that IE5 does NOT recognizes any=20
longer the syntax that has recognized before and won't show values on the=20
status bar and return an error message "clientX" is not defined:
Insert the event capturing, that is: build a function that by the onLoad=20
event in the BODY tag will permanentely link the eHandle function to any=20
onMouseDown event: sort of:

function captures(){
document.onmousedown=3DeHandle
//snipping out with the capturing event for NS4 since our problem is=20
FOCUSED on latest browsers, oki?
}

That easy, oki?
I mean: just <body onLoad=3D"captures()">, that way...
Now reload on IE5 and IE5 won't recognize the event anymore.
This can be worked around leveling on the backward compatibility of IE5,=20
that is modifying slightly the eHandle script so to force IE5 to respond to=
=20
the same syntax of IE4 (I believe we don't need to rearrange it here since=
=20
it is simple, so we can save some email bandwith).
This workaround would perform smoothly, but leaves intact the significant=20
question raised and implied:
what the hack of model IE5 is following here, and how comes NS6 that should=
=20
not be backward compatible recognizes its previous syntax and IE5=20
recognizes that syntax as well as long as an event is invoked within a tag=
=20
as if thia syntax (e.clientX) would be the ultimate latest browser syntax=20
for event handling, but once an event capture is set IE5 refuses to=20
recognize the syntax that recognized before and that, oddly enough and=20
MOREOVER, was ALSO the previous NS4 syntaxt which IE never recognized?
Meat for our teeth I bet...
*/
}
status=3Dj //for DEBUGGING purposes, oki?
return j;//closing the function
         }


SECTION 2: Layer Reference

2a]
Need: layer syntax
Target: IE4, NS4, IE5, NS6
Note: running IE5.5, to be specific
Example: positioning the left property, then updating an image src within=20
the layer
For NS4: document["layername"].left, for IE4:=20
document.all["layername"].style.left this seems being on of the most=20
typical syntax. How comes that when you have to update an image src within=
=20
a layer both browsers come to appending this:
document["layername"].document.imageName.src
document.all["layername"].document.imageName.src
         2aa)Do you find these syntaxes correct: for NS4 the former and IE4=
=20
the latter? I found some authors using them.
         2ab)Does it mean that the placeholder "imageName" must be an ID=20
given to an image?
         2ac)Or is it simply an alternative way to=20
document.image["imageName"].src , ie no ID involved??
         2ad)How comes that the document...document syntax which should=20
have been typical by NS4 is so used for IE4 too??
         2ae)Would then be, accordingly to DOM-1 level, correct to address=
=20
an image src in NS6 and IE5 by:
document.getElementById("layername").document.imageName.src ??

2b]
Target: NS4
How would you reference an outer layer in NS4 from within a layer?
Example: I am within layer1, a click within it must fire an action in an=20
independant layer2 (layer2 is NOT within the 'body' of layer1, that is).=20
How would you address the second layer going back into the hierarchy of the=
=20
NS4 DOM? I am within document["layer1"], I want that an onClick on a link=20
inside layer1 would fire a document.write in the layer2 document["layer2"].=
=20
I have no clue how to get out from that first layer, and I do not think=20
that parent.document["layer2"] from within layer1 would help me to raise=20
the hierarchy. Or would it?

Thank you, you can also reply privately and public both...



Alberto.=B7.Vallini
vallinis(at)yahoo.com - vallini(at)altavista.it
"Under the sun of the sleepless"  [Byron]


_________________________________________________________
Do You Yahoo!?
Get your free (at)yahoo.com address at http://mail.yahoo.com

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA