Forcing slides to stay at the top of its container [closed]

Question

This is a bit difficult to explain but I'll give it a shot. I'm using this slider tutorial(http://css-tricks.com/slider-with-sliding-backgrounds/) to create a step form.

It's working perfectly well and all but I have a tiny problem, I have a section for uploading pictures(large background pictures) and I'm not resizing the height.

Since this upload section sits on top of the first slide, when I upload an image it pushes the second and third slide down. Is there way to make the other slides(2 & 3) stay at the top regardless of what's done to the first slide?

A quick diagram to help further explain what I'm on about.

Ps: I follow the same semantics as they used in the tutorial. e.g.. id's, classes etc.

Answer 1

You could do it by storing the original .offset() using .data() like so:

Working Example

$('#slide-1').data('offset-top', $('#slide-1').offset().top); //store the initial offset top 

$('#add').click(function () { // click the button to add an image
    $('div.image-holder').html('<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /> '); 

    $('#slide-1, #slide-2').offset({ // keep slides 1 and 2 in their original positions
        top: $('#slide-1').data('offset-top')
    });
});