Question

I got a side bar (fixed on the right side) which is made with 3 images, Top.png, Mid.png, Bot.png. I was wondering if there is a way to load those 3 images during runtime and create/merging into a new one (sideBar.png), without saving it to the HD.

The point is, as I don’t know the height of the screen, I am placing the Mid image as many times as it is needed to fill the space between the Top.png and the Bot.png.

Using:

• Javascript
• HTML 5
• CSS 3

EDITED:
and the CSS, its the same for all 3 parts… it only changes the url, name and position:

$("#Mid").animate({right: "-230px",}, 500 );
$("#Top").animate({right: "-230px",}, 500 );
$("#Bot").animate({right: "-230px",}, 500 );


#Bot {
        position: absolute;
        top:495; 
        right:0;
        width: 230px;
        height: 35px;
        background-image: url(/images/Bot.png);
    }

Answer 1

You haven’t shown the HTML markup, but I’m guessing you should put the three images in a container div and animate the container div with one animation, not three. Then, there will not be anything out of sync during the animation.