This work in IE, Safari, Opera, Chrome but NOT in Safari. Any advice?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="TweenMax.min.js"></script>
<style type="text/css">
body {
margin:0px;
}
p{
background-color:#ff0000;
width:300px;
padding:2px;
text-align:center;
position:absolute;
}
</style>
<script type="text/javascript">
var rullaPa;
var rullaAv;
var pElementet;
function testar() {
pElementet = document.getElementById("p1");
pElementet.addEventListener("mouseover", rullaPa, false);
pElementet.addEventListener("mouseout", rullaAv, false);
}
function rullaPa() {
TweenMax.to(p1, 2,{css: {width:"400px"}});
document.getElementById("p1").innerHTML = "Rullat på";
}
function rullaAv() {
TweenMax.to(p1, 2,{css: {width:"300px"}});
document.getElementById("p1").innerHTML = "Rullat av";
}
window.onload = testar;
</script>
</head>
<body>
<p id="p1">Byt text med olika JavaScript händelser</p>
</body>
</html>