SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE issue with addEventListeners

    I have a script running that includes this statement:

    Code:
    if (!window.isLoaded) {
        window.addEventListener("load", function() {
            threeSixty.init();
        }, false);
    }
    The script works fine everywhere except in good old Internet Explorer. The IE error message points to the 'if' statement above.
    I'm reading that IE does not play nice with addEventListener and needs to be adjusted with perhaps 'attachEvent' to accomodate IE.

    I'm reading and tinkering but can't seem to get it sorted.
    Does anyone have any idea how to get this to play nice with IE?
    Thanks for any input!
    Pandora can't go back into the box - he only comes out.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by icky_thump View Post
    Does anyone have any idea how to get this to play nice with IE?
    The best way in your situation is to not use the load event at all. Just put your script tag at the end of the body, and you won't need to deal with onload situations.

    HTML Code:
    <body>
        ...
        <script src="js/script.js"></script>
    </body>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for the reply.

    Allow me to back away and give you a bigger picture.

    Below is everything in one of the seven different JS files.
    Does your recommendation above still apply?

    Code:
    threeSixty = {
        init: function() {
            this._vr = new AC.VR('viewer', './images/image_##.jpg', [24,12], 
    		{initialPos: [12,1]}, 
                {invert: true}
            );
        },
        didShow: function() {
            this.init();
        },
        willHide: function() {
            recycleObjectValueForKey(this, "_vr");
        },
        shouldCache: function() {
            return false;
        }
    }
    
    if (!window.isLoaded) {
        window.addEventListener("load", function() {
            threeSixty.init();
        }, false);
    }
    Say hi to Antony for me!
    Pandora can't go back into the box - he only comes out.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    With very few exceptions all JavaScript should be attached at the bottom of the web page and not test for the load event.

    The only time a script needs to test for the load event is if it is testing if all the images and/or other files have actually loaded in order to do something else if any didn't load.

    The only time a script shouldn't be attached at the very bottom of the page is where it is making a decision on whether to display the page at all or to instead load another page (or reload the same page outside a frame).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Felgall!

    I'm not sure that my page isn't doing what you just described as the exceptions.
    We took a CAD 360 interactive view and exported it into a webpage.
    It's actually a bunch of individual jpgs that are utilized in sort of a flip-book effect.

    You can see it HERE.

    The export spit out 2 html files, 6 CSS file, 288 jpgs and 7 JS files.
    That's why I was trying not to mess with it too much.

    I'll tinker around with what you're telling me and see what I can make happen.
    Pandora can't go back into the box - he only comes out.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by icky_thump View Post
    I'm not sure that my page isn't doing what you just described as the exceptions.
    If the script is simply using the images and isn't going to do something different if they are not there then it doesn't really need to test if all the images have loaded before it starts.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by icky_thump View Post
    The script works fine everywhere except in good old Internet Explorer.
    Just for the record, (and not to dismiss the onload issue), as I tiptoe warily betwixt the legs of JS colossi I thought I'd mention that IE8 and under don't support addEventListener, but there is a function that is designed to help IE along:

    Code Javascript:
    function addEvent(obj, type, fn) {
      if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
        obj.attachEvent('on'+type, obj[type+fn] );
      } else {
        obj.addEventListener( type, fn, false );
      }
    }

    With that in place, instead of

    Code javascript:
    if (!window.isLoaded) {
      window.addEventListener("load", function() {threeSixty.init();}, false);
    }

    you would use this

    Code javascript:
    if (!window.isLoaded) {
      addEvent(window, 'load', function() {threeSixty.init();})
    }

    I may not have that code quite right, but anyhow, it's something like that.


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
  •