UltraMega Blog
1Sep/095

Degradable Tabs With jQuery UI

Creating tabbed content is easy with jQuery UI. Using a simple HTML layout and calling the tabs function is all it takes. Here, I'll show you how to make a degradable tabbed interface. That is, we'll make it so the page is still readable when JavaScript is disabled. This involves hiding and showing elements using JavaScript before enabling tabs.

See the live demo. Try turning off JavaScript to see how it degrades.

25Jun/0934

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

3Apr/090

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:

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

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

That's all there is to it!

5Jan/0915

Creating a Calendar in PHP

This tutorial will explain how to create a dynamic calendar from scratch in PHP. There are two functions that will greatly simplify the process: mktime and getdate. The function mktime gets a Unix timestamp from the supplied arguments hour, minute, second, month, day, and year (each defaulting to the current). The function getdate is the opposite, turning a timestamp into an array of date information. See the manual pages (linked) for more information on these functions. Using these functions, it is fairly easy to gather all the information needed to create a dynamic calendar.

15Dec/082

Toggle Display of Page Elements with JavaScript

This mini tutorial explains how to show/hide elements on a web page using JavaScript. There are many reasons why you would want to do this, and luckily it is very simple.

All it takes is changing the display CSS property. Setting display: block; (the default for div tags) makes it visible, and display: none; makes it hidden. The advantage to using display is that other items on the page will move to close the void left by the hidden object.