Hiermenus Go Forth, XXIV - DHTML Lab | 9
Hiermenus Go Forth, XXIV:
Version 4.1.2 - The Complete Script (Full-Window)
HM 4.1.2 Changes
We need to identify the existence of the document.compatMode property. If it exists, we know we are dealing with IE6. If the value of document.compatMode is CSS1Compat, we know that IE6 has switched on its standard-compliant engine because of information it has found in the !DOCTYPE declaration.
We declare a new boolean, HM_IECSS, which is true if we have IE6 standards-compliance and false in all other cases:
//4.1.2 HM_IECSS = (HM_IE && document.compatMode) ? document.compatMode == "CSS1Compat" : false;
Why do we need HM_IECSS, you ask? Wasn't IE standards-compliance stored in HM_IEDTD? Couldn't we just use document.compatMode to toggle the value of this already existing variable?
One would think so, but standards-compliance in IE5Mac is not 100% the same as standards-compliance in IE6Win. Therefore, we still need both variables. The declaration of HM_IEDTD is slightly modified:
//4.1.2
//HM_IEDTD = (HM_IE && document.doctype) ? document.doctype.name.indexOf(".dtd")!=-1 : false;
HM_IEDTD = (HM_IE && document.doctype) ? document.doctype.name.indexOf(".dtd")!=-1 : HM_IECSS;
So, we use HM_IEDTD to identify basic standards-compliance in both IE5Mac and IE6Win. In most cases the behavior of the two browsers is identical, so the bulk of our code remains unchanged. HM_IECSS will be used to define the quirks, or additional "strictness," of IE6. There are four minor instances in our script where standards-compliant IE6 code differs from standards-compliant IE5Mac code. All of these are in the
function HM_f_FixSize(makevis){
if(this.isHorizontal) {
if(this.IsVariableWidth) {
for(i=0; i<this.childNodes.length; i++) {
var TempItem = this.childNodes[i];
TempItem.realWidth = HM_IE ? TempItem.scrollWidth : TempItem.offsetWidth;
if(HM_IE5M) TempItem.realWidth += (parseInt(TempItem.style.paddingLeft) + parseInt(TempItem.style.paddingRight))
if(HM_IEnoDTD){
if(TempItem.isLastItem) TempItem.style.width = (TempItem.realWidth) + "px";
else TempItem.style.width = (TempItem.realWidth + HM_SeparatorSize) + "px";
TempItem.style.left = (TempItem.index ? parseInt(TempItem.siblingBelow.style.left) + parseInt(TempItem.siblingBelow.style.width) : 0) + "px";
}
else {
if(TempItem.hasImage && !HM_CurrentTree.RightToLeft) {
//4.1.2
// TempItem.realWidth += HM_ItemPadding;
if(!HM_IECSS) TempItem.realWidth += HM_ItemPadding;
}
TempItem.realWidth -= (parseInt(TempItem.style.paddingLeft) + parseInt(TempItem.style.paddingRight))
//4.1.2
// if(!HM_IE5M && !TempItem.isLastItem) TempItem.realWidth -= HM_SeparatorSize;
if(!HM_IECSS && !HM_IE5M && !TempItem.isLastItem) TempItem.realWidth -= HM_SeparatorSize;
TempItem.allowableWidth = TempItem.tree.ItemWidth - (parseInt(TempItem.style.paddingLeft) + parseInt(TempItem.style.paddingRight));
TempItem.style.width = Math.min(TempItem.allowableWidth,TempItem.realWidth) + "px";
TempItem.style.left = (TempItem.index ? (parseInt(TempItem.siblingBelow.style.left) + TempItem.siblingBelow.offsetWidth) : 0) + "px";
}
if(TempItem.isLastItem) {
LeftAndWidth = parseInt(TempItem.style.left) + parseInt(TempItem.style.width);
this.style.width = LeftAndWidth + (HM_IEnoDTD ? (HM_BorderWidth * 2) : (parseInt(TempItem.style.paddingLeft) + parseInt(TempItem.style.paddingRight))) + "px";
}
}
}
var MaxItemHeight = 0;
for(i=0; i<this.childNodes.length; i++) {
var TempItem = this.childNodes[i];
if(TempItem.index) {
var SiblingHeight = TempItem.siblingBelow.offsetHeight - (HM_IEnoDTD ? 0 : (HM_ItemPadding * 2));
MaxItemHeight = Math.max(MaxItemHeight,SiblingHeight);
}
else {
MaxItemHeight = TempItem.offsetHeight - (HM_IEnoDTD ? 0 : (HM_ItemPadding * 2));
}
}
for(i=0; i<this.childNodes.length; i++) {
var TempItem = this.childNodes[i];
TempItem.style.height = MaxItemHeight +"px";
if(TempItem.imgLyr) {
if(this.tree.RightToLeft){
TempItem.imgLyr.style.left = (HM_ItemPadding + HM_ImageHorizSpace) + "px";
}
else {
//4.1.2
// TempItem.imgLyr.style.left = (TempItem.offsetWidth - ((TempItem.isLastItem ? 0 : HM_SeparatorSize) + (HM_IEnoDTD ? HM_IE5M ? HM_ItemPadding : HM_ItemPadding * 2 : HM_ItemPadding) + HM_ImageHorizSpace + HM_ImageSize)) + "px";
TempItem.imgLyr.style.left = (TempItem.offsetWidth - ((TempItem.isLastItem ? 0 : HM_SeparatorSize) + (HM_IEnoDTD ? HM_IE5M ? HM_ItemPadding : HM_ItemPadding * 2 : HM_IECSS ? HM_ItemPadding * 2 : HM_ItemPadding) + HM_ImageHorizSpace + HM_ImageSize)) + "px";
}
}
}
this.style.height = MaxItemHeight + (HM_IEnoDTD ? HM_BorderWidth * 2 : (HM_ItemPadding * 2)) + "px";
}
else {
if(this.IsVariableWidth) {
var MaxItemWidth = 0;
for(i=0; i<this.childNodes.length; i++) {
var TempItem = this.childNodes[i];
TempItem.realWidth = HM_IE ? TempItem.scrollWidth : TempItem.offsetWidth;
if(HM_IE5M) TempItem.realWidth += (parseInt(TempItem.style.paddingLeft) + parseInt(TempItem.style.paddingRight))
if(!HM_IEnoDTD) {
TempItem.realWidth -= ((parseInt(TempItem.style.paddingRight) + parseInt(TempItem.style.paddingLeft)))
}
MaxItemWidth = i ? Math.max(MaxItemWidth,TempItem.realWidth) : TempItem.realWidth;
if(MaxItemWidth==TempItem.realWidth) TempWidest = TempItem;
}
for(i=0; i<this.childNodes.length; i++) {
this.childNodes[i].style.width = (TempWidest.realWidth + (HM_IEnoDTD ? 0 : (0))) + "px";
if(!HM_IEnoDTD) {
this.childNodes[i].style.paddingLeft = TempWidest.style.paddingLeft;
this.childNodes[i].style.paddingRight = TempWidest.style.paddingRight;
}
}
this.style.width = (this.childNodes[0].offsetWidth + (HM_IEnoDTD ? HM_BorderWidth * 2 : 0)) + "px";
}
for(i=0; i<this.childNodes.length; i++) {
var TempItem = this.childNodes[i];
if (TempItem.index) {
var SiblingHeight =(TempItem.siblingBelow.offsetHeight);
TempItem.style.top = parseInt(TempItem.siblingBelow.style.top) + SiblingHeight + "px";
}
else TempItem.style.top = "0px";
if(TempItem.imgLyr) {
if(this.tree.RightToLeft){
TempItem.imgLyr.style.left = (HM_ItemPadding + HM_ImageHorizSpace) + "px";
}
else {
//4.1.2
// TempItem.imgLyr.style.left = (TempItem.offsetWidth - ((HM_IEnoDTD ? HM_IE5M ? HM_ItemPadding : HM_ItemPadding*2 : HM_ItemPadding) + HM_ImageHorizSpace + HM_ImageSize)) + "px";
TempItem.imgLyr.style.left = (TempItem.offsetWidth - ((HM_IEnoDTD ? HM_IE5M ? HM_ItemPadding : HM_ItemPadding*2 : HM_IECSS ? HM_ItemPadding * 2 : HM_ItemPadding) + HM_ImageHorizSpace + HM_ImageSize)) + "px";
}
}
}
this.style.height = parseInt(TempItem.style.top) + (HM_IE5W ? TempItem.scrollHeight : TempItem.offsetHeight) + (HM_IEnoDTD ? (HM_BorderWidth * 2) : 0) + "px";
}
this.sizeFixed = true;
if(makevis)this.style.visibility = "visible";
}
Let's hope that the developers of IE have finally concluded on a method of calculation of element dimensions and element position. As we have noted in our columns over the years, IE4Win, IE5Win, IE4.0Mac, IE4.01Mac, IE4.5Mac, IE5Mac(default mode), IE5Mac(standards-mode) and IE6.0(standards-mode) do not agree between themselves on element dimensions and element position calculation. Sometimes the differences are minor, other times they are major. The fact remains that if you create a DHTML technique heavy in element sizing and positioning, like HM, then you have to account for the quirks of 8 (count 'em, EIGHT) different versions of Internet Explorer!
Luckily, HM does not support IE4.x for Macintosh, so we are faced with the eccentricities of only FIVE different IE versions in our development.
Files Changed in Version 4.1.2
- HM_ScriptDOM.js
You will need to overwrite previous versions of the above file to upgrade to 4.1.2.
On the next page, the sample page included in the download.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: October 30, 2001
Revised: October 30, 2001
URL: https://www.webreference.com/dhtml/column60/5.html
Find a programming school near you