By gdinari


2012-05-07 15:07:30 8 Comments

I'm using the diapo slider which seems to work in all other browsers except for internet explorer 8.

After running ie8 in debug mode I get the following errors:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName' prototype.js, line 5988 character 5

return function(className, parentElement) {
    return $(parentElement || document.body).getElementsByClassName(className);
  };

SCRIPT438: Object doesn't support property or method 'fireEvent' prototype.js, line 5736 character 7

if (document.createEvent)
      element.dispatchEvent(event);
    else
      element.fireEvent(event.eventType, event);

    return Event.extend(event);

I am running this slider in the magento platform and it seems that prototype script in the one having the problem. The version of prototype that its using is 1.7 so that rules out the possible fix of a script update.

Note: Although, I'm not having a display issue in ie9, I am getting the following error:

SCRIPT438: Object doesn't support property or method 'dispatchEvent' prototype.js, line 5734 character 7

if (document.createEvent)
      element.dispatchEvent(event);
    else
      element.fireEvent(event.eventType, event);

    return Event.extend(event);

These are the scripts that are required for the diapo slider to work, loaded with the script tag in the header. I'm not sure but maybe some of these scripts are conflicting with existing scripts:

<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/jquery.min.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.mobile-1.0rc2.customized.min.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/diapo.js'></script>

1 comments

@Rob W 2012-05-07 15:09:26

IE8 does not support getElementsByClassName. However, it does support querySelectorAll. So, I suggest to write a polyfill using querySelectorAll.

document.getElementsByClassName('foo')

turns into

document.querySelectorAll('.foo'); // Prefixed dot.

Note that Prototype.js deprecates the use of getElementsByClassName in favour of $$ and Element#select.

A quick fix for IE8:

<!--[if IE 8]><script>
document.getElementsByClassName = 
Element.prototype.getElementsByClassName = function(class_names) {
    // Turn input in a string, prefix space for later space-dot substitution
    class_names = (' ' + class_names)
        // Escape special characters
        .replace(/[[email protected]$%^&*()_+\-=,./';:"?><[\]{}|`#]/g, '\\$&')
        // Normalize whitespace, right-trim
        .replace(/\s*(\s|$)/g, '$1')
        // Replace spaces with dots for querySelectorAll
        .replace(/\s/g, '.');
    return this.querySelectorAll(class_names);
};
</script><![endif]-->

Notes:

  • It does support multiple class names.
  • It does not support empty ('') class names. It's trivial to add support for these, if you want.

Demo: http://jsfiddle.net/HL4FL/21/

@gdinari 2012-05-07 15:17:32

Thanks Rob, but how would I apply this fix?...I updated my post with more relevant details about the scripts used. Please let me know if this helps. Thanks a mil!

@Rob W 2012-05-07 15:19:31

You're using jQuery and Prototype.js on the same page. Any chance that they are conflicting with each other? Diapo does not use Prototype.js, but you're still getting Prototype.js-related errors.

@gdinari 2012-05-07 15:22:57

Yeah, the prototype script is a part of the magento platform so its uploaded by default...I could try to disable it just for the homepage, but Im interested in your polyfill solution too

@Rob W 2012-05-07 15:50:52

@gdinari See updated answer for the polyfill. This has to be included before Prototype.js

@gdinari 2012-05-07 15:56:06

Perfect! Thanks a mil Rob. The days of wrecking my brain was worth it, for this fix. Thank again

@shorif2000 2015-02-02 09:28:12

How can i fix for ie7?

@Rob W 2015-02-02 09:47:45

@bonez Use XPath, e.g. as shown here: stackoverflow.com/questions/6584635/… (note: the code over there does not sanitize the input, so either edit in the parameter sanitization from my answer, or don't use unusual characters in your class name).

Related Questions

Sponsored Content

23 Answered Questions

7 Answered Questions

[SOLVED] "Object doesn't support property or method 'find'" in IE

10 Answered Questions

[SOLVED] SCRIPT438: Object doesn't support property or method IE

1 Answered Questions

[SOLVED] Object doesn't support property or method 'selectbox'

5 Answered Questions

[SOLVED] jQuery Object doesn't support property or method trim() in IE

4 Answered Questions

Sponsored Content