Panel should slide up from the bottom and push content up, no overlay

Question

I'm quite new to jQuery but I'm almost certain that what I want to achieve is possible somehow.

I have a page with a navbar fixed at the bottom. The navbar has a button which should toggle an extra panel which I would like to slide up from the bottom. Here is what I have so far: http://jsfiddle.net/E4yGh/

As you see the panel slides up over the rest of the page, which stays in place. What I want instead is have the rest of the page scroll up to reveal the panel. The page should scroll up exactly according to the height of the panel div, so that the bottom of the panel is fixed to the bottom of the page - ideally without having to specify the panel's height, so that it adjusts automatically.

How would I go about doing that?

Overplus

Answer 1

By adding an id to the upper div, you can apply slideToggle() to the upper section of text. Add the following line to your jQuery click function: (this will toggle the entire upper div)

$("#upper").slideToggle("slow");

To only slide the upper div by the height of the bottom section, you could try using CSS properties and .animate()

EDIT:

An easy solution is to move the navbar to the top of the page and change the CSS position of the text to "relative". Here is an example

EDIT:

Here is what i believe you were looking for originally: Demo

Aggrandize

Okay, now the main pages moves upwards, but it vanishes completely. Could you please elaborate on your last sentence? – Overplus

Try looking into the CSS selector "overflow: hidden", there should be a way to resize the upper div by the height of the bottom slider, to effectively hide a certain amount of the upper div. – Aggrandize

This is beautiful. Unfortunately, my client is dead set on having the navbar at the bottom... I need almost exactly what you did in your edit, only from the bottom up instead of from the top down. – Overplus

Ha! Your second EDIT is exactly what I was looking for, thanks! – Overplus

@Halcyon On your second edit, I added a div in between the hidden content and the closing div in an effort to make just the content above the toggle shift up when clicked. However, I can't get this to work. Here is the fiddle: jsfiddle.net/4k6du/132 Can you help me out? – Procession

Answer 2

Here ya go; Working example of your code

Exaltation

Thanks, this moves the main page. But now it vanishes completely. See my comment on Halcyon's answer. – Overplus

Yes it toggles the main div, as I added a id to it and added code in jQuery. I can be done... Calculate the height of the main div, and the height of the panel, then when you click and event fires. Then you .animate() with jquery and subtract that height from the main div - the height = the space the panel takes up... I could do a example, but it would take 20 minutes or so... – Exaltation

You mean something like this: link This goes in the right direction, but as soon as the animation is done, the main page comes back... What do I have to do to make it stay scrolled up? – Overplus

Answer 3

As I understand, you want to create a navbar at the bottom that it would slide up and show more details when clicked. If so, you could have a look at this link CREATING A SLIDE UP FOOTER USING JQUERY.

Hope it would help, good luck.

Suzisuzie

Answer 4

I think the idea is to animate the div that has the content. Check this: http://jsfiddle.net/52MeD/

When you trigger the slide up, the height of the div#content is animated. I chose a size through trial and error, but I'm sure there's some math you can do to calculate how much it should shrink to in order to fit the lower panel --I was lazy, sorry. I also animate its bottom property so it feels like the lower panel is really pushing the bottom of the content up (instead of just occupying the space). Of course, in order for this to work, div#content position must be set to relative.

I hope you get the idea.

Trusty

Answer 5

i gave my nav menu a negative margin so its not viewable on the page(floating left) i did nothing to the content on the right except also making it float left.

$('.slidingMenu').animate({ "margin-left": '+=200' });

so all thats happening is the sliding menu slides in( only other thing i had to do was increase the width of the body by 200px as my content kept falling to the next line.

Here's a link to a fiddle that really helped

http://jsfiddle.net/XNnHC/3/

Thinner

Answer 6

Try This code:

#lower {
      width: 90%;
      position: fixed;
      bottom: 0;
      background-color:#d5d5d5;
}

This might Help you.

Ribaldry

Thanks, but unfortunately, this does not make the rest of the page scroll up. I don't want the panel to overlap the main page. – Overplus

try p:last-child{ margin-bottom:50px; } – Ribaldry