Geek asks and answers

The panel should slide out from the bottom and push the contents up, without overlapping

I'm new to jQuery, but I'm pretty sure that what I want to achieve is possible in some way.

I have a page with a navigation bar installed at the bottom. There is a button on the navbar that should switch an additional panel, which I would like to move from the bottom. Here is what I still have: http://jsfiddle.net/E4yGh/

As you can see, the panel slides over the rest of the page, which remains in place. Instead, I want the rest of the page to scroll up to open the panel. The page should scroll exactly according to the height of the panel div, so that the bottom of the panel is fixed at the bottom of the page - ideally without specifying the height of the panel so that it automatically adjusts.

How can i do this?

+5
source share
6 answers

By adding id to the top div, you can apply slideToggle () to the top of the text. Add the following function to the jQuery function: (this will toggle the entire top div)

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

To just shift the top div to the height of the bottom, you can try using the CSS and .animate () properties

EDIT:

- CSS "".

EDIT:

, :

+7

ya go;

+2

, , . , -, JQUERY.

, , .

+2

, , div, . : http://jsfiddle.net/52MeD/

, div#content . , , , , , , . - , . bottom, , ( , ). , , , div#content ​​ relative.

, .

0

, ( ) , , .

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

so all that happens is the sliding slides of the menu (the only other thing I had to do was increase the width of the body by 200 pixels, as my content continued to fall on the next line.

Here is a link to the fiddle that really helped

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

0
source

Try this code:

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

It can help you.

-1
source

More articles:


All Articles