0

I'm working on an html5 application where I have a fixed header and a fixed footer.

When I click on the footer it should slide up until it is 10pixels away from the header.

Same thing should happen for the header as well.

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

The CSS for the default layout is easy: I just use absolute positioning with top and bottom.

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition: all 1s;
}

.header {
    top:0;
    background:red;
}

.footer {
    bottom:0;
    background:yellow;
}
.header.max {
    bottom:35px;
}
.footer.max {
    top:35px;
}

No it comes to the animation part. I don't want to use Javascript animations! ONLY CSS! If you click on the header or footer I just add the class max to the element:

$(".header, .footer, .content").on("click", function () {
  $(".max").removeClass("max");
  $(this).addClass("max");
});

The animation should look like the footer expands from the bottom.

I created a JS-Fiddle. You can see, that the problem happens to be with the top and bottom positioning of the footer/header.

Has anyone an idea how to fix that, so that the animation looks like the footer is expanding from the bottom?

Thanks!

Sebastian
  • 1,873
  • 4
  • 25
  • 57
  • 2
    Something like this? http://jsfiddle.net/vKEua/4/ – Turnip Nov 14 '13 at 14:13
  • Yes I had this solution as well, but the problem is, that the new position of the expanded footer cannot be relative. It has to be exactly 10 pixels from the top-header no matter how high the screen is. :) I know its stupid, but it is a requirement! – Sebastian Nov 14 '13 at 15:34

1 Answers1

1

Transition elements need to be set to height for smoother animation effects. In my example, I have the header and footer animations set to 300px, you need to change this using JS to update class="max" via window.height() or something similar.

One way to tackle your 10px requirement is to onload get window.height() minus 10px then update class="max" with the end result.

What I changed in your CSS:

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition:height 2s;
    -webkit-transition:height 2s; /* Safari */
}

.header.max {
   height:300px;
}
.footer.max {
   height:300px;
}

Fiddle

http://jsfiddle.net/JSED5/3/

JerryHuang.me
  • 1,790
  • 1
  • 11
  • 21
  • Yes I know that works, but it is not a great approach I think because you mix Layout and Javascript... Don't you think there is another possibility? – Sebastian Nov 18 '13 at 09:53