Every once in a while, I'll be posting some tips on web development.  These are tips I may have gotten from the web or from my own experience, and they could be on anything related to web development.  So without further ado, here are the first tips of many to come!

Tip #1: Using jQuery to "Check All" checkboxes in a list

This is a handy tip I've incorporated in many of my projects.  If you have a list of checkboxes, it's nice to give the user the option of checking all the boxes with one click instead of making the user check them all individually.  In that same respect, it's nice to uncheck all of them with just one click too.  Here's an example:

Here's the code for the onclick handler of the "Check all" checkbox:


If you click on the "Check all" checkbox; all the boxes become checked. If you click on the "Check all" checkbox a second time; all the boxes become unchecked. To do this, the onclick attribute of the "Check all" checkbox is used to first find the list I created and all input fields within it. It then assigns the 'checked' attribute of any checkboxes it finds to either true or false depending on if the "Check all" box is checked (true) or not (false).

This could've been done differently. Instead of using


in the code, I could've been more precise and used


Heck, I didn't even have to put the code in the onclick attribute of the "Check all" checkbox; I could've placed it outside of that element in either the head or body tags, but hey... it's just a simple tip!

Tip #2: PHP's strtotime function

I just love this function - it is so handy!  The strtotime function takes one argument (an english textual datetime description per the PHP manual) and converts it into a unix timestamp! Check out these examples:

$timestamp1 = strtotime("now"); //converts the current date and time to a unix timestamp
$timestamp2 = strtotime("May 5 1979 8:00pm"); //converts to 294782400
$timestamp3 = strtotime("tomorrow + 3 days"); //converts tomorrow's date to a unix timestamp and adds 3 days to it

If you want to convert the timestamp back into a normal date/time string, you can use PHP's date() function like so:

echo date("m/d/Y h:i A", $timestamp2); //outputs 5/5/1979 8:00 PM

For more complete information, see the strtotime function on PHP.net  or the date function on PHP.net.

Tip #3: Graying Out the Screen using CSS

You are probably used to modal popups by now where a box may pop up inside the page you are viewing, and the content behind the popup is grayed out.  Here's the CSS code to do it:

div.grayOut {
    -moz-opacity:0.70; /* FireFox */
    background-color: #000000;
    background-repeat: repeat;
    filter: alpha(opacity=70); /* IE */
    height: 100%;
    left: 0px;
    opacity: 0.7; /* Safari, Opera */
    position: fixed;
    top: 0px;
    width: 105%;
    z-index: 1000;

Here I'm using a div element and the necessary code to accomplish the effect in all modern browsers. Basically, the code fills a div with black color that takes up 100% of the user's screen and makes it 30% transparent (opaque). You'll want to set the z-index high enough so that the div overlaps all other elements on the page, but low enough so that it doesn't overlap your modal window. Giving the div a "fixed" position makes it so the grayed out div doesn't move when the user scrolls (in case of longer pages).

Click for Demo of Grayed Out effect