Forcing slides to stay at the top of its container
css, html, javascript, jquery
Solution
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')
});
});
Problem
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.