Jump to content
Search Community

IE8 hoverOver errors?

mydeadpixel test

By mydeadpixel
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

mydeadpixel test

mydeadpixel

Posted
Posted

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>

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Hi,

 

It will help us to know more about your problem. Does it work in other browsers? or is the problem specific to IE8?

 

Is a particular tween not working or is the whole thing broken? Will the backgroundColor change but not the width?

 

Please elaborate.

 

Thanks

Link to comment
Share on other sites
mydeadpixel test

mydeadpixel

Posted
  • Author
Posted

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}});
  }
);

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

a quick google of "jquery hover toggle ie8" reveals that ie8 has some problems with hover particularly in regards to accessing css attributes inside those hover functions you are toggling.

 

try to log some css attributes inside your hover functions:

 

 

$("#openBtn").hover(
  function () {
 console.log('my background color = ' +  $(this).css('background-color'));
 TweenMax.to($(this), 0.2, {css:{backgroundColor:'green', ease:Power4.easeOut}});
  },
  function () {
 TweenMax.to($(this), 0.2, {css:{backgroundColor:'white', ease:Power4.easeOut}});
  }
);

 

curious to see if in fact the background-color is displayed in the console.

 

it might be worth setting up individual functions for mouseenter() and mouseleave() instead of using the toggle feature of hover().

 

http://www.bennadel....-MouseLeave.htm

 

would be very interested in hearing if this solution works for you.

Link to comment
Share on other sites
mydeadpixel test

mydeadpixel

Posted
  • Author
Posted

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...