Question

Got a page based on Google Wave (http://wave.google.com/maintenance/index.html)

but instead of clouds going left to right I wanted right to left so I swapped all references to ‘left’ to ‘right’:

#cloud

position: absolute;
left: 5%;
top: 15px;
z-index: 2;
width: 120px;
height: 91px;
background-image: url(../images/cloud.gif);
background-repeat: no-repeat;

becomes:

#cloud1

position: absolute;
right: 60%;
top: 115px;
z-index: 2;
width: 150px;
height: 163px;
background-repeat: no-repeat;

And the JS call is:

function cloud1Move()
{
    if (!cloud1Moved)
    {
        $("#cloud1").css("right", $("#cloud1").offset().right)
    }
    $("#cloud1")
    .animate(
    {
        right: $("#sky").width()
    },
    cloud1Moved ? 12000 : 10000,
    "linear",
    function()
    {
        $(this).css("right", -parseInt($(this).css("width")))
        cloud1Moved = true;
        cloud1Move();
    }
  );
}

This was working in FF but Chrome/Safari seems to bunch all the elements on the right side of the screen on load and then animate right to left. Once they leave the screen on the left they work as expected. It is just the initial load that is not what I expected.

If I just use left->right then they are rendered correctly in place across the screen and behave as expected.

Any insights on what I am doing incorrect (probably in the JS call)

Thanks,
Rob

Answer 1

Well… $(“#cloud1”).offset() does not return an object with the property “right”, only “left” and “top”.

http://api.jquery.com/offset/

Better use:

 $("#cloud1").css("left", $("#cloud1").offset().left)

And in your css too.

left: 40%;