Replace setAttribute with IE compatible script

Question

I am trying to create a pop-up message that disables the rest of the screen until you confirm it, only by using CSS and JavaScript (and without the alert function).

Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx declares that setAttribute is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.

Here is my code:

<html>

<style type="text/css">

.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}

.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}

.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px;
background-color: #999999;
color: #000000;
font-size: 20px;
}

</style>

<script type="text/javascript">

function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.setAttribute('id','overlay');
overlay.setAttribute('class','overlay');
document.body.appendChild(overlay);

var overlaytext = document.createElement('div');
overlaytext.setAttribute('id','overlaytext');
overlaytext.setAttribute('class','overlaytext');
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);

var overlaybutton = document.createElement('input');
overlaybutton.setAttribute('type','button');
overlaybutton.setAttribute('id','overlaybutton');
overlaybutton.setAttribute('class','overlaybutton');
overlaybutton.setAttribute('value','OK');
overlaybutton.setAttribute('onclick','deleteoverlay()');
document.body.appendChild(overlaybutton);
}

function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}

</script>

<body>

<input type="button" value="Show message" onclick="showoverlay('Message text')"/>

</body>
</html>

It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the setAttribute method, because it only puts in the text and the button, but without the formatting (i.e. class was not applied) and also clicking the newly created button does not remove the objects (i.e. either id was not applied, or there is some additional incompatibility with portions of the code that remove the objects).

I tried to replace setAttribute like this:

<script type="text/javascript">

function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.class = 'overlay';
document.body.appendChild(overlay);

var overlaytext = document.createElement('div');
overlaytext.id = 'overlaytext';
overlaytext.class = 'overlaytext';
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);

var overlaybutton = document.createElement('input');
overlaybutton.type = 'button';
overlaybutton.id = 'overlaybutton';
overlaybutton.class = 'overlaybutton';
overlaybutton.value = 'OK';
overlaybutton.onclick = 'deleteoverlay()';
document.body.appendChild(overlaybutton);
}

function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}

</script>

But this time it does not even add the text and the button.

So, how to make this script IE compatible, both showing all the elements and then removing them?

Thanks

Travis J · Accepted Answer · 2013-03-11 00:49:56Z

7

Use this as your doctype

<!DOCTYPE html>

and then put this in the head of the document

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

and then enjoy using setAttribute and a number of other features which this will allow to properly work on IE8+ environments.

answered Mar 11, 2013 at 0:49

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kaboom1 Over a year ago

Thanks, now I don't have to maintain two separate codes - for IE and for other browsers.

lmortenson · Accepted Answer · 2013-03-11 00:20:35Z

5

The correct way to set a class in your second example is:

overlaybutton.className = 'overlaybutton';

That will get classes working in IE. As far as deleting elements goes, I'd recommend reformatting your event handling attachment like so:

overlaybutton.onclick = deleteoverlay;

answered Mar 11, 2013 at 0:20

lmortenson

1,60511 silver badges11 bronze badges

2 Comments

kaboom1 Over a year ago

This did the trick, perfect! Now the message window shows up properly and also disappears after clicking the button. One thing remains, though - the first div (which is supposed to cover the original content with transparent black area) does not appear in IE, do you have any idea why?

kaboom1 Over a year ago

@Imortenson Never mind, found it. It was due to background-color: rgba(0,0,0,0.2); Instead, I used background-color: #000000; opacity: 0.2; filter: alpha(opacity=20); and everything works now.

Aiias · Accepted Answer · 2013-03-11 00:09:32Z

1

I have run into this issue as well. If you are able to include jQuery on the site, you can use $('#overlay').attr('class', 'overlay');. jQuery is extremely useful for making cross-browser compatible code.

answered Mar 11, 2013 at 0:09

Aiias

4,7481 gold badge20 silver badges34 bronze badges

2 Comments

kaboom1 Over a year ago

I am not familiar with jQuery. However, if that is the only option, I will have to have a look at it.

Bryan Grace Over a year ago

If it can be done with jQuery, it can be done without jQuery.

Collectives™ on Stack Overflow

Replace setAttribute with IE compatible script

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related