mydeadpixel
mydeadpixel's Achievements
1
Reputation
-
Bloody IE8, twas the fact that I didn't declare the " background-color:#CCC;" in my style sheet on the button I wanted highlighted. I think the problem is something to do with this IE hasLayout melarky. Here's teh code if anyone's interested. Cheers again Carl \m/ <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { width:98%; height:100%; } a { color:#FFF; text-decoration:none; } a:hover { color:#FFF; } #openBtn { padding:5px; margin: 5px; background-color:#CCC; } a#closeBtn { position:relative; top:20px; left:10px; width:auto; height:auto; padding:5px; margin: 5px; color: #060; background-color:#FFF; display:none; } #slider { position: absolute; top:0; right:0; width:0px; height:100%; background-color:#060; color:#FFF; } </style> </head> <body> <div style="width:auto; height:auto; position:absolute; top:20px; left:20px;" id="openBtn"><a href="#">OPEN IT</a></div> <div id="slider"> <a href="#" id="closeBtn">CLOSE IT</a> </div> <script type="text/javascript" src="js/TweenMax.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script language="JavaScript" type="text/javascript"> jQuery(function( $ ){ $("#openBtn").hover( function () { TweenMax.to($(this), 0.3, {css:{scale:1.5,backgroundColor:'#060', ease:Power4.easeOut}}); }, function () { TweenMax.to($(this), 0.3, {css:{scale:1,backgroundColor:'#CCC', ease:Power4.easeOut}}); } ); $("#openBtn").on('click', function () { TweenLite.to($('#slider'), 0.6, {css:{width:'70%', ease:Power4.easeOut}}); TweenLite.to($('#closeBtn'), 0.6, {css:{display:'inline', ease:Power4.easeOut}}); }); $("#closeBtn").on('click', function () { TweenLite.to($('#closeBtn'), 0.6, {css:{display:'none', ease:Power4.easeOut}}); TweenLite.to($('#slider'), 0.6, {css:{width:'0%', ease:Power4.easeOut}}); }); }); </script> </body> </html>
-
I just changed my html to this and it works fine now. <div id="openBtn"><a href="#">OPEN IT</a></div> <div id="slider"> <a href="#" id="closeBtn">CLOSE IT</a> </div> Seems to freak out being on an <a>
-
This issue only seems to effect ie8 though, which annoyingly is what the client is running!
-
I'm guessing there is some noobian issue in that part of teh code perhaps?
-
My bad mate. It just wont fire at all, it says there is a error on line 2088 in TweenMax.js. But if I just deleted the following hover command it works fine? $("#openBtn").hover( function () { TweenMax.to($(this), 0.2, {css:{backgroundColor:'green', ease:Power4.easeOut}}); }, function () { TweenMax.to($(this), 0.2, {css:{backgroundColor:'white', ease:Power4.easeOut}}); } );
-
Hi all! I can't quite get this to work in IE8, it's fine in all the latest browsers though.. Cheers G <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { width:100%; height:100%; } #btn { border:none; background-color:#CCC; padding:10px; color:#CC0000; font-size:24px; margin:0; } #slider { position: absolute; top:0; right:0; width:0px; height:100%; background-color:green; color:#FFF; } </style> </head> <body> <a href="#" id="openBtn">OPEN IT</a> <div id="slider"> <a href="#" id="closeBtn">CLOSE IT</a> </div> <script type="text/javascript" src="js/TweenMax.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $("#openBtn").hover( function () { TweenMax.to($(this), 0.2, {css:{backgroundColor:'green', ease:Power4.easeOut}}); }, function () { TweenMax.to($(this), 0.2, {css:{backgroundColor:'white', ease:Power4.easeOut}}); } ); $("#openBtn").on('click', function () { TweenLite.to($('#slider'), 0.6, {css:{width:'70%', ease:Power4.easeOut}}); }); $("#closeBtn").on('click', function () { TweenLite.to($('#slider'), 0.6, {css:{width:'0%', ease:Power4.easeOut}}); }); }); </script> </body> </html>
-
Perfection! Cheers buddy. G
-
the above code works perfectly when I use individual statements to pause.. item1Anim.pause(); item2Anim.pause(); but I'm trying to minimise my code. Ta
-
Hello, I might be a right n00b here but why can't I get this to work, and am I going the right way about this? When I take out the itemAnim.pause(); it works fine. Long and short of it I'm I'm making a basic game where I've got about 14 items that I want going off at different times and each item have hoverover features and other on click commands etc. Here is the code stripped down... var itemArray:Array=new Array(item1,item2); for (var i:int = 0; i < itemArray.length; i++) { itemArray[i].addEventListener(MouseEvent.CLICK, addClick); } var item1Anim:TimelineLite = new TimelineLite(); item1Anim.insertMultiple([new TweenLite(item1, 5, {y:"800", ease:Linear.easeNone})], 0, TweenAlign.START); var item2Anim:TimelineLite = new TimelineLite(); item2Anim.insertMultiple([new TweenLite(item2, 5, {y:"800", ease:Linear.easeNone})], 2, TweenAlign.START); function addClick(event:MouseEvent):void { var lastclicked = event.target.name; var itemAnim = lastclicked + "Anim"; trace (itemAnim); itemAnim.pause(); //this is the bugger that throws out the code... } Thanks for any help Kind regards Gary test.fla.zip
