CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Emile Kelly
Emile Kelly

Reputation: 75

Animating position of top div creates space

I have a div called #Wrap around my page content and have written the following function to shift everything up, so my Navigation at the top goes partially off page and my content has more screen space:

$('.NavShrink').click(function(up) {
  $('#Wrap').animate({ top: '-=130px'});
  $(this).css('display', 'none');
  $('.NavExpand').css('display', 'block');
})

I also have the following to bring it back down again:

$('.NavExpand').click(function(down) {
  $('#Wrap').animate({ top: "+=130px"});
  $(this).css('display', 'none');
  $('.NavShrink').css('display', 'block');
})

My problem at the moment is that the page seems to keep its full height when everything shifts up off screen, which creates 130px of blank space at the bottom of my content. Whats the way around this?

my #Wrap currently just has the style position:relative; but have also tried with height:100%; and height:auto; with no luck.

EDIT: Here's the page: http://www.emilekelly.com/TestFolder/index.html

Upvotes: 3

Views: 132

Answers (1)

Matt Kieran
Matt Kieran

Reputation: 4220

Use position: absolute on #wrap.

Why?

Because position: relative is moving the #wrap up relative to its current position but the browser still takes into account the space below where it 'should' be.

However position: absolute will adjust the positioning and take it out of context of the normal flow, thus collapsing what is below, which is what you want - to get rid of that space.

Upvotes: 1

Related Questions