Jump to content
Search Community

Hajad

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by Hajad

    Change the z-index for currently animated div

    in GSAP

    Posted

    How (if possible) can i change the depth of a div so that the one currently animated is on top of the others. I have a simple example here...

     

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#rB{
position:absolute;
left:50px;
width:100px;
z-index:1;
}
#gB{
position:absolute;
left:160px;
width:100px;
z-index:2;
}
#bB{
position:absolute;
left:270px;
width:100px;
z-index:3;
}
</style>
<script type="text/javascript" src="TweenMax.min.js"></script>
<script>
function init(){
var redBox = document.getElementById("red");
var greenBox = document.getElementById("green");
var blueBox = document.getElementById("blue");
/*TweenMax.to(redBox, 1.5, {width:150});
TweenMax.to(greenBox, 1.5, {width:150});
TweenMax.to(blueBox, 1.5, {width:150});*/
TweenMax.to(redBox, 1.5, {width:150});
TweenMax.to(greenBox, 1.5, {width:150,delay:1.5});
TweenMax.to(blueBox, 1.5, {width:150,delay:3});
/*var tl = new TimelineMax();
tl.to(redBox, 1.5, {width:150});
tl.to(greenBox, 1.5, {width:150});
tl.to(blueBox, 1.5, {width:150});*/
/*var tl = new TimelineMax();
tl.to(redBox, 1.5, {width:150});
tl.to(greenBox, 1.5, {width:150},-0.5);
tl.to(blueBox, 1.5, {width:150},-0.5);*/
}
</script>

</head>
<body onload="init()">
<div id="rB"><img src="red.gif" id="red" /></div>
<div id="gB"><img src="green.gif" id="green" /></div>
<div id="bB"><img src="blue.gif" id="blue" /></div>
</body>
</html>

    Tweening CSS width dont work in Firefox but everywere else

    in GSAP

    Posted

    This work in IE, Safari, Opera, Chrome but NOT in Safari. Any advice?

     

    Sorry to have wasted your time. I should have referenced to the variabel - pElementet - instead of the id of - p1 -. This work (se code) but still wonder why the former worked in all browsers but Firefox, Hmm?

    <!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(pElementet, 2,{css: {width:"400px"}});
document.getElementById("p1").innerHTML = "Rullat på";
}

function rullaAv() {
 TweenMax.to(pElementet, 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>

    Tweening CSS width dont work in Firefox but everywere else

    in GSAP

    Posted

    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>

×
×
  • Create New...