mouseover popup using js not working only in IE

UnP0ssible · Share | #1 (**permalink**) 07-15-2012, 04:45 PM

This code works in opera, safari, firefox and chrome perfectly but not in IE. Anyone know why it doesnt work in IE?

heres the example: http://purpose.im/yanik/test2.php

heres the code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello World</title>

		<script type="text/javascript">
			function showBox(text, obj) {
				helpNode = document.createElement('div');
				helpNode.id = 'popBox';
				helpNode.setAttribute('class','popBox');
				helpNode.innerHTML = text;
				obj.appendChild(helpNode);
			}

function hideBox() {
	node = document.getElementById('popBox');
	node.parentNode.removeChild(node);
}
</script>
<style type="text/css">
	.popBox {
		position: absolute;
		z-index: 2;
		background: #cccccc;
		width: 600px;
		padding: 0.3em;
		border: 1px solid gray;
	}
	span {
		color: red;
		font-weight: bold;
	}
</style>
</head>
<body>
	<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
	<div onmouseover="showBox('<b>Bar</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
	<div onmouseover="showBox('<b>Biz</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
	<div onmouseover="showBox('<b>Biiz</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
</body>
</html>

JohnnyS · #2 (**permalink**) 07-15-2012, 11:14 PM

i think setting class via setAttribute is not recognized by IE..

Code:

helpNode.setAttribute('class','popBox');

try to use this one..

Code:

helpNode.className = 'popBox';

webcosmo · #3 (**permalink**) 07-16-2012, 09:08 PM

you can use jquery for those browser dependent javascript codes.

mimo91 · #4 (**permalink**) 07-17-2012, 08:29 AM

Quote:

Originally Posted by webcosmo

you can use jquery for those browser dependent javascript codes.

Jquery is the best for the popup and are cross browsers i prefer using them to avoid browser errors