Question

The code works fine.
jsFiddle

The only problem is that it changes its width when slides (when press “click here”). Seems like it cuts the width that corresponds to 100px of the margin-left in #slider.

Why does it “jump” and how to fix it? Is there anything wrong with the code?

What is in there: a slider of the centered div that has a content and a sticky footer.

Answer 1

Not sure if it fits your needs, but you can simply set :

CSS

...

.slider{

    ...

    bottom:0px;

    ...

}

and then simply use jQuery .slideToggle() which will handle the open/closed statuses and is much more smooth:

JS

$("#slide-link").click(function (){

    $('#slider').slideToggle();

});

here’s a sample jsFiddle

EDIT 1

Updated this so that #slide-link toggles too with #slider.

Basically what we do is animate it based on whether #slider is hidden or not:

if(!$('#slider').is(':hidden')){

    $(this).animate({

        top: $('#global-container').height()-23

    },500)

 }else{

    $(this).animate({

        top: '0px'

    },500) 

 }

• JSFIDDLE HERE

EDIT 2

Here’s another more hacky way for not having to deal with that if(#slider is hidden) thus writing the .animate function only once.

Basically $(‘#slider’).is(‘:hidden’) is a boolean and in JS booleans are equivalent to 0/1 values where false = 0 and true = 1, thus you can write:

var hid = $('#slider').is(':hidden')

$(this).animate({

    top: (1-hid)*(contHeight)

 },500)

Where contHeight is the #global-container height – #slide-link height.

• JSFIDDLE HERE

EDIT 3 Scroll Issue

If I got your problem in comment right, when you fill up the content part with allot of words id doesn’t scroll, but the content panel seems to fill the wole #slider and continue out the page without being able to scroll it.

This is due to the fact .content has not a fixed height, this is because we know the footer is 70px high, and simply we want the .content to fill up all the space left inside the #slider, but this way .content doesn’t have a “fixed value” i.e. inside its css there’s no definition for its height. So what we need to do is dynamically tell him how hight it has to be just the way we do it with #slide, so add in the JS

$('.content').height(contHeight-70)

this way you can now add:

overflow:hidden; //this is to prevent orizontal scroll
overflow-y:scroll; // this enables vertical scroll

Hope I got this right.

• JSFIDDLE HERE