0

I am using this code on my site:

var panel = $('.couch-hide');
    var originalPos = panel.css("right");
    panel.toggle(function() {$(this).animate({right:0},1000, 'easeOutBounce');},function(){$(this).animate({right:originalPos},1000);}

);

In FF it works flawlessly, but in IE, it doesn't pop out on click. Also, since im using the CSS right it shows the horizontal scrollbars but in FF it doesn't. Any ideas on what I can do to fix this issue?

Improve this question
3
  • Have you checked what value "originalPos" is set to in IE?
    – Philippe Leybaert
    Commented May 31, 2009 at 7:50
  • What would be the best way to check that? You are talking about the variable right? Let me try to find a firebug but for IE, I know there is one out there.
    – user39980
    Commented Jun 11, 2009 at 13:59
  • I found this: debugbar.com/?langage=en - I will try that out.
    – user39980
    Commented Jun 11, 2009 at 14:02

1 Answer 1

Reset to default
1

Well, works the same for me in Opera, Firefox and IE6/8.

Using the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>sandbox</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.easing.js"></script>
  <script type="text/javascript">
    $(function(){
      var panel = $('.couch-hide');
      var originalPos = panel.css("right");
      panel.toggle(
        function(){$(this).animate({right:0}, 1000, 'easeOutBounce');},
        function(){$(this).animate({right:originalPos}, 1000);}
      );
    });
  </script>
  <style type="text/css">
    .couch-hide {
      position: absolute;
      right: 100px;
    }
  </style>
</head>
<body>
  <div class="couch-hide">Click me!</div>
</body>
</html>

The text bounces against the right edge of the screen and then flies back.

Although using toggle to do that seems strange. At least the documentation doesn't mention what should happen when you provide two functions for it. Or is this the behaviour added by jquery.easing.js? Not familiar with that one.

It would be helpful if you provided your HTML and CSS too.

Improve this answer
2
  • Hey, sorry for the delay and thank you for the response, see in FF it works fine here: catonthecouchproductions.com/new - but in IE you will see what I mean. Thank you.
    – user39980
    Commented Jun 11, 2009 at 13:58
  • First of all console.log() is not supported by IE (and some other browsers too) and so the script crashes at that point. After that the couch seems to be positioned off the screen and IE adds a horisontal scrollbar. To avoid that, you might want to try animating it as background image instead... I don't really know, haven't needed to do anything like that.
    – Rene Saarsoo
    Commented Jun 11, 2009 at 16:34