In my newest tutorial, you learn how to quickly render a calendar using PHP's date() and mktime() functions. Then provide some AJAX functionality to move between months without having to reload the page. This tutorial walks you through a great way to build the foundation in PHP for any calendar needs you might have on your site.

Check out my new tutorial, Create an AJAX Calendar with PHP, to learn how to render a calendar with PHP and use AJAX request to move from month to month.

If you are a looking for an easy way to select all checkboxes on a page, there are a number of ways you can quickly accomplish this with the Prototype JS library.

Let's say your HTML looks like this:

  <form id="options">
    <fieldset><input type="text" value="test"></fieldset>
    <fieldset><input type="checkbox" value=0> 0</fieldset>
    <fieldset><input type="checkbox" value=1> 1</fieldset>
    <fieldset><input type="checkbox" value=2> 2</fieldset>
    <fieldset><input type="checkbox" value=3> 3</fieldset>
  </form>

It's fairly straight forward to grab all of the input elements of type "checkbox" without also getting the element of type "text".

In both cases we will store our results as objects in an array, named checkboxes.

var checkboxes = [];

Now that we have this array ready for our objects, let's select them.

The first method, uses the $$ operator to select all inputs on the page. Then we use the each() method to iterate through each input element and check the type. If our type is equal to the string 'checkbox', store it to our array checkboxes.

checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });

The second method, uses the hand Form object method called getInputs(). To use this method, first we need to select the form object. In this example, we do so by used the $ operator and the id attribute of the form. Once we have that object, we call the getInputs() method and pass it the argument 'checkbox', which will define the input type we are seeking.

var form = $('options');
checkboxes = form.getInputs('checkbox');

In both of these cases, checkboxes will be equal to:

checkboxes // ---> returns "[input 0, input 1, input 2, input 3]"

If you would like to check all of these checkboxes, you can do so with this line of code:

checkboxes.each(function(e){ e.checked = 0 });

You can also assign it to a link with this HTML:

<a href="#" onclick="checkboxes.each(function(e){ e.checked = 0 });">Select All</a>

In the new tutorial, Using PHP Headers to Force Download, we briefly go over how to use the header() function in PHP to set HTTP raw headers to define application type. This is useful when providing downloads on your website and you don't want to risk the user's browser trying to handle the file with default plug-ins and applications. Check it out!

In working on getting Ryboe.com to correctly validate tonight, I ran across an interesting tidbit about Flash movies and the W3C. The <embed> tag was created by Netscape as a way to get Flash objects to play in their browser. The problem with this Netscape-invented <embed> tag is that the W3C does not recognize it as a valid XHTML tag. If you are like me and would like for your site to validate, you have to remove it. So how do you get your Flash files to play in Firefox, Netscape, etc. and still have your site validate? Well, after doing some digging, I found that the solution is actually quite simple.

In this case, I have an image slideshow Flash movie that I want to display. Here is what the HTML embed code used to look like to show the Flash:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="580" height="225" id="slideshow" align="left">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="slideshow.swf" quality="high" bgcolor="#ffffff" wmode="transparent" width="580px" height="225px" name="slideshow_as2" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

In this article, entitled Embedding Macromedia Flash While Supporting Standards, Drew McLellan talks about his experience in dealing with this exact issue.

Just strip the <embed> tag altogether and place an extra definition of the Flash file path within the opening <object> tag. A "type" attribute is used to define that you want the Flash movie to play with the Macromedia Shockwave-Flash player. Here is my final code:

<object type="application/x-shockwave-flash" data="slideshow.swf" width="560" height="225" id="slideshow" align="left">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
</object>

By defining the path to the Flash file again with the "data" attribute, my movie plays fine!

Continuing on from yesterday's tutorial, Error Output With Scriptaculous, in which we got started with a nice little login form showing off simple validation and error output with Scriptaculous, I decided today we would add onto that form a little bit.  One neat thing that you can accomplish in creating your forms in HTML is the use of a custom "submit button". 

By defining your submit button as an image, you can use any image file to replace the standard grey HTML button you see sprinkled all over the web.  In order to do this, you simply change the HTML code you use in your form.

Previously we were using the code:

<input type="submit" value="Login" />

Now obviously, this got the job done but we would like for our site visitors to have a nice themed experience when logging in, so let's style it up!  To do so, simply change the "type" attribute and define a "src" attribute on your input element, leaving your code looking like

<input type="image" src="./images/submit_button.jpg" />

The "src" is the path to the image you want to use.  I decided I wanted to spruce things up a little more and give the submit button some flare, adding a rollover state to it.  In order to do so, I first prepped my image file in Photoshop, leaving me with a two state image:



As you can see, both the on and off states are visible in this image. Why wouldn't I separate them out into individual image files?  Well the answer is, there is no need to with the use of CSS (and afterall, I'd rather only have to worry about loading one image on the client side than two).

How exactly is this accomplished?  Well for starters, we need to simplify the markup for our submit button.  Start by changing the attributes of the "input" element, defining "type","class", and a blank "value":

input type="submit" class="submit" value="" />

Before the CSS is added, we are left with a small non-user friendly button.  By defining the "submit" class that we just attached to our "input" element, we can all at once implement our image as the button.

.submit
{
    background: url(./images/submit_button.jpg) no-repeat;
    height: 42px;
    width: 130px;
    border: none;
}

In this CSS class we are setting the background image, height and width, and stripping the element of its default browser-styled HTML border.  The button is perfectly functional!  However, we still want to add the hover state.  In order to do so, we simply need to define a hover state for the "submit" class.

.submit:hover
 {
     background: url(./images/submit_button.jpg) 0 -42px no-repeat;
 }

In this code, we are leaving all the attributes the same except for the background property, which we are adjusting the background position with a height of -42px.

View Image as a Submit Button with Hover Example

Voila!  There you have some nice little CSS submit button magic.  Note, the hover state will not work in Internet Explorer 6, which does not recognize :hover classes in CSS.  There is an easy way to work around this, which I will uncover in the not so distant future.