Question

So i’ve been doing a little searching and I will continue to look, but I figured it’s time to put my question out to the SO community.

I’m working on a little project that involves a fixed header with variable heights. The basic structure is as such:

<header>
  //any amount of elements
  //meaning this will have varying heights
  //I'll also be able to "open" and "close" this header
  //using slideUp and slideDown (because the end height varies I don't want to use animate)
</header>
<section>
  //body content
</section>

As a normal header (i.e. non css ‘position’ed) this would be fine. It would be in the normal context of the html flow and it would interact with the content below it. When the header slides down the sections below it slide down as well and when it slides up the inverse happens of course. It works something like this http://jsfiddle.net/byazaki/7FcJF/

Now if the position on the header is fixed the sections below it won’t be effected by it moving up and down, hence the introduction of a ‘header-spacer’ element that takes its place.

<header>
  //any amount of elements
</header>
<header spacer>
  //in theory this would resize with the 
  //header as it slides up and down to mimic
  //its effect on the other elements in the flow.
</header spacer>
<section>
  //body content
</section>

this sounds pretty simple right? Well normally yes it is, if I knew how big my header would be when it was open and how small it would be when it was closed. For simplicity sake lets just say it’s 0 when it’s closed, so now I need just worry about when it’s open.

Sorry for the long intro but this leads me back to my initial point: If I don’t know the target “height” of my header how do I animate my spacer? doing .slideDown doesn’t work.

One solution I’ve thought of was to do something like this:

function setSpacer() = { spacer.css('height', header.height())};
var interval = setInterval(setSpacer, 10);
header.slideDown(500, function(){
  clearInterval(interval);
});

Sorry if there are syntax errors or anything like that just trying to paint the picture… basically I start setting the spacer height to the header height every 10 millisecs and then when the header is finished animating it clears the interval.

I haven’t implemented this yet, because I was curious if there was a more elegant solution to my problem or perhaps even something to do w/ jQuery animation branch that I don’t know about?

note:
Another thought has been to write a plugin that extends the slideUp()/slideDown()/animate() classes to take an argument that contains 1 or more html elements and mirrors the animation of the target object.

any thoughts or feedback would be much welcome, thank you 😀

Answer 1

It’s a bit unclear what you want.

.slideDown()/.slideUp() are used to display and hide content, there is no in between height setting. If you want to decide your own height, I suggest you use .animate() instead.

This is how I interpreted the question

I gave the main header a position: fixed and made another <header id="spacer"></header>.
At the beginning, I register the default height of the main header and give the same height to the spacer. Then I temporarily add a class full_height, which basically is just a height: auto and register the height when it has that class. From thereon things should be simple. Either use slideDown or slideUp on both elements, or use .animate() on both elements to mess with default/full height.

With that being said, here are both examples using slideDown/slideUp and .animate

.slideDown()/.slideUp()

Example | Code

//The full_height class is just a "height: auto"
var defaultHeight = $("#header").outerHeight(),
    entireHeight = $("#header").addClass("full_height").outerHeight();

$("#header").removeClass("full_height");
$("#spacer").height(defaultHeight);

$('#button').click(function() {
    if ($('#header').hasClass('hidden')){
      $('#header, #spacer').slideDown().removeClass('hidden');
    } else {
      $('#header, #spacer').slideUp().addClass('hidden');
    }
});

.animate()

Example | Code

//The full_height class is just a "height: auto"
var defaultHeight = $("#header").outerHeight(),
    entireHeight = $("#header").addClass("full_height").outerHeight();

$("#header").removeClass("full_height");
$("#spacer").height(defaultHeight);

$('#button').click(function() {
    if ($('#header').hasClass('hidden')){
        $('#header, #spacer').animate({
            height: defaultHeight //either use default height or entire height
        }, 500).removeClass('hidden').show();
    } else {
        $('#header, #spacer').animate({
            height: 0, //either use default height or 0
        }, 500, function(){
            $(this).hide(); //hide if you're going to use 0
        }).addClass('hidden');
    }
});