Question

I’m trying to animate a background image to move down a set amount of pixels but remain in the center of the page. Upon another click of an element I need it to move back to the top, but still remain in the center. Below is the current code:

        $(document).ready(function() {
        $('#email_campaigns').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            if($('#email_campaigns_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#email_campaigns_box').slideToggle("slow");
            $('#client_login_box').slideUp("slow");             
        });

        $('#client_login').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            alert(width);

            if($('#client_login_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#client_login_box').slideToggle("slow");
            $('#email_campaigns_box').slideUp("slow");              
        });
    });

I cannot pass ‘center’, as it will onyl accept numeric values. My goal is to calulate the center of the page in pixels (width = (width / 2) – 700;), and then animate to this rough position (it’s normally out by a few pixels due to scrollbars, and then force to the center using a .css() call.

The problem is that IE does not want to play ball. IE will not animate at all. Firefox/Safari/Chrome all work as expected.

Below is a live example:
http://recklessnewmedia.com/new/#
(click ’email campaigns’ at the top).

Thanks

Answer 1

I would suggest putting the background on the container div for the bottom of the site. Then expand the login above and let the browser do the work for you!

A simple demo of the basic functionality is here:

http://jsfiddle.net/UkGva/

That way you would have to write less code, and jquery wouldn’t need to do any heavy lifting. Although it will take some restructuring, just make the login (hidden part) in a container above the container that has the bottom.

And also this should work with scrollbars and all (I saw it was a little off even in a working browser like chrome). And you would have less javascript to write!