Javascript image viewer not working in Internet Explorer

Question

I did the same kind of image view mentioned below on the site for my site. http://www.javascriptkit.com/script/script2/backbox/ The image viewer works fine in Chrome but doesn't work in Internet Exlporer; I didn’t provide my website details for security reasons, but you are considering the problem by copying the link below in Chrome and Internet Explorer. http://www.javascriptkit.com/script/script2/backbox/

Click the "Image in the link above" link and view the error message in Internet Explorer and look at it in another browser to see its working status ... PFB capture

Can any of you tell me why it doesn’t work in Internet Explorer?

Msg error from IE F12 devolper tool console area:

SCRIPT5007: Unable to get the value of the "replace" property: object is null or undefined effects.js, line 1 character 1747

effects.js = http://www.javascriptkit.com/script/script2/backbox/js/effects.js

If you need sample js files, please refer to http://www.javascriptkit.com/script/script2/backbox/backboxfiles.zip

HTML is used;

<link rel="stylesheet" href="backbox.css" type="text/css" /> <script type="text/javascript" src="js/prototype.compressed.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/dhtmlHistory.js"></script> <script type="text/javascript" src="js/customsignsheader.js"></script> <div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()"> <a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes"> <img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a> </div> <a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a> <a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a> <a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a> <script type="text/javascript" src="js/customsignsfooter.js"></script> 

Answer 1

regarding your concern why this is happening in IE and not in chrome, which is because of this if(/MSIE/.test(navigator.userAgent) condition if(/MSIE/.test(navigator.userAgent) , which is true when your IE browser

to fix the problem, as you said in the comment, you can add the condition 'undefined.
just replace this line:

 if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});} 

from:

 if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}} 

and this line:

 if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")});} 

from:

 if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")});}} 

in effects.js file

Answer 2

Open the developer tools in IE (press F12) and go to the "Console" tab. You should be able to see there that there is a mistake with the effects. Js script:

 SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined effects.js, line 1 character 1747 

This should at least give you the opportunity to start your search.

... and if you are lazy, the actual line of code in which it does not work is as follows:

 Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"") 

The getStyle call explicitly returns null, so the subsequent call to replace will fail.

Answer 3

Internet Explorer does not currently support full HTML5 support. Therefore, any manipulation of HTML5 tags or elements will fail. It is worth trying to include the html5shiv library, which makes IE believe that these tags exist.