UltraMega Blog

Create a Slide-In Panel with jQuery

In this tutorial, I'll explain how to create a slide-in panel effect with jQuery. Basically, this means a hidden panel the slides into view when it is triggered by a button or other action. This is often used to display a contact form in a fun way, which is exactly what I am using it for on the new UltraMega website. As it turns out, this is very easy to do.

View Demo


How To Center a Page With CSS

When designing the layout of a web page, it is common to want to center the entire page. Luckily, this is very easy to do without breaking standards. All you have to do is wrap the entire page with a div with the left and right margins set to auto (margin: 0px auto;).

Here is an example:

<div class="wrapper">Contents of page...</div>
.wrapper {
   margin: 0px auto;
   width: 600px;

Here, margin specifies the top/bottom and the left/right respectively.

That's all there is to it!