CODEWITHSUNDEEP
jquerycssslidetoggle
joschaf
joschaf

Reputation: 525

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

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?

Upvotes: 5

Views: 20682

Answers (6)

Dally S
Dally S

Reputation: 705

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/

Upvotes: 0

Jim Beam
Jim Beam

Reputation: 31

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.

Upvotes: 2

dstrachan
dstrachan

Reputation: 206

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

Upvotes: 7

BeetleTheNeato
BeetleTheNeato

Reputation: 389

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.

Upvotes: 0

Andreas Nilsson
Andreas Nilsson

Reputation: 231

Here ya go; Working example of your code

Upvotes: 2

Jayaraj P R
Jayaraj P R

Reputation: 49

Try This code:

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

This might Help you.

Upvotes: -1

Related Questions