html - Javascript image viewer not working in internet explorer - Stack Overflow

admin管理员组

文章数量:1406063

I have made a similar kind of image viewer mentioned in below site for my website. / The image viewer is working fine in Chrome but not working in Internet Exlporer; I have not given my website details for security reasons but you view the issue by copy pasting below link in Chrome and Internet Explorer. /

Click the Image in above link and see the error in internet explorer & see the same in other browser to see its working condition... PFB snap shot

Could any one of you tell why is not working in internet explorer ?

Error Msg from IE F12 devolper tools console area is :

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

effects.js = .js

If you need sample js files, please get that from .zip

HTML used is;

<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototypepressed.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>

I have made a similar kind of image viewer mentioned in below site for my website. http://www.javascriptkit./script/script2/backbox/ The image viewer is working fine in Chrome but not working in Internet Exlporer; I have not given my website details for security reasons but you view the issue by copy pasting below link in Chrome and Internet Explorer. http://www.javascriptkit./script/script2/backbox/

Click the Image in above link and see the error in internet explorer & see the same in other browser to see its working condition... PFB snap shot

Could any one of you tell why is not working in internet explorer ?

Error Msg from IE F12 devolper tools console area is :

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

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

If you need sample js files, please get that from http://www.javascriptkit./script/script2/backbox/backboxfiles.zip

HTML used is;

<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.pressed.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>

• javascript
• html
• internet-explorer
• client-side

Share Improve this question Follow edited Nov 15, 2012 at 6:19 logan asked Nov 10, 2012 at 16:56 loganlogan 8,4163838 gold badges122122 silver badges188188 bronze badges 4

• Is it logging any errors in IE – defau1t Commented Nov 10, 2012 at 17:37
• 1 please copy paste this link and see the output javascriptkit./script/script2/backbox Click on the image – logan Commented Nov 10, 2012 at 17:50
• Works fine for me in IE8 – Manse Commented Nov 13, 2012 at 14:21
• 2 @ManseUK : Its not working in my IE8; Do i need to setup anything else? Pls find below error: SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined effects.js, line 1 character 1747 javascriptkit./script/script2/backbox/js/effects.js – logan Commented Nov 15, 2012 at 6:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

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

for correcting the issue, as you said in a ment you can add a 'undefined' condition.
just replace this line:

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

with:

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,"")});}

with:

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

in the effects.js file

Open developer tools in IE (press F12) and click the "Console" tab. You should be able to see in there that there's an error 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

That should at least give you somewhere to start looking.

...and if you're that lazy, the actual line of code it's failing on is this :

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

The getStyle call is clearly returning null, so subsequently calling replace will fail.

Internet Explorer does not currently have full HTML5 support. Any manipulation of HTML5 related tags or elements will therefore fail. It is worth trying to include the html5shiv library, which tricks IE into believing these tags exist.

本文标签： htmlJavascript image viewer not working in internet explorerStack Overflow