How do I use a shim for a classList error in IE9?

437 views Asked by At

I am trying to popup an image when an icon is pressed. The image has a cross which I then use to close the image. In ie10 this works but in ie9 (and ie8) I get the error with classList. I have tried various shims but the error stays. Not sure I am using the shim properly.

function myPopFunction(elem) {
var popup = document.getElementById(elem.id+"a");
popup.classList.toggle("showpop");

Unable to get property 'toggle' of undefined or null reference

The HTML is:

<div class="popup" onclick="myPopFunction(this)" id="myPop1">
<img src="Images/Slightly%20Smile.png" width="15">
<span class="popupimage" id="myPop1a">
    <div style="position: relative;">
        <img src="Images/dilbert_agile_programming.gif">
        <img src="Images/Cross%20hair%20white%20border%20small.png" class="dropshadow" width="25">
    </div>
</span>

The CSS is:

.dropshadow {
border-radius:50%; 
box-shadow: 5px 5px 3px #888888;
position:absolute;
top:-10px; 
right:-10px;    
}

.popup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popupimage {
visibility: hidden;
position: absolute;
z-index: 1;
top:100%;
left: -320px;  
}
.popup .showpop {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
from {opacity: 0;} to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;} to {opacity:1 ;}
2

There are 2 answers

1
José Quinto Zamora On

Try using this polyfill:

https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/Element/prototype/classList/polyfill.js

That is working fine for IE8 and IE9, but not working for IE10 and IE11.

enter image description here

0
user59727 On

I managed to make it work in iE9. Changed the code to:

function myPopFunction(elem) {
var popup = document.getElementById(elem.id+"a");
var cl=classList(popup);
cl.toggle("showpop");
}

I have just realised that I actually also want it to work in IE7. The classList.js shim I posted a link to above does not work in ie7.