SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Bug in Internet Explorer 9 concerning Element object?

    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:
    Code JavaScript:
     document.body instanceof Element

    Any suggestions to what might have gone wrong?

    Code JavaScript:
    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 ;
     
    };

    It all works fine in Chrome 25 and Firefox 19.0.
    var alive = learning ? true : false ;

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After several hours of despair, it now works again for no apparent reason!

    Posted the same question over here:
    http://stackoverflow.com/questions/1...element-object

    My latest comment to that post:
    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!

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,052
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh well, at least it's working now and you can stop despairing
    Thanks for taking the time to let us know you got it (kinda) solved.

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jonas-e View Post
    After several hours of despair, it now works again for no apparent reason!

    Posted the same question over here:
    http://stackoverflow.com/questions/1...element-object

    My latest comment to that post:
    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.).
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But why would it still work after I removed the tag again ..
    var alive = learning ? true : false ;

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Without seeing the whole page, it's hard to tell what might be causing the browser to sometimes go out of standards mode.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The w3schools doc is scarse on the Element class:
    http://www.w3schools.com/jsref/dom_obj_element.asp

    But Sitepoint's is more elaborate:
    http://reference.sitepoint.com/javascript/Element

    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:
    Code JavaScript:
      this.setContent = function(c){
        if(c instanceof Element){
          this.$contentDiv.empty().append(c);
        } else {
          this.$contentDiv.html(String(c));  
        }
      };

    Any suggestions how to achieve the above without running into issue with the buggy support for Element?

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works, although less concise:
    Code JavaScript:
      this.setContent = function(c){
        if(typeof c === 'string'){
          this.$contentDiv.html(c);        
        } else {
          this.$contentDiv.empty().append(c);
        }
      };

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is back today:
    1. At the first page load of the day, IE9 claims that 'Element' is undefined.
    2. Tried with 'Node' instead - same problem.
    3. Put the meta tag in the page header: <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    4. It works.
    5. Also after I remove the tag.

    Guess I should configure Oracle Apex to always include that meta tag on the pages ...

  11. #11
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jonas-e View Post


    Guess I should configure Oracle Apex to always include that meta tag on the pages ...
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice!
    var alive = learning ? true : false ;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •