JQuery not Working in chrome?

Question

Hi everyone!

I have some code here which works perfectly in firefox but not in chrome or IE,

my javascript is thus

`
$(document).ready(function() {
                $("#clientLoginPop").show();                                 
                $("#clientLoginPop").animate({"left": "-=400px"}, "fast");
                });
                $("#clientLoginCloseLink").click(function () {
                $("#clientLoginPop").animate({"left": "+=400px"}, "fast");
                });
                $("#contactUsPopLink").click(function () {
                $("#contactUsPop").show();
                $("#contactUsPop").animate({"left": "-=437px"}, "fast");
                });
                $("#contactUsClose").click(function () {
                $("#contactUsPop").animate({"left": "+=474px"}, "fast");
                });
});
`

and finally the css of the div looks like this, i think rather importantly it's aligned to the right of the browser: (the client login div looks similar just a different height)

`
#contactUsPop 
{
    width:437px;
    right:-437px;
    margin-top:220px;
    position:fixed;
    height:217px;
    background-color:white;
    z-index:2;
}
`

so what happens in firefox is the div animates to the left and then when it closes it moves back to the right. when in chrome the div doesn't seem to pop up at all?

the URL of the site is this:

http://clearcreativegroup.com/devcorner/clear3/

the tabs are on the right hand side of the browser, any advice would help tons, thank you!

Answer 1

I think Chrome and Firefox interpret it differently when you assign both a left and right property. Try either animating the right property instead, or removing it before animating left.

Answer 2

In chrome... the firs time you click the anchor it appears on the far left of the window and moves to the left.

Have you tried setting the left/right properties to a specific value instead of adding or subtracting to it?

ex:

$("#clientLoginPop").animate({"left": "-1000px"}, "fast");

paired with

$("#clientLoginPop").animate({"left": "400px"}, "fast");

Answer 3

$("#clientLoginPop").animate({"right": "+=400px"}, "fast");

Answer 4

I usually use CSS float, or position:absolute; to adjust the web interface.

to using CSS position:absolute effectively, use position:relative on the parent block.

this is nice reference for create login like twitter.