Slide a Div Up From the Bottom of the Page

Sliding down/up from an element is easy, but I had a menu at the bottom of the page, and I wanted a hidden menu to slide up from the bottom of the page, encompass the whole page, and then slide back down when it was time for it to hide.  I tried quite a bit of stuff using the usual jquery slideUp and slideDown functionality, but couldn\'t seem to get it to work the way I wanted to.  Luckily it was pretty easy just to write the functionality to accomplish the desired effect:

 

 

function MenuSlideUp(e) {
	e.preventDefault();

	var container = $("#mobile-menu-full");
	var wdwHeight = $(window).height() + \'px\';

	if (container.is(":visible")) {
		container.animate({
			top: wdwHeight
		}, 500, function () {
			$(\'body\').css({ overflow: \'initial\' });
			container.hide();
		});
	} else {
		container.css({ top: wdwHeight }).show().animate({
			top: 0
		}, 500, function () {
			$(\'body\').css({ overflow: \'hidden\' });
		});
	}
}

 

The $(\'body\').css({ overflow: \'hidden\' }); just makes it so that the main content of the page doesn\'t scroll when the newly shown menu appears and the user may be scrolling around within it.




Related Posts


Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn't find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn't a good way to do it...
Read Post

PHP JSON Returned As Object Instead of Array

I was returning, what I thought was an array from PHP, but it kept returning it as a json object...
Read Post

A Simple Slideout Menu

I just wanted an easy slideout menu. Click on a link, and the menu slides out from the left side of the screen. Click on the link again, or somewhere else on the page, and the menu slides back in...
Read Post