 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Krossbrauzernyj DHTML
Beginning{Starting} webs - programmers sooner or later collide{face} with that, that their script, ljubovno written (or borrowed) and fine working on a domestic computer with MSIE 5.5, for some reason does not work for the neighbour or the client on it Opera, Mozilla or Netscape.
The purpose of present{true} clause{article} - to consider available distinctions in DHTML-objects and functions at present browsers. It is supposed, that the reader is already more - less familiar with programming at least under one of browsers.
Definition of a browser
And their versions it is a lot of browsers, but many of them do not differ among themselves with understanding DHTML. Therefore there is a sense to break them into some groups, named on the most widespread representative. We shall check on an accessory{a belonging} to this or that group through support by a tested browser of those or other objects:
isDOM=document.getElementById // DOM1 browser (MSIE 5 +, Netscape 6, Opera 5 +)
isMSIE=document.all ** document.all.item // Microsoft Internet Explorer 4 +
isNetscape4=document.layers // Netscape 4.*
isOpera=window.opera // Opera
isOpera5=isOpera ** isDOM // Opera 5 +
isMSIE5=isDOM ** isMSIE // MSIE 5 +
isMozilla=isNetscape6=isDOM **! isMSIE **! isOpera // Mozilla or Netscape 6.*
Last line sporna, t. To. Everything is not necessarily, what not the Opera and not MSIE - Mozilla. However if browsers which are not compatible neither with MSIE, nor with Opera with what them{him;it} still{even} to be compatible how not with Mozilla (Netscape 6) will appear? Any more with whom. For especially responsible{crucial} cases when it is necessary to reject for certain all unknown browsers, it is possible to use that, that all modern Mozilly contain in navigator.appName a line "Netscape", i.e.
isMozilla=isNetscape6=isDOM ** (navigator.appName == "Netscape")
Windows and documents
In different browsers such properties, as the sizes of a window, the sizes of the document, parameters of scrolling, etc. are differently caused.
The sizes of working area of a window
? MSIE 4 + - document.body.clientWidth, clientHeight
? Netscape, Mozilla, Opera - innerWidth, innerHeight
Coordinates of the top left corner of a window
? MSIE 4 + - screenLeft, screenTop
? Netscape, Mozilla, Opera - screenX, screenY
The sizes of contents of the document
? MSIE 4 + - document.body.scrollWidth, scrollHeight
? Netscape, Mozilla - document.width, height
? Opera - document.body.style.pixelWidth, pixelHeight
Scrolling (scrolling)
? MSIE 4 + - document.body.scrollLeft, scrollTop
? Netscape, Mozilla, Opera - pageXOffset, pageYOffset
In MSIE at the document should be present teg <body> </body>, differently document.body it will not be determined.
Forms
Access to forms
In MSIE such code fine works:
<form name=myform>
<input name=mytext>
</form>
......
myform.mytext.value = "hello"
But in 4-th Netscape this code gives out a mistake. There it is impossible so to address to forms. It is necessary to write document.myform.mytext.value = "hello" is will work both there, and there. To avoid possible{probable} conflicts of a name of the form to other objects document it is better to write document.forms.myform.mytext.value or document.forms ["myform"] .elements ["mytext"] .value. Last recording is recommended in cases when the name of the form or its{her} element can contain invalid for a name of a variable in JavaScript symbols.
Forms and Mozilla
In Mozilla it is better to not address to elements of page (especially to forms) before event onload.
<select> and Netscape
In Netscape the object select does not have property value. For a choice necessary option use check select.options [n] .value and installation corresponding select.selectedIndex. To use select.options [n] .selected=true/false it is not recommended because of problems with Opera (see further).
<select> and Opera
In Opera old versions (napr. 5.10, as against, for example, 5.12) it is impossible to choose an option select through select.options [n] .selected=true. Instead of it it is necessary to write select.selectedIndex=n.
Picture
Access with pictures, i.e. the objects created tegom, is carried out through a collection document.images []. But at Netscape 4 there is a feature in a call of a picture if she is inserted into a layer.
Layers
If in MSIE 4 + and Mozilla (he Netscape 6) a layer can be any element of page, in Netscape 4 and Opera 5 it usually the container <div> </div> with certain{determined} by styles absolute or relative an arrangement. The some people recommend to use in Netscape 4 teg <layer>, t. To. He is understood by a Netscape better. Therefore those cases when <div> and <layer> in 4-th Netscape behave differently, probably, I rassmotrju in one of future clauses{articles}. But these cases are rare enough and specific and connected to glitches in formatting contents of layers.
In Netscape 4 do not use in names of classes (class =) and identifiers (id =) the symbol of underlining{emphasis} "_", otherwise Netscape will not see this element.
Access to a layer
Access to layers is differently carried out in different browsers. Namely:
? MSIE 4 + - document.all [layerName]
? Netscape 4 - document.layers [layerName]
? DOM1 (MSIE 5 +, Mozilla, Opera 5) - document.getElementById (layerName)
It is possible to recommend such function:
function layer (layerName) {
// DOM1
if (document.getElementById) return document.getElementById (layerName)
// MSIE4
if (document.all) return document.all [layerName]
// Netscape 4
if (document.layers) return document.layers [layerName]
// Not supported browser
return null
}
With access to layers in Netscape 4 there is one aspect. From it is connected with enclosed (nested) layers, i.e. to layers which are described inside containers of other layer. An example (it is supposed, that in CSS for tegov <div> allowable property position is set):
<div id = "mylayer"> <div id = "cool"> xxx </div> </div>
If in MSIE 4 + it is possible to call a layer "cool" through document.all ["cool"] in Netscape 4 document.layers ["cool"] will return undefined. For a call of the enclosed layer it is necessary to write such design:
document.layers ["mylayer"] .document.layers ["cool"]
The same concerns also addressing of other objects which are taking place inside a layer - pictures, forms, links, etc.
So, our function can be modernized thus:
// Recursive search on layers
function findLayer (what, where) {
if (! where) return
var i, l, parent
var len=where.length
for (i=0; i <len; i ++) {
parent=where [i] .document.layers
l=parent [what]
if (l) return l
l=findLayer (what, parent)
}
return false
}
function layer (layerName, parentLayerName) {
if (document.getElementById) return document.getElementById (layerName)
if (document.all) return document.all [layerName]
if (document.layers) {
if (parentLayerName) {
return findLayer (layerName, eval (parentLayerName))
} else {
return findLayer (layerName, document.layers)
}
}
}
Now we can address to our layer "cool" so: layer ("cool", "mylayer") or in general layer ("cool"), but last variant will be more "brake", t. To. The computer should bypass all tree of layers up to required. The similar reason results to that it is logical to call once a layer - var mylayer=layer ("xxx"), and then to use a variable mylayer for the further job with a layer.
With the pictures inserted into a layer, in Netscape 4 business is as. A picture in a layer do not enter into a collection document.images [] the root document, they belong to a collection document.images [] this layer. The example - at us is a layer "layer", in him there is a picture "image". To change at this picture src, we write:
document.layers ["layer"] .document.images ["image"] .src = "file.jpg"
Access to CSS-properties of a layer
Access to CSS-properties of a layer (an arrangement, visibility, etc.) also is differently carried out in different browsers. In MSIE 4 and DOM1-browsers access to property is carried out through object .style. An example (function of a call of a layer already determined by us is used):
// To hide a layer in MSIE4 and DOM1-browsers
layer ("mylayer") .style.visibility = "hidden"
In Netscape 4 the layer does not have field style, access to properties is carried out directly:
// To hide a layer in Netscape 4
layer ("mylayer") .visibility = "hide"
It is possible to notice, what even value which needs to be appropriated{given} to property .visibility, miscellaneous at different browsers. Though newer versions of 4-th Netscape support not only "show" / "hide", but also "visible" / "hidden", as well as MSIE.
For access to styles it is possible to recommend such function:
function layerStyle (layerObject) {
if (layerObject.style) return layerObject.style // access through style
return layerObject // access without style
}
Together with which our example will be reduced up to
layerStyle (layer ("mylayer")) .visibility=isNetscape4? "hide": "hidden"
It is necessary, the truth to note, that the example resulted by me looks a little bit bulky. It is connected to that, that he, not possessing the big practical advantage{benefit}, is called to illustrate only job with layers in different browsers. But you can meet the object-oriented library of DHTML-functions KLayers more accurately written by me.
Distinctions in CSS-properties
I want to repeat, that access to CSS-properties is differently carried out in different browsers.
Visibility of a layer (visibility)
? MSIE, Opera, Mozilla - .visibility = "visible" / "hidden" (seen / hidden)
? Netscape 4 - .visibility = "show" / "hide"
Color of a background of a layer
? MSIE, Mozilla, Opera 6 - .backgroundColor = "COLOR" (napr. "red", "*ffee15")
? Netscape 4 - .bgColor = "COLOR"
? Opera 5 - .background = "COLOR" (works only in the event that initially through CSS for a layer any background color has been specified)
The background image at a layer
? MSIE, Mozilla, Opera 6 - .backgroundImage = " url (url a picture) "
? Netscape 4 - .background.src = " url a picture "
Scrap of a layer (clip)
Allows to make only a part of a layer seen. It can be applied to effects "raspakhivanija", "vypolzanija" or "skrollinga".
? MSIE, Mozilla - .clip = " rect (top, right, bottom, left) "
? Netscape 4 - .clip.top = "top".clip.right = "right", etc. (top, right, bottom, left - the sizes in pikselakh, i.e., for example, 120px)
? Opera - it is not supported
For realization of the scrolled text in new browsers (MSIE, Mozilla, Opera) it is convenient to apply css-property overflow: hidden. It is possible to create the block with overflow: hidden and the fixed sizes, and inside of it to enclose other block which we shall scroll. For scrolling it is enough to change to him .style.left and top (or .style.pixelLeft, pixelTop in Opera). In Netscape 4, certainly, for scrolling a layer it is necessary to use property clip.
Not CSS-properties
Layers have properties which are not defined{determined} CSS. It, for example, the turned out dimensions of a layer which depend on quantity{amount} of the text placed in him. To address to these properties it is necessary passing .style, i.e. it is simple layer.svojstvo.
The current coordinates of the top left corner of a layer on page
? MSIE, Opera, Mozilla - .offsetLeft, offsetTop (only for reading)
? Netscape 4 - .pageX, pageY (it is possible to change, moving a layer absolutely, i.e. concerning a window, instead of parental elements if such is)
Example:
// Y-coordinate of top of a layer
function getLayerTop (layer) {
if (isMSIE || isOpera5 || isMozilla) {
return layer.offsetTop
} else if (isNetscape4) {
return layer.pageY
}
}
In DOM1-browsers (MSIE, Opera, Mozilla) in case of the enclosed layers i.e. when the layer is enclosed in other layer, coordinates .offsetLeft and .offsetTop are counted concerning a parental layer. For reception of the link to a parental element there is a property .offsetParent. It is possible to pass on a chain offsetParentov, summarizing their coordinates, we shall not reach yet the uppermost parent - document.body.
The current sizes of contents of a layer
? MSIE, Mozilla - .offsetWidth, offsetHeight
? Netscape 4 - .document.width, height
? Opera - .style.pixelWidth, pixelHeight
Change of contents of a layer
Recording in a layer
? MSIE, Mozilla - .innerHTML=tekst
? Netscape 4 - .document.open ()
.document.write (text)
.document.close ()
? Opera - it is impossible
In MSIE 4 it is not necessary to cause .innerHTML before approach onload page.
In Netscape 4 there is a glitch with recording Russian letters in a layer. They turn or to symbols of the coding western, or as a token of a question ("????? "). The decision of this problem can be achieved through use of loading in a layer of other document (see further). The document is loaded into a layer with correctly exposed charset, and then in him is printed through document.write the necessary text.
Podgruzka other document in a layer
In Netscape 4 layers have attribute and property src, and also a method .load (url). It allows to write down contents of any document in a layer.
In MSIE and Mozilla instead of it is teg <iframe> which allows to reach{achieve} similar results. However the purpose of given clause{article} is not detailed consideration of this decision. I shall say only, that this <iframe> is done{made} invisible with help CSS, in him podgruzhaetsja the required document and, after his loading, contents <iframe> enter the name in the necessary layer through .innerHTML.
In Opera there will be problems, t. To. In her it is impossible neither to load anything into a layer, nor to write to him .
Dynamic creation of layers through document.write in Netscape 4
In Netscape 4 will be a mistake to create layers (or it is simple tegi with style attribute style) thus:
document.write (" <div id ='ddd ' style ='position: absolute '>... </div> ")
For some reason Netscape 4 does not digest the instruction{indication} of style for printed through document.write tega. It is recommended to bear{take out} styles in external separate teg <style>:
document.write (" <style> *ddd {position: absolute} </style> ")
document.write (" <div id ='ddd '>... </div> ")
Also it is possible to use the instruction{indication} on class, instead of id tega.
The mouse
Tracking of events of the mouse as the basic control facility viewing of webs - pages, is of great importance.
Coordinates of the mouse
Often it happens it is necessary to learn{find out} the current coordinates of the cursor of the mouse on page, without dependence from on what from elements of the document she is. We shall create function which at event of moving of the mouse will place in global variables mousex and mousey the current coordinates of the cursor concerning the document.
Here is how it is done{made} in various browsers:
? Netscape 4:
// To catch event MOUSEMOVE
document.captureEvents (Event. MOUSEMOVE)
document.onmousemove=function (e) {
mousex = e.pageX
mousey = e.pageY
return true
}
? Mozilla - the same as and in Netscape 4, but otlavlivanie events MOUSEMOVE it is not necessary, i.e. the first line is not necessary:
document.onmousemove=function (e) {
mousex = e.pageX
mousey = e.pageY
return true
}
? Opera:
document.onmousemove=function () {
mousex=event.clientX
mousey=event.clientY
return true
}
? MSIE 4 + - the same as and in Opera, but in him coordinates are counted not concerning the document, and concerning working area of a window, i.e. to coordinates it is necessary to add indications skrollera:
document.onmousemove=function () {
mousex=event.clientX+document.body.scrollLeft
mousey=event.clientY+document.body.scrollTop
return true
}
Connecting functions for different browsers together, we receive:
mousex = 0
mousey = 0
if (isNetscape4) document.captureEvents (Event. MOUSEMOVE)
if (isMSIE) {
document.onmousemove=function () {
mousex=event.clientX+document.body.scrollLeft
mousey=event.clientY+document.body.scrollTop
return true
}
} else if (isOpera) {
document.onmousemove=function () {
mousex=event.clientX
mousey=event.clientY
return true
}
} else if (isNetscape4 || isMozilla) {
document.onmousemove=function (e) {
mousex = e.pageX
mousey = e.pageY
return true
}
}
By itself, do not forget in the beginning to define{determine} a browser.
In Opera event of moving of the mouse will be caught only when it will occur above contents of the document. I.e. if, for example, the document short also borrows{occupies} only half of window of a browser event will be marked only on the top half of window.
