I added the AOP.Dimensions class below to my javascript library a couple of weeks ago and tested it daily in IE9. It has been working fine all along. Until now - suddenly I get this error message on the “e instanceof Element” expression:
‘Element’ is undefined
If I open another web page, e.g. google.com, the following works fine from the console:
document.body instanceof Element
Any suggestions to what might have gone wrong?
AOP.Dimensions = function(e){
// Init:
var _this = this;
this.CLASS_NAME = 'AOP.Dimensions';
if(!(e instanceof Element)){
AOP.log(this.CLASS_NAME+' error: Invalid argument.',arguments,this);
return false;
}
var $e = $(e)
, off = $e.offset()
, w = $e.outerWidth(true)
, h = $e.outerHeight(true)
;
// Visible?
var V = this.visible = ( e.style.display === 'none' || e.style.visibility === 'hidden' ) ? false : true ;
// Properties:
this.element = e;
this.offset = V ? off : {left:0, top:0};
this.left = V ? off.left : 0 ;
this.top = V ? off.top : 0 ;
this.right = V ? this.left + w : 0 ;
this.bottom = V ? this.top + h : 0 ;
this.width = V ? w : 0 ;
this.insideWidth = V ? $e.width() : 0 ;
this.height = V ? h : 0 ;
this.insideHeight = V ? $e.height() : 0 ;
this.hPad = V ? $e.innerWidth() - $e.width() : 0 ;
this.vPad = V ? $e.innerHeight() - $e.height() : 0 ;
this.hBorder = V ? (this.width - this.hPad) - this.insideWidth : 0 ;
this.vBorder = V ? (this.height - this.vPad) - this.insideHeight : 0 ;
this.insideTop = V ? this.top + (this.vBorder/2) + (this.vPad/2) : 0 ;
this.insideBottom = V ? this.bottom - (this.vBorder/2) - (this.vPad/2) : 0 ;
this.insideLeft = V ? this.left + (this.hBorder/2) + (this.hPad/2) : 0 ;
this.insideRight = V ? this.right - (this.hBorder/2) - (this.hPad/2) : 0 ;
};
Now this is weird: I just put your meta tag into the document head: <meta http-equiv=“X-UA-Compatible” content=“IE=edge” /> Now it works. Then I removed the tag again. It still works. An believe me, I have cleared the cache a million times!
If that worked, then it sounds like your site was in quirks more or rendering in another IE mode than the current standards. IE=edge forces IE to render in the most recent standards the browser can render in (i.e. IE8 renders in IE8 standards, IE9 renders in IE9 standard, etc.).
Thanks. Can’t show you the whole page - it is behind a firewall. It is Oracle Apex stuff and I am developing a javascript library on top of OpenLayers and Apex. Been working on it for a year and a half now.
It indicates that the support for Element is buggy in older versions of IE. Perhaps I should consider using Node instead, seems less buggy: http://reference.sitepoint.com/javascript/Node
In the example above, using Element is only a “nice to have”. But in this method, it is essential:
When it breaks again, look closely at the content of the page - are you bringing in content from another source which would cause the page rendering mode to change? You might be able to mitigate the problem by correcting the erroneous content.
Adding the meta tag MIGHT fix the problem. But it might not depending on the content.
The reason you see the correction when you add the meta tag is the site is probably cached and adding the meta tag forces the cache to clear.