Home/ Questions/Q 9275917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T16:42:18+00:00

I have a problem with a menu in css/jQuery, works fine in Firefox, but

  • 0

I have a problem with a menu in css/jQuery,
works fine in Firefox, but in IE, Opera, Chrome… when i hover mouse on element it goes to the left edge of page…

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <style type="text/css"> .outer {width: 46px; height: 40px; position: fixed; z-index: 999999; display: block; top: 25%; right: 0px; background: #036; }.inner {overflow: hidden;width: 100px;} .modal {display: none;} .modal-inner {width: 600px;margin: 100px auto;height: 300px;background: #fff !important;border: 12px solid rgba(222, 222, 222, 0.8);z-index: 999999;border-radius: 5px;}.backdrop {z-index: 999998;}</style>

</head>
<body>

    <div class="outer">
        <div class="inner" style="">Subscription</div>
    </div>

    <script type="text/javascript">
        $('.outer').on('mouseenter', function () {
            $(this).animate({ left: "-=100", width: "+=100" });
        });
        $('.outer').on('mouseleave', function () {
            $(this).delay(200).animate({ left: "+=100", width: "-=100" });
        });
        $('.outer').click(function () {
            $('.outer').animate({ left: "+=146" });
            $('.modal').modal();
        });
    </script>

    <div class="modal">
        <div class="modal-inner">
            Lorem ipsum
        </div>
    </div>

</body>
</html>

Where did I made a mistake?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is happening because I think firefox is pretty good at guessing value of left offset of .outer (when its not explicitly specified) and so $(this).animate({ left: "-=100", width: "+=100" }); works perfectly. In case of other browsers left is not defined and its not auto calculated so animate causes it to set to 0 immediately and then it animates on left which is clipped and not shown.
    In this solution we set left to 100% explicitly and add a negative margin equal to the width of div.outer to position it correctly.
    like this

    .outer {
width: 46px; height: 40px; position: fixed; z-index: 999999; display: block; top: 25%; right: 0px; background: #036;
//add this
left:100%;
margin-left: -46px;
}

    working fiddle

    • 0