If you follow along with what I’ve been up to, you can probably tell that I have been on a big ExpressionEngine kick. I’ve been using it on a ton of projects recently, and I love it for its flexibility. Although it does lack a true form builder, I figured out a simple way to build one.

If you are impatient and just want to get to the demo, go ahead. Although the form will look like nothing special, as I have just added some simple styling. The real magic of the form builder happens in the Control Panel.

We Need Add-ons

This form builder would not be possible without the use of some awesome add-ons:

• FieldFrame

  This one is a no-brainer. I can’t even imagine building a site without it.

• Freeform

  If you need a form in EE, this is the way to do it.

• Freeform Data Select

  A new fieldtype which pulls in templates and fields from the Freeform module.

Creating a Field Group

I built a custom Field Group called Forms, which consisted of four fields:

• Template
• Notification Email Addresses
• Return Page
• Fields

The first three are pretty simple, so I will just give a quick run through on the specifications for those fields and give a more detail review of the Fields field:

Template

This is where you select the Freeform template that will be used for the email. This field is not completely necessary, as just using the default template should be good enough, but I figured since it was an option, to throw it in.

• Field Name: form_template
• Field Type: Freeform Data Select
• Populate drop-down with: Freeform Templates

Notification Email Addresses

This is where you will enter the email address(es) that you want to email when the form is submitted. Since Freeform wants multiple email addresses separated by the | character, I added some help text describing that as well.

• Field Name: form_notify
• Field Type: Text Input
• Default Text Formatting for This Field: None
• Hide Formatting Menu

Return Page

This is where you enter the URL to the thank you page. Once a user successfully submits the form, they will be redirected here.

• Field Name: form_return
• Field Type: Text Input
• Default Text Formatting for This Field: None
• Hide Formatting Menu

Fields

This is where the magic happens. This field is a FF Matrix field type that consists of five other fields. Each row of the FF Matrix represents one field (or field group) in the form. I’ll give a brief description of each field of the FF Matrix and show you a screenshot so you can get a better picture:

• Field Name: form_field
• Field Type: FF Matrix

Label

This is where you will enter the label for the form field:

• Col Name: label
• Cell Type: Text Input

Field

This field pulls in all of the fields that have been entered into the Freeform module. So you are presented with a dropdown of all of the fields, and you just select the appropriate one:

• Col Name: field
• Cell Type: Freeform Data Select
• Populate drop-down with: Freeform fields

Field Type

This is where you select the type of form field you want to use. I put in a few different options, but this could be expanded upon too:

• Col Name: type
• Cell Type: FF Select
• Select Options: Text Input
  Textarea
  Select
  Multi-select
  Checkbox
  Checkbox Group
  Radio Group

Is this field required?

With most forms, there are some fields that are required and some that are not. If you want the field to be required, you just check the checkbox and the Freeform module will make sure it is filled in:

• Col Name: required
• Cell Type: FF Checkbox
• Checkbox Label: Is this field required?

Options

Finally, this field is used when you select a field type that has multiple options. For example, if you select a “Select” field type, you need to provide the options to populate it. So you enter the options separated by the | character:

• Col Name: options
• Cell Type: Text Input

So that is all you need for the Field Group, now go ahead and create a Forms Channel (or Weblog) and make sure to assign the Forms Field Group to it.

Now, when you go to publish a Forms entry, you should see something like this:

I made a demo form showing off the various types of form fields. Here is what that entry looks like in the Control Panel:

Template

Now that we have our Channel and Field Group all setup, we need to deal with the template. You could really setup your template/template group in various ways, so I’m not going to get into those details. One detail that you need to know is that I enabled PHP for my template.

First, we just need to start with a simple exp:weblog:entries tag:

{exp:weblog:entries weblog="forms" limit="1" disable="categories|category_fields|member_data|pagination|trackbacks"}
…
{/exp:weblog:entries}

Next, we want to start the Freeform form tag:

{exp:weblog:entries weblog="forms" limit="1" disable="categories|category_fields|member_data|pagination|trackbacks"}
	{exp:freeform:form form_name="{url_title}" form_id="{url_title}" template="{form_template}" notify="{form_notify}" return="{form_return}"}
	…
	{/exp:freeform:form}
{/exp:weblog:entries}

Since we are inside of the exp:weblog:entries tag, we have access to everything that is being returned from that entry. If you have any questions about the various parameters, refer to the Freeform Documentation.

So far, the values that we are passing into the parameters are pretty straightforward, just custom fields from our entry. But, passing in the required parameter is a little more challenging, since we have to loop through all of the rows in our FF Matrix.

If we refer to the FF Matrix documentation, we can see how to loop through the rows in the matrix. I only want to return rows that have the required checkbox checked, and I want to separate the names of the fields with the | character. Then, I use the backspace parameter to remove the last one:

{exp:freeform:form form_name="{url_title}" form_id="{url_title}" template="{form_template}" notify="{form_notify}" return="{form_return}" required="{form_field search:required='y' backspace='1'}{field}|{/form_field}"}
…
{/exp:freeform:form}

Next, we want to add a title, ordered list that will contain the form fields, and the submit button:

{exp:freeform:form form_name="{url_title}" form_id="{url_title}" template="{form_template}" notify="{form_notify}" return="{form_return}" required="{form_field search:required='y' backspace='1'}{field}|{/form_field}"}
	<h1>{title}</h1>
	<ol class="forms">
		…
		<li class="buttons"><input type="submit" name="submit" value="submit" /></li>
	</ol>
{/exp:freeform:form}

Now here is where the code gets interesting. Just like we did with the required parameter, we want to loop through each row in the FF Matrix and display a list item for each one:

{form_field}
	<li>
	…
	</li>
{/form_field}

First, let’s display the label, if there is one, and denote if the field is required or not:

{if "{label}"}
	<label for="{field}">{if "{required}" == "y"}<em class="required">*</em>{/if}{label}</label>
{/if}

The rest of the code is a big conditional statement which depends upon the Field Types that you specified in the FF Matrix. Let’s first take a look at the Text Input, Textarea, and Checkbox types since they are pretty straightforward:

{if "{type}" == "Text Input"}
	<input type="text" name="{field}" id="{field}" />
{if:elseif "{type}" == "Textarea"}
	<textarea name="{field}" id="{field}"></textarea>
{if:elseif "{type}" == "Checkbox"}
	<input type="checkbox" class="checkbox" name="{field}" id="{field}" />
…
{/if}

So we are just checking the type column in the FF Matrix, and then displaying the rest of the data from the row in the appropriate form field.

Next, let’s walk through what happens if you select the Select or Multi-select types:

{if:elseif "{type}" == "Select" || "{type}" == "Multi-select" && "{options}"}
	<select name="{field}{if "{type}" == "Multi-select"}[]{/if}" id="{field}"{if "{type}" == "Multi-select"} multiple="multiple" size="4"{/if}>
		<?php $items = explode("|", '{options}'); ?>
		<?php foreach ($items as $item) { ?>
			<option value="<?php echo $item; ?>"><?php echo $item; ?></option>
		<?php } ?>
	</select>
…
{/if}

So first, we are displaying the select element, and if it is a Multi-select, we are adding [] to the name attribute, and adding the multiple and size attributes.

Next, we want to take the string of options that are separated by the | character, and create an array out of the string using the explode function.

Then, we loop through the array, and display the options for each one.

Finally, we do virtually the same thing for the Radio Group and Checkbox Group field types:

{if:elseif "{type}" == "Radio Group" && "{options}"}
	<ul class="group">
		<?php $items = explode("|", '{options}'); $count = 1; ?>
		<?php foreach ($items as $item) { ?>
			<li><input type="radio" class="radio" name="{field}" id="{field}<?php echo $count; ?>" value="<?php echo $item; ?>" />
			<label for="{field}<?php echo $count; ?>"><?php echo $item; ?></label></li>
			<?php $count++; ?>
		<?php } ?>
	</ul>
{if:elseif "{type}" == "Checkbox Group" && "{options}"}
	<ul class="group">
		<?php $items = explode("|", '{options}'); $count = 1; ?>
		<?php foreach ($items as $item) { ?>
			<li><input type="checkbox" class="checkbox" name="{field}[]" id="{field}<?php echo $count; ?>" value="<?php echo $item; ?>" />
			<label for="{field}<?php echo $count; ?>"><?php echo $item; ?></label></li>
			<?php $count++; ?>
		<?php } ?>
	</ul>
{/if}

So that’s it really. Here is the full template:

{exp:weblog:entries weblog="forms" limit="1" disable="categories|category_fields|member_data|pagination|trackbacks"}

	{exp:freeform:form form_name="{url_title}" form_id="{url_title}" template="{form_template}" notify="{form_notify}" return="{form_return}" required="{form_field search:required='y' backspace='1'}{field}|{/form_field}"}

		<h1>{title}</h1>
		<ol class="forms">
			{form_field}
				<li>
					{if "{label}"}
						<label for="{field}">{if "{required}" == "y"}<em class="required">*</em>{/if}{label}</label>
					{/if}
					{if "{type}" == "Text Input"}
						<input type="text" name="{field}" id="{field}" />
					{if:elseif "{type}" == "Textarea"}
						<textarea name="{field}" id="{field}"></textarea>
					{if:elseif "{type}" == "Checkbox"}
						<input type="checkbox" class="checkbox" name="{field}" id="{field}" />
					{if:elseif "{type}" == "Select" || "{type}" == "Multi-select" && "{options}"}
						<select name="{field}{if "{type}" == "Multi-select"}[]{/if}" id="{field}"{if "{type}" == "Multi-select"} multiple="multiple" size="4"{/if}>
							<?php $items = explode("|", '{options}'); ?>
							<?php foreach ($items as $item) { ?>
								<option value="<?php echo $item; ?>"><?php echo $item; ?></option>
							<?php } ?>
						</select>
					{if:elseif "{type}" == "Radio Group" && "{options}"}
						<ul class="group">
							<?php $items = explode("|", '{options}'); $count = 1; ?>
							<?php foreach ($items as $item) { ?>
								<li><input type="radio" class="radio" name="{field}" id="{field}<?php echo $count; ?>" value="<?php echo $item; ?>" />
								<label for="{field}<?php echo $count; ?>"><?php echo $item; ?></label></li>
								<?php $count++; ?>
							<?php } ?>
						</ul>
					{if:elseif "{type}" == "Checkbox Group" && "{options}"}
						<ul class="group">
							<?php $items = explode("|", '{options}'); $count = 1; ?>
							<?php foreach ($items as $item) { ?>
								<li><input type="checkbox" class="checkbox" name="{field}[]" id="{field}<?php echo $count; ?>" value="<?php echo $item; ?>" />
								<label for="{field}<?php echo $count; ?>"><?php echo $item; ?></label></li>
								<?php $count++; ?>
							<?php } ?>
						</ul>
					{/if}
				</li>
			{/form_field}
			<li class="buttons"><input type="submit" name="submit" value="submit" /></li>
		</ol>
	{/exp:freeform:form}
{/exp:weblog:entries}

Conclusion

This is not meant to be an all-inclusive form builder, as you can see there are many other parameters for the Freeform module. But, this was meant to show a creative use of ExpressionEngine and EE add-ons to add functionality that is not directly built into the CMS.

So go forth and create.

If you want to skip ahead to the demo, go ahead.

View Demo

Now sure, I could have just written the numbers in as text, but it’s a list, and it’s ordered! Here is an example of what the client wanted:

10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
…
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

After some digging around, I found out that you can add the value attribute to each list item to specify the number to display. So basically, I just needed to code my list like this:

<ol>
	<li value="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li value="9">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li value="8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	…
	<li value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ol>

Pretty straightforward, but also pretty ugly. So what happens when the client decides they want to insert another bullet in the middle of the list? Yep, that’s right, they would have to adjust the numbering for the rest of the list.

Pretty crappy, so let’s use the powerfulness of jQuery to make this a little better.

The Markup

So just like before, we just want to create an ordered list, but this time, we will leave off the value attribute. We are also going to add a class to the ordered list that we will use as a hook to add in the jQuery functionality:

<ol class="reversed">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	…
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ol>

The jQuery

Mapping out the code a bit: we want to select each element with a class of reversed, and count the total number of children list items. Then, we want to loop through the children, and update the value attribute to be the value of the total number of children minus a counter variable that we started at zero and increment each time through the loop.

That seems relatively straightforward, so I’ll just show the code that I wrote:

$(document).ready(function() {
	$('.reversed').each(function() {
		var $children = $(this).children('li');
		var totalChildren = $children.length;
		var start = 0;
		$children.each(function() {
			$(this).val(totalChildren - start);
			start++;
		});
	});
});

View Demo

It looks like with HTML 5, we get a reversed attribute that accomplishes the same thing, but until it’s fully supported, this quick & easy solution seems to work.

On a Personal Note

I have been severely neglecting my blog, but for good reason. I have been teaching some intro to web development courses at CDIABU in Georgetown. Also, I will be starting a new job on December 1st. I will be joining the amazing team at Viget Labs as their new front-end developer.

I’m not sure if we were missing some easy way to do that, but we couldn’t think of a nice way to accomplish it.

Let’s Backup

I guess it will be helpful to give you some more context. We had created a Channel (our term for Weblog) for events. You could categorize the events, and they would publish in different places.

In this instance, the homepage, we wanted to pull an event from one category, but if there were none, then just display an event from another category.

The Initial Code

This code was separated out in an embed so that we could use it in various places on the site:

{assign_variable:channel_name="{embed:channel}"}
{assign_variable:category_id="{embed:category}"}

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}

	<h2>{title}</h2>
	{if events_feature_image}
		<p class="rightSide"><a href="{url_title_path="{embed:template_path}"}"><img src="{events_feature_image}" alt="" /></a></p>
	{/if}
	{if events_summary}
		{events_summary}
	{/if}

	<p><a href="{url_title_path="{embed:template_path}"}" class="more">Read more »</a></p>
{/exp:weblog:entries}

The code doesn’t really need to be explained; it’s not the important part of this post. So on the homepage, we had code that looked like this to pull in the event:

{embed="site/.events" channel="events" category="7" template_path="news-events/events"}

Now, what we really wanted to be able to do was to modify the exp:weblog:entries code to pull from a different category if there were no results. Something like this:

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}
…
	{if no_results}
		Code  to pull from a different category
	{/if}
…
{/exp:weblog:entries}

But the problem was, there really was no code that we could put in there that would pull from another category since you can’t nest exp:weblog:entries tags. So that’s when I remembered that you could stick an embed file in there that could have the exp:weblog:entries tag inside of it.

Then we realized that the code we wanted to write would be exactly like the code in the embed file we were already working with.

So we did a little investigation and found out that according to the documentation (see notes section), you cannot embed an embed within itself.

That makes sense, because you could create an infinite loop. But what if we knew that it would not return an infinite loop?

Modified Code

So we determined that what we could do is not pass in the category on the embed statement, and that would pull back any events.

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}
…
	{if no_results}
		{embed="site/.events" channel="events" template_path="news-events/events"}
	{/if}
…
{/exp:weblog:entries}

See how there is no category parameter this time? Here is the full modified code:

{assign_variable:channel_name="{embed:channel}"}
{assign_variable:category_id="{embed:category}"}

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="no" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}

	<h2>{title}</h2>
	{if events_feature_image}
		<p class="rightSide"><a href="{url_title_path="{embed:template_path}"}"><img src="{events_feature_image}" alt="" /></a></p>
	{/if}
	{if events_summary}
		{events_summary}
	{/if}

	<p><a href="{url_title_path="{embed:template_path}"}" class="more">Read more »</a></p>

	{if no_results}
		{embed="site/.events" channel="events" template_path="news-events/events"}
	{/if}
{/exp:weblog:entries}

And that worked!

Houston, we still have a problem…

But, we then realized that the same problem would occur if there were no future events in any categories. So, we still needed to go back and solve that problem by similarly passing the value for the show_expired parameter in the embed statement as well. I left that to my colleague, so I didn’t test this code, but this is my guess of how to solve that problem:

{assign_variable:channel_name="{embed:channel}"}
{assign_variable:category_id="{embed:category}"}
{assign_variable:show_expired="{embed:show_expired}"}

{exp:weblog:entries weblog="{channel_name}" category="{category_id}" show_future_entries="yes" show_expired="{show_expired}" limit="1" disable=“category_fields|custom_fields|member_data|pagination|trackbacks”}

	<h2>{title}</h2>
	{if events_feature_image}
		<p class="rightSide"><a href="{url_title_path="{embed:template_path}"}"><img src="{events_feature_image}" alt="" /></a></p>
	{/if}
	{if events_summary}
		{events_summary}
	{/if}

	<p><a href="{url_title_path="{embed:template_path}"}" class="more">Read more »</a></p>

	{if no_results}
		{embed="site/.events" channel="events" show_expired="yes" template_path="news-events/events"}
	{/if}
{/exp:weblog:entries}

Conclusion

Was there some really easy way to do this that we completely blanked on? It seemed a little hacky, but the solution worked.

If you want to skip right to the demo, feel free.

View Demo

Disclaimer

Let me first say that I have started to size text in pixels and soft serving EMs to IE6. There are tons of different font sizing techniques you can use, but this is what is working for me. So use whatever technique you please, and adjust as needed.

Another thing: I hate text resizers. In my opinion, there is no reason to duplicate browser functionality. I feel the same about back and print links, but sometimes the functionality is requested, so I have to build it.

Concept

The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.

Code

Let’s first start as we always should, by creating the markup:

<ul class="resizer">
	<li class="small"><a href="#">A</a></li>
	<li class="medium"><a href="#">A</a></li>
	<li class="large"><a href="#">A</a></li>
</ul>

jQuery

The markup was simple enough, so let’s get started on the jQuery. First, we want to execute our code when the document is loaded, and then add an event when one of the resizer links are clicked:

$(document).ready(function() {
	$('.resizer a').click(function() {

	});
});

Next, we want to get the class of the parent of the link that has been clicked, remove any of the resizer classes from the body, and add the new one:

$(document).ready(function() {
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
	});
});

We also don’t want to regular action of the link to be followed, so we need to return false:

$(document).ready(function() {
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
		return false;
	});
});

I also think it is important to remember what text size a user has selected while browsing the site, so we will take advantage of the jQuery Cookie plugin to help us with that. We will set a cookie that denotes which size the user has selected:

$(document).ready(function() {
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
		$.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
		return false;
	});
});

Finally, we just need to add a check to the beginning of the script, so that if that cookie is set, we add that size as a class to the body:

$(document).ready(function() {
	if($.cookie('TEXT_SIZE')) {
		$('body').addClass($.cookie('TEXT_SIZE'));
	}
	$('.resizer a').click(function() {
		var textSize = $(this).parent().attr('class');
		$('body').removeClass('small medium large').addClass(textSize);
		$.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
		return false;
	});
});

CSS

Now is where we get to the really powerful part of doing the text resizing like this: the CSS. We can start by simply stating our text size when it is in the small/default state:

body { font: 12px/18px Arial, sans-serif; }

Then, we just need to make a simple adjustment for the medium and large sizes:

.medium { font-size: 16px; line-height: 22px; }
.large { font-size: 20px; line-height: 26px; }

So you can just carry through this idea for the rest of the elements that have been assigned a font size:

h1 { font-size: 30px; line-height: 36px; }
.medium h1 { font-size: 34px; line-height: 40px; }
.large h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 24px; line-height: 30px; }
.medium h2 { font-size: 28px; line-height: 34px; }
.large h2 { font-size: 32px; line-height: 38px; }
h3 { font-size: 18px; line-height: 24px; }
.medium h3 { font-size: 22px; line-height: 28px; }
.large h3 { font-size: 26px; line-height: 32px; }

View Demo

The idea is very simple, and it really separates the presentation and behavioral layers. So what do you think? Do you have another technique that you like?

View Demo

I had to create an “online newsletter” that had issues that were made up of multiple articles. I ended up creating two separate weblogs: one for each issue, and one for individual articles. In the issues weblog, there was a Playa custom field which could be used to pick the individual articles to be published in that issue. But, another one of Brandon Kelly’s fabulous extensions, FieldFrame, seems to be a much better choice for creating this functionality.

So, download, install, & enable the FieldFrame Extension, and let’s be on our way.

Creating the Custom Field Group

First, let’s create a field group named Newsletter. Now, we just need to create one custom field with the field name of newsletter_articles. Select FF Matrix as the field type.

We want to have two cells in the FF Matrix: articles_title & articles_body. The cell types should be text and textarea, respectively. Then, adjust the sizes as you see fit.

Creating the Weblog

Now that we have the custom field group setup, we need to create a new weblog called newsletter and make sure to assign our Newsletter field group to it. Now that the newsletter weblog is created, we can start adding newsletters.

First, fill in the main title field, and then add in one or more articles. Now, let’s get onto coding the output template.

Creating the Template

Let’s start by creating a new template group called newsletter. We have two different pages that we want to create: the page listing all of the newsletter entries, and the individual newsletter entry displaying all of the articles. But, we can do this with only one template.

So, open up the index template in the newsletter template group, and we will start by setting up the structure of the template:

{assign_variable:weblog="newsletter"}
{embed="newsletter/.header" title="{if segment_2}
	{!--Display individual newsletter entry title here--}
{if:else}
	Newsletters
{/if}
"}

{if segment_2}
	{!--Display full individual newsletter entry with 1 or more articles--}
{if:else}
	{!--Display list of newsletters entered--}
{/if}

{embed="newsletter/.footer"}

We start by creating a variable to store the name of our weblog. Then, I created a simple header and footer to store some of the HTML that frames the page. I am passing in the title value in an embed variable to the header and displaying that in the browser title.

If the segment_2 value is not null, we know that we are on an individual newsletter page, so we will display that title. If the segment_2 value is null, then we are on the main newsletter listing page, so we just display Newsletters.

We are using the same conditional again for the content on the page. We either show the individual newsletter entry with the articles, or we show the list of newsletter entered. So let’s build out the code a little more. First, let’s finish displaying the title:

{embed="newsletter/.header" title="{if segment_2}
	{exp:weblog:entries weblog="{weblog}" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
		{title} : {entry_date format="%F %j, %Y"}
	{/exp:weblog:entries}
{if:else}
	Newsletters
{/if}
"}

Pretty simple stuff here, just displaying the title and entry date of the newsletter entry. Next, let’s tackle displaying the single newsletter entry view:

{if segment_2}
	{exp:weblog:entries weblog="{weblog}" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
		<h1>{title}: {entry_date format="%F %j, %Y"}</h1>

		{newsletter_articles}
			<div class="entry">
				<h2>{articles_title}</h2>
				{articles_body}
			</div>
		{/newsletter_articles}
	{/exp:weblog:entries}
	<p><a href="{path="newsletter"}">« Back to Newsletters</a></p>

The beginning should look pretty normal: just using the standard exp:weblog:entries tag to pull in the individual entry. We first display the title and entry date. Then, the next part is where we are taking advantage of the FieldFrame Matrix. We are basically just looping through all of the newsletter_articles and displaying them in divs.

Finally, let’s finish up by displaying the list of newsletter entries:

{if:else}
	{exp:weblog:entries weblog="{weblog}" disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"}
		{if count == 1}
			<ul>
		{/if}

			<li><a href="{url_title_path="newsletter"}">{title}: {entry_date format="%F %j, %Y"}</a></li>
		{if count == total_results}
			</ul>
		{/if}
	{/exp:weblog:entries}
{/if}

Simple stuff again: just looping through all newsletter entries and displaying them in a list. The two conditional statements are so you don’t end up with any empty unordered lists when there are no entries.

View Demo

I wish I would have realized this would have been a more efficient way to build a newsletter in EE for the project; but, this is why always learning is so important.

Maybe I need to explain a little better what I am referring to. Instead of using a label that is next to or above the input element, the label is actually within the input. Then, when the input is focused, the label goes away and you can enter your value into it. Finally, when the input is no longer focused, if there is no value entered, the inline label is then added back in.

See Demo

My Solution

The title attribute.

It’s so simple, but perfect. A great benefit of using the title attribute, is that when you hover over the input, you get a little tooltip displaying the inline label. So all I need to do is add a title attribute with the text that we want to have show up as the inline label. Then, we just use a little jQuery to make it all happen.

The jQuery

First, we want to select each input that has a title attribute, once the document is loaded:

$(document).ready(function() {
	$('input[title]').each(function() {
	…
	});
});

Next, if the value of the input element is empty, we want to take the title attribute and add it as the value of the input.

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}
	});
});

After that, we want to setup a function that will fire once the input is focused. When it is focused, if the value is equal to the title attribute, we want to set the value to nothing and add a class of focused:

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}

		$(this).focus(function() {
			if($(this).val() === $(this).attr('title')) {
				$(this).val('').addClass('focused');
			}
		});
	});
});

The reason why we add the class of focused is so that we can change the text color, border or anything to make it noticeable that the input is being focused. You can see this effect in the demo.

Finally, we want to add a function that will fire when the input loses focus. When it does, if the input value is empty, we want to set the value back to the title attribute and remove the class of focused:

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}

		$(this).focus(function() {
			if($(this).val() === $(this).attr('title')) {
				$(this).val('').addClass('focused');
			}
		});

		$(this).blur(function() {
			if($(this).val() === '') {
				$(this).val($(this).attr('title')).removeClass('focused');
			}
		});
	});
});

See Demo

And that’s it. It’s just a little bit of code, but it can go a long way. So take it and build on it.

I don’t think it’s necessary to discuss the benefits of body ids because I have already discussed them in the other posts. So if you still aren’t using body ids/classes, go read the articles, and start using them.

The Plan

This seems so straightforward that I’m not sure why I didn’t start with this method. So basically, I look at the URI, and if it is equal to / then I give it a body id of home. Otherwise, I grab the first “folder” and set that as the body id.

Example

Let’s say that the URI is: /about/team/leadership/. The body id would be about. Ok, the seems easy, let’s get to the code.

The Code

Here is our setBodyId function:

function setBodyId() {
	$path = $_SERVER['REQUEST_URI'];

	if($path === '/') {
		$bodyId = 'home';
	} else {
		$bodyId = substr($path, 1, (strpos($path,'/',1)-1));
	}

	return $bodyId;
}

If you are using this in WordPress, put this function in your theme function.php file.

Then, you want to call the function and assign it to a variable:

$bodyId = setBodyId();

Finally, if the $bodyId variable is not empty, add the id attribute on the body tag:

<body<?php if(!empty($bodyId)) echo ' id="'.$bodyId.'"';?>>

Conclusion

It’s so simple, yet powerful. This could also easily be recoded in other programming languages. What do you think? Any ideas for improvement?

Some people may want to skip the post and get to the demo and source files:

View Demo Download Source Files

So, why not use a plugin?

Well, I think that a contact form is so simple that a WordPress plugin that doesn’t provide exactly what I want is pretty lame. Plus, I don’t need all those fancy interfaces for building the form; I just need the code.

The Plan

Our plan is to create a custom WordPress Page Template, then create a page that uses that template. Finally, we will add in a little jQuery to improve the form. Let’s write a little pseudo code to help determine how our page template will be structured.

Pseudo Code

If form was submitted validate it
	If the form was submitted successfully
		Send email(s)
	Else
		Set variables to show errors

If the form was submitted successfully
	Show thank you message
Else
	Show form (with errors if there are any)

Creating the WordPress Page Template

Alright, so first, we are going to start with some basic stuff: define the template name, include the header/sidebar/footer, and setup the basic structure of our pseudo code.

<?php
/*
Template Name: Contact Form
*/
?>

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {
	//If there is no error, send the email
	if(!isset($hasError)) {

	}
} ?>

<?php get_header(); ?>

<?php
//If the email was sent, show a thank you message
//Otherwise show form
if(isset($emailSent) && $emailSent == true) {
?>

<?php } else { ?>

<?php } ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The Form

Next, let’s code the actual form. I also want to provide the ability for the user to enter some text to go above the form, so we are going to use the regular loop:

<?php if(isset($emailSent) && $emailSent == true) { ?>

	<div class="thanks">
		<h1>Thanks, <?=$name;?></h1>
		<p>Your email was successfully sent. I will be in touch soon.</p>
	</div>

<?php } else { ?>

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
			<h1><?php the_title(); ?></h1>
			<?php the_content(); ?>

			<?php if(isset($hasError) || isset($captchaError)) { ?>
				<p class="error">
					There was an error submitting the form.
				<p>
			<?php } ?>

			<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

			</form>

		<?php endwhile; ?>
	<?php endif; ?>
< } ?>

If the emailSent variable is set to true, we display the thank you message. Otherwise, we show the form. So we are outputting the title of the page, and any content that was entered. Then, we are checking to see if there was an error. Finally, we display the form:

<ol class="forms">
	<li>
		<label for="contactName">Name</label>
		<input type="text" name="contactName" id="contactName" value="
		<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>"
		 class="requiredField" />
		<?php if($nameError != '') { ?>
			<span class="error"><?=$nameError;?></span>
		<?php } ?>
	</li>

	<li>
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="
		<?php if(isset($_POST['email']))  echo $_POST['email'];?>"
		class="requiredField email" />
		<?php if($emailError != '') { ?>
			<span class="error"><?=$emailError;?></span>
		<?php } ?>
	</li>

	<li class="textarea">
		<label for="commentsText">Comments</label>
		<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField">
		<?php if(isset($_POST['comments'])) {
			if(function_exists('stripslashes')) {
				echo stripslashes($_POST['comments']);
			} else {
				echo $_POST['comments'];
			}
		 } ?></textarea>
		<?php if($commentError != '') { ?>
			<span class="error"><?=$commentError;?></span>
		<?php } ?>
	</li>
	<li class="inline">
		<input type="checkbox" name="sendCopy" id="sendCopy" value="true"
		<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true)
			echo ' checked="checked"'; ?>
		/>
		<label for="sendCopy">Send a copy of this email to yourself</label>
	</li>
	<li class="screenReader">
		<label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
		<input type="text" name="checking" id="checking" class="screenReader" value="
		<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>"
		/>
	</li>
	<li class="buttons">
		<input type="hidden" name="submitted" id="submitted" value="true" />
		<button type="submit">Email me »</button>
	</li>
</ol>

Note: Line wrapping added for readability.

Ok, wow, that may seem like a lot. So let’s break down the name field to see what this code is actually doing:

<li><label for="contactName">Name</label>
	<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
	<?php if($nameError != '') { ?>
		<span class="error"><?=$nameError;?></span>
	<?php } ?>
</li>

We are displaying each form field in a list item, displaying the label, input field, and then showing an error message if there is one. We are also displaying the value in the form field if it was already submitted.

So in essence, we are just doing that for each field of the form. You could easily go into the code to add more fields.

We are also using honeypot captcha to see if a bot was trying to submit the form:

<li class="screenReader">
	<label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
	<input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
</li>

That list item is pushed off the page with CSS, and if there is a value in that field, we can assume that it is not a human trying to submit the form:

.screenReader {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

The Validation

Next, we are going to have a conditional statement to determine if the form was submitted or not:

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {

} ?>

Within that conditional, is where we are going to do all of our validation of the required fields. First, let’s check to see if our honeypot captcha form field is filled in. If it is, then we will display an error and not check anymore of the form:

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
	$captchaError = true;
} else {

} 

So if the captcha field was left blank, we will continue to validate the required fields:

//Check to make sure that the name field is not empty
if(trim($_POST['contactName']) === '') {
	$nameError = 'You forgot to enter your name.';
	$hasError = true;
} else {
	$name = trim($_POST['contactName']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '')  {
	$emailError = 'You forgot to enter your email address.';
	$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
	$emailError = 'You entered an invalid email address.';
	$hasError = true;
} else {
	$email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['comments']) === '') {
	$commentError = 'You forgot to enter your comments.';
	$hasError = true;
} else {
	if(function_exists('stripslashes')) {
		$comments = stripslashes(trim($_POST['comments']));
	} else {
		$comments = trim($_POST['comments']);
	}
}

Again, that may seem like a little much, so let’s just take a look at the validation on the name field:

if(trim($_POST['contactName']) === '') {
	$nameError = 'You forgot to enter your name.';
	$hasError = true;
} else {
	$name = trim($_POST['contactName']);
}

If the name field if empty, set a variable that will display the name error and set a flag saying that there was an error on the form. Otherwise, set a variable that will contain the name value from the form.

Sending the Email

Now, we want to send the email if there are no errors:

//If there is no error, send the email
if(!isset($hasError)) {

	$emailTo = 'me@somedomain.com';
	$subject = 'Contact Form Submission from '.$name;
	$sendCopy = trim($_POST['sendCopy']);
	$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
	$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

	mail($emailTo, $subject, $body, $headers);

	if($sendCopy == true) {
		$subject = 'You emailed Your Name';
		$headers = 'From: Your Name <noreply@somedomain.com>';
		mail($email, $subject, $body, $headers);
	}

	$emailSent = true;

}

Note: Items bolded are values that you will want to change before implementing.

I personally like to have the contact form submission come from myself. That way, I just setup a filter in Gmail, and I can guarantee that it won’t get caught in my spam filter. The second email is only sent if the user checks the checkbox to send a copy to themselves.

View Entire Custom Page Template

Creating the Page in WordPress

First, you want to upload the contact-form.php page template to your themes folder. Next, you will create the page in WordPress and select Contact Form as the page template.

Then, just publish your page and you will have your contact form. Well, the form will be usable, but we are going to add in some CSS and jQuery to finish it off.

Styling the Form

I recently wrote an article about styling forms, so we are just going to stick with some basic styles:

.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding: 10px; }

/*****Forms*****/
ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li {
	clear: both;
	float: left;
	margin-bottom: 18px;
	position: relative;
	width: 100%;
}
ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	padding-right: 20px;
	width: 100px;
}
ol.forms input, ol.forms textarea {
	border: 1px solid #7E8AA2;
	border-radius: 3px;
	font: inherit;
	-moz-border-radius: 3px;
	padding: 2px;
	-webkit-border-radius: 3px;
	width: 214px;
}
ol.forms textarea { height: 300px; width: 334px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; margin-left: 20px; }
ol.forms li.textarea .error {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms li.buttons button {
	background: #ff9800;
	border: none;
	color: #000;
	cursor: pointer;
	font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif;
	overflow: hidden;
	padding: 6px 3px 3px 3px;
	text-transform: uppercase;
	width: auto;
}
ol.forms li.buttons button:hover { color: #222; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float: none; width: auto; }

So drop that CSS in your theme stylesheet and you will see the form start to look much better.

Enhancing the form with some jQuery

I have also already written about creating AJAX forms with jQuery, but I thought I would specifically talk about an AJAX script for a contact form.

First, we want to execute our jQuery when the document is ready and the form was submitted:

$(document).ready(function() {
	$('form#contactForm').submit(function() {

		return false;
	});
});

Next, we want to hide any error messages if there are any and validate any required fields which are denoted with a class of requiredField:

$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {

});

After that, we want to validate that the field is not empty and append an error message if it is:

if(jQuery.trim($(this).val()) == '') {
	var labelText = $(this).prev('label').text();
	$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
	hasError = true;
}

If the field is not empty and also has a class of email, we want to validate that the email address is valid:

 else if($(this).hasClass('email')) {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	if(!emailReg.test(jQuery.trim($(this).val()))) {
		var labelText = $(this).prev('label').text();
		$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
		hasError = true;
	}
}

If there are no errors, then we want to replace the submit button with a loading image:

if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
	$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
});

Note: You will need to update the source of the image to wherever you upload it in your theme.

Finally, let’s submit the form via an AJAX request, slide the form up, and show a thank you message:

var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
	$('form#contactForm').slideUp("fast", function() {
		$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
	});
});

Take a look at the entire script:

$(document).ready(function() {
	$('form#contactForm').submit(function() {
		$('form#contactForm .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
				hasError = true;
			} else if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					var labelText = $(this).prev('label').text();
					$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
					hasError = true;
				}
			}
		});
		if(!hasError) {
			$('form#contactForm li.buttons button').fadeOut('normal', function() {
				$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
			});
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				$('form#contactForm').slideUp("fast", function() {
					$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
				});
			});
		}

		return false;

	});
});

Just include it in the head of your document after jQuery, and you are good to go:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script>

Note: You may need to change the source depending upon where you upload the files in your theme.

Conclusion

View Demo Download Source Files

That’s it! Just upload the files and you’ve got your form. Since you’ve got the code right in front of you, it should be very easy to tweak and add on to. Enjoy!

This is definitely not me trying to tell you to code in a certain way; they are just some tips that I have found to become very useful for myself. I hope you enjoy, and feel free to share other tips.

It’s definitely nice that the plugin doesn’t throw an error, but I really don’t want that message displayed on my site. So what’s the solution? jQuery of course.

When the Tweet Comes Through

Here is the markup that is displayed on my site when a tweet comes through successfully:

<div id="twitterContainer">
	<a class="twitter-link" href="http://twitter.com/davist11/status/1200405534">
		I feel like I'm in an episode of Seinfeld right now.
	</a>
</div>

When the Tweet Doesn’t Come Through

This is what you end up with:

<div id="twitterContainer">
	No public Twitter messages.
</div>

The jQuery

My thinking is that I will check the contents of div#twitterContainer to see if it is No public Twitter messages. If it is, I think it would be useful to replace that text with a link to my Twitter account with a message telling people to follow me.

So first, let’s execute the jQuery code when the document is loaded:

$(document).ready(function() {

});

Next, we are going to check and see if the contents of div#twitterContainer is No public Twitter messages:

$(document).ready(function() {
	if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {

	}
});

Finally, let’s just replace this text with a link to my Twitter feed:

$(document).ready(function() {
	if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {
		$('div#twitterContainer').html('<a href="http://twitter.com/davist11" class="twitter-link">Follow Me on Twitter</a>');
	}
});

Why are Body Ids Useful?

Body ids can be useful for styling sections differently, displaying certain parts of a dynamic template, displaying current navigation states, and many other things.

A Simple Example

Let’s say that I want to have my font size be 14 pixels, except on the homepage. It would be as easy as this:

body { font-size: 14px; }
body#home { font-size: 12px; }

Pretty useful. By using body ids, we now have a unique hook for each section of the website.

Why not Body Classes?

I do utilize body classes as well. I typically use the body id to indicate the section, then other various items for the body classes.

For Example

For my own blog, I have some pages that I want to have a left gutter on it so that I can push images, quotes, etc. into the column. I also have another class that indicates when it is a blog article page. So, I can just continue to use multiple classes on the body to help me control the width and layout of the page.

Here is what the body element looks like on a blog article on my site:

<body id="blog" class="subpage leftGutter article">

The subpage class just indicates that it is not the homepage. Not completely necessary since I already have a specific id on the homepage, but it can sometimes become useful.

The leftGutter class is used to push the content area to the right and make it narrower. Then, I can pull elements into the left-hand gutter as well.

The article class is useful because some of the markup for the blog entry information is the same as the homepage and archive pages. Using this class, I can be more specific with my styles to change the way that these elements are displayed on the blog article page.

I always try and add classes and id attributes as high up in the tree as possible. This let’s me utilize descendant selectors in the CSS without having to add additional classes and ids lower down.

Setting the Body Id in Expression Engine

I want to have complete control over the body id, so I want to be able to have it set dynamically and also be able to set it statically.

So my thought behind this is that first, I want to check to see if the body id was set statically. When I say statically, I mean passing the variable in as an attribute on my embed statement. Next, I will then set the body id dynamically.

Setting the Id Statically

In order to make changes to the overall website structure simpler, I have a header template the sits in the includes template group. So in all of the other template groups, I embed the header on the page:

{embed="includes/header"}

Then, if for some reason I want to specifically pass in a body id, I can just change it to this:

{embed="includes/header" body_id="contact-us"}

So the first step in the header is to check to see if the embed:body_id variable is set:

<body
{if embed:body_id}
	id="{embed:body_id}"
{/if}
>

Note: Line wrapping added for readability.

Dynamically Setting the Id

If we are not statically setting the body id, we want to then do it dynamically. My thinking is that I will take advantage of Expression Engine’s URL segments to determine which section we are in.

Here is an example of URL segments using the following URL:

http://ee.trevordavis.net/index.php/about/me/education/

• Segment 1 = about
• Segment 2 = me
• Segment 3 = education

Then, we can reference each segment like so:

• Segment 1 = {segment_1}
• Segment 2 = {segment_2}
• Segment 3 = {segment_3}

So basically what we want to do is assign the body id the value of {segment_1} if it is not empty. So continuing on our example:

<body
{if embed:body_id}
	id="{embed:body_id}"
{if:elseif segment_1}
	id="{segment_1}"
{/if}
>

Note: Line wrapping added for readability.

But wait, what about the homepage? The homepage will have nothing for the value of {segment_1}, so we can just put in an else statement:

<body
{if embed:body_id}
	id="{embed:body_id}"
{if:elseif segment_1}
	id="{segment_1}"
{if:else}
	id="home"
{/if}
>

Note: Line wrapping added for readability.

Here is the line of code without any line wrapping:

<body{if embed:body_id} id="{embed:body_id}"{if:elseif segment_1} id="{segment_1}"{if:else} id="home"{/if}>

I created a demo Expression Engine site to test this functionality.

View Demo Site

Walking Through the Demo Site

Since we have body ids for each section and an id on each list item in the navigation, I have created the current state for the navigation with a few simple line of CSS:

body#home ul#primaryNav li#homeNav a,
body#about ul#primaryNav li#aboutNav a,
body#services ul#primaryNav li#servicesNav a,
body#contact-us ul#primaryNav li#contactNav a {
	background: #B3602D;
	border-top-color: #B3602D;
	color: #fff;
}

Note: Line wrapping added for readability.

I also want to show the sidebar on all of the subpages, so I just need 1 more conditional:

{if embed:body_id || segment_1}
	<div id="sidebar">
	</div>
{/if}

This is checking to see if {embed:body_id} or {segment_1} are not empty, and displaying the sidebar if one or both are set.

These are just a few examples of using a body id in Expression Engine, but the possibilities are endless.

One More Thing

Another thing that I was trying to figure out was how to create a variable that I could reuse in multiple embed files. So what I want to do is in my conditional statement, determine that the body id should be and assign it to a variable. Then, I want to be able to access that variable in the footer without have to use the same conditional statement.

Is this possible? I was messing around with the {assign_variable} tag, but that didn’t seem to do the job because it can only be used in the same template. Anyone know how to do this? I’m relatively new to Expression Engine, so I am still learning.

In my second article, Creating a “Filterable” Portfolio with jQuery, I take a look at creating a portfolio that can be filtered by category.

This tutorial was kind of inspired by the effect that I created on my company’s portfolio.

How will this effect my web site?

Yes, I am not going to be able to write articles as frequently on my blog, but I am still going to be posting some articles. I will also post a note each week discussing my weekly NETTUTS article.

I hope you all enjoy the articles.

Depending upon your configuration, WordPress will validate the comment form for required fields. In my configuration, I want to make sure that users fill in their name and email address If you submit my comment form without those, WordPress will perform server side validation.

But, do you really want users to see this error page? Wouldn’t it be so much better if we used to JavaScript to validate on the client side so that they never have to leave the form?

I think so. Before we get started, I created a sample of the WordPress comment form.

See Example Page

Creating the Markup

I have tweaked my markup somewhat from the default WordPress comment form, so you will need to make changes to account for your markup. Here is the markup for my form:

<form action="#" method="post" id="commentform">
	<p class="required">* Denotes Required Field</p>
	<ol class="forms">
		<li>
			<label for="author">Name <span class="required">*</span></label>
			<input type="text" class="requiredField" name="author" id="author" size="22" />
		</li>
		<li>
			<label for="email">E-Mail <span class="required">*</span></label>
			<input type="text"  class="requiredField" name="email" id="email" size="22" />
		</li>
		<li>
			<label for="url">Website</label>
			<input type="text" name="url" id="url" size="22" />
		</li>
		<li class="textarea">
			<label for="comment">Comments <span class="required">*</span></label>
			<textarea  class="requiredField" name="comment" id="comment" cols="100%" rows="10"></textarea>
		</li>
		<li class="subscribe-to-comments">
			<input type="checkbox" name="subscribe" id="subscribe" value="subscribe"  />
			<label for="subscribe">Notify me of followup comments via e-mail</label>
		</li>
		<li class="buttons">
			<button type="submit" name="submit" id="submit">Add Comment »</button>
		</li>
	</ol>
</form>

I don’t think there is much that I need to discuss about that markup; it is pretty standard. The only thing to mention is the class name of requiredField on the form fields that I want to be required. Note: I also removed the action on the form so that the sample form cannot really be submitted to the database.

The jQuery

I of course am going to show this example using jQuery, but you could create something comparable with any other JavaScript library or just with some plain old JavaScript.

Once the document is loaded, let’s start by adding a function for when the comment form is submitted:

$(document).ready(function() {
	$('form#commentform').submit(function() {
	…
	});
});

Next, we want to remove any errors if they are showing, and create a flag that will let us know if an error has occured:

$(document).ready(function() {
	$('form#commentform').submit(function() {
		$('form#commentform .error').remove();
		var hasError = false;
		…
	});
});

Ok, here is where we really start to do some coding. I want to take each form field that has a class of requiredField, check to see if it is empty, copy the name of the label (and remove the required asterisk), traverse to the parent list item, and append the error message. Here is where we will also set the hasError flag so that we know an error has occurred:

$(document).ready(function() {
	$('form#commentform').submit(function() {
		$('form#commentform .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text().replace(' *','');
				$(this).parent().append('<span class="error">'+labelText+' is a required field.</span>');
				hasError = true;
			}
		});
		…
	});
});

Finally, you want to check the hasError variable to determine whether or not you should submit the form to the server:

$(document).ready(function() {
	$('form#commentform').submit(function() {
		$('form#commentform .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text().replace(' *','');
				$(this).parent().append('<span class="error">'+labelText+' is a required field.</span>');
				hasError = true;
			}
		});
		if(hasError) {
			return false;
		}
	});
});

Note: The end of the script is slightly different on the example form because I did not want to actually submit the form.

Conclusion

Just another simple example of how we can improve the user experience by using jQuery. Like usual, there are jQuery plugins out there that can do the same thing, but I think it is important to understand how to do things yourself. Plus, that is only 17 lines of JavaScript compared to much, much more for a plugin.

Anyone have any ideas on how to improve the script?

The Situation

I was on a tight deadline, and had to figure out some way to layout all of the state ornaments. Not to mention the fact that I had to crop and resize 56 images to 2 different sizes. Yes, I know there are only 50 states, but the US territories were included as well.

So the layout had to be easy enough for everyone to see all the ornaments and be able to click to get a more detailed photo and some information about the ornament. I really was not interested in creating 56 separate pages with information about each ornament, so I went scouring through the jQuery documentation to see how I could copy elements.

Before I get started describing what I had to do, here is a demo page that I created.

My Solution

So basically, this is what I wanted to happen when an ornament was clicked:

1. Get the source of the larger image to be shown
2. Copy the description text about the ornament
3. Append the image and text and open it in a modal window

The styling of the example is nothing special, so I will stick to explaining the script.

The Script

First, we want all of this to happen after the document is loaded and when the ornament links are clicked:

$(document).ready(function() {
	$('ul.ornaments a').click(function() {
		return false;
	});
});

Next, we want to setup the modal window with a couple of empty divs: (Note: line breaks added for readability)

$('body').append('<div id="overlay"></div>
	<div id="modal">
		<div id="modalInner">
			<a href="#" id="close" title="Close">Close</a>
			<div id="modalImageColumn"></div>
			<div id="modalTextColumn"></div>
			<div class="clearing"></div>
		</div>
	</div>');

Since IE6 doesn’t support fixed positioning, we need to get the actual height of the page so we can apply that height to the overlay:

if($.browser.msie && $.browser.version <= 6.0) {
	var windowHeight = $(document).height();
	$('#overlay').height(windowHeight);
}

Next, we set the opacity of the overlay, start to fade it in, position the modal window, and start to fade it in.

$('#overlay').css('opacity', 0.5).fadeIn('fast');
$('#modal').fadeIn('slow');
var scrollPos = $(window).scrollTop() + 50;
$('div#modal').css('top',scrollPos+'px');

The order of these things can be moved around some, but this is what I ended up doing, and everything looked good.

Next, we want to close and remove the modal window when the close button is clicked or the background overlay is clicked:

$('div#modal a#close,div#overlay').bind('click', function() {
	$('div#modal').fadeOut('fast',function() {
		$('div#overlay').fadeOut('fast',function() {
			$(this).remove();
		});
		$(this).remove();
	});
	return false;
});

Next, we grab the url of the link that was clicked, which goes to the full size image, and append the image to the modal window. Once the image has been loaded, we fade it in:

var imgUrl = $(this).attr('href');
$('div#modalImageColumn').append('<img src="'+imgUrl+'" alt="" class="frame" height="400" id="ornament" width="400" />');
$('img#ornament').load(function() {
	$(this).fadeIn();
});

Finally, we get to use the clone() method. We target the div with the class of stateDescription that is a sibling of the link we clicked, clone it, and append it to the modal window:

$(this).siblings('.stateDescription').clone().appendTo('div#modalTextColumn');

Conclusion

Pretty cool stuff if I say so myself. I don’t think there are any jQuery plugins out there that would have helped me achieve this, which is why it is important to actually understand jQuery.

See Demo

Here is the full script to download. You can also take a look at the final product on the National Christmas Tree site.

But, I would encourage you to actually understand jQuery instead of just grabbing code and using it.

Clicking a JavaScript print link does nothing more than launch the browser’s print window. If a person has JavaScript disabled, nothing will happen when they click a link like this:

<a href="#" onclick="window.print(); return false;">Print</a>

Ideally, we do not want to have things on a page that do not work without JavaScript enabled. So the solution is to write the print link into the DOM using JavaScript, then attach a click event to the link. Luckily, I use jQuery on every project, so it makes the process much easier.

The Solution

In this example, we are going to prepend a list item with a link to an unordered list with the id of tools. Then, we attach a click event to the link we have just added to the DOM. Finally, we return false to override the action of the link.

Here is the script:

$(document).ready(function() {
	$('ul#tools').prepend('<li class="print"><a href="#print">Click me to print</a></li>');
	$('ul#tools li.print a').click(function() {
		window.print();
		return false;
	});
});

Take a look at the demo page to see it in action. The script is nothing complex; it is just another example of using jQuery to improve a user’s experience.

An Example

I have created a demo of a CSS sprite in action. The sprite has the two images sitting on top of each other, and each link is using the image as a background image and then shifting the position of it when hovering.

a.spriteVert {
	background: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-vert.gif) no-repeat top left;
	padding-left: 30px;
}
a.spriteVert:hover { background-position: bottom left; }

It works great in the first example, but what happens if the user resizes their text? The sprite starts to break. When I am building a site, I am always thinking with the bulletproof mentality of Dan Cederholm, so this is just not an acceptable solution.

Now, we obviously couldn’t position the images next to each other because we would still have a problem when shifting the image around.

The Solution

Typically when you are using CSS sprites, there is another element containing the anchor. Whether it’s a list item, paragraph, div, etc; this solution will work unless you have a background image on that element as well.

Example

I have created a second demo that “fixes” the first example. The idea behind it is that instead of combining the images into 1 image, you split it into 2. Then you place the image that is being shown on hover as the background image on another element (preferably a containing element), just positioned off the screen.

Then when you hover, you switch the background image, which has already been preloaded, so you don’t get that “white flicker”. That may be a little hard to understand, so I’ll give an example.

The Markup

<p class="spriteContainer"><a href="#" class="spriteVert">Hover Over Me</a></p>
<p class="spriteContainer"><a href="#" class="spriteVert spriteVert2">Hover Over Me</a></p>
<p class="spriteContainer"><a href="#" class="spriteVert spriteVert3">Hover Over Me</a></p>

Note: The extra classes of spriteVert2 and spriteVert3 are just used to change the font size.

The CSS

p.spriteContainer {
	background: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-hover.gif) no-repeat -9999px -9999px;
}
a.spriteVert {
	background: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-off.gif) no-repeat top left;
	padding-left: 30px;
}
a.spriteVert:hover {
	background-image: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-hover.gif);
}

More Explanation

So looking at the previous example, I am adding the background image that I want to appear on hover as the background image on the paragraph with a class of spriteContainer, and I am positioning it way off the screen.

Then when I hover over an anchor with a class of spriteVert, I change the background image to be the one from the paragraph with a class of spriteContainer.

Conclusion

While this is not as ideal as using CSS sprites because you increase the number of hits to your server, it can help to eliminate the white flicker that you get if the image is not preloaded.

My co-worker and I decided that the best way to do it would be with JavaScript. Since the site was already using jQuery, our company’s library of choice, it turned out to be quite a simple task. If you just want to get to the code, take a look at the demo.

The Idea

1. We add the link to download Adobe Acrobat to the site’s template
2. We hide the link using CSS
3. We use jQuery to see if there are any links on the page linking to a PDF
4. If there are, we use jQuery to show the link

The Execution

Ok, simple enough, just add the link to the source of the document:

<p id="acrobatDownload"><a href="http://www.adobe.com/products/acrobat/readstep2.html">Download Adobe Acrobat to view the PDFs on this page</a></p>

Then, hide it with CSS:

#acrobatDownload { display: none; }

The jQuery

First, we want to check and see if any of the links on the page end with .pdf. Then, if there are any, we fade in the link:

$(document).ready(function() {
	if($('a[href$=.pdf]').length > 0) {
		$('#acrobatDownload').fadeIn('slow');
	}
});

I have created a demo page with a PDF link on it to see this in action.

Conclusion

I can’t even imagine how much time and hassle we saved ourselves by doing this with JavaScript. Plus, it could provide useful to someone who doesn’t have Acrobat (although I can’t imagine that there are many).

The concept is actually quite simple, and my mind is grinding away trying to think of other ways to use jQuery to do things like this.

Can you all think of anything?

First, I thought I would walk through creating a tabbed navigation script with jQuery, and then modifying it so that it works without JavaScript.

If you want to skip ahead, take a look at the sample jQuery tabbed interface.

The Markup

I’m going to set this up using classes so that it is possible to use this multiple times on a page. There are two different pieces to the markup: the navigation and the actual content for the tabs.

The Navigation

<ul class="tabNav">
	<li class="current"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
	<li><a href="#">Tab 4</a></li>
	<li><a href="#">Tab 5</a></li>
</ul>

Pretty straightforward, just an un-ordered list. The JavaScript will accommodate any number of tabs. Notice that the first tab has a class of current. This will be the class to style to show the active tab.

The Tab Content

<div class="tabContainer">
	<div class="tab current">
		…Content for Tab 1…
	</div>
	<div class="tab">
		…Content for Tab 2…
	</div>
	<div class="tab">
		…Content for Tab 3…
	</div>
	<div class="tab">
		…Content for Tab 4…
	</div>
	<div class="tab">
		…Content for Tab 5…
	</div>
</div>

Again, pretty straightforward: a container and a div for each of the tabs’ content. A couple of things to note: the first tab content also has a class of current, and the tabs’ content divs need to appear in the same order as the navigation.

Some Basic CSS

I’m not going to explain how I completely style my example, but I will highlight the necessary styles for the tabs to work.

To highlight the active tab, this is what you want to style:

ul.tabNav li.current a { … }

In order to hide all of the tabs’ contents except for the active tab, these are the styles that are necessary:

div.tabContainer div.tab { display: none; }
div.tabContainer div.current { display: block; }

The JavaScript

Ok, this is definitely the meat of the post. Since I wanted this to be as generic and simple as possible, I made heavy use of the parent and children selectors.

So to start, we want to add onclick events to the tabs:

$(document).ready(function(){
	$('ul.tabNav a').click(function() {
		…
		return false;
	});
});

When each tab is clicked, we want to see which tab was clicked on so that we can show the appropriate content. So we count the previous number of siblings of the parent (the list item) and store it in the curChildIndex variable:

$(document).ready(function(){
	$('ul.tabNav a').click(function() {
		var curChildIndex = $(this).parent().prevAll().length + 1;
		…
		return false;
	});
});

Next, we want to remove the class of current from the currently selected tab, and add the class of current to the tab we just clicked:

$(document).ready(function(){
	$('ul.tabNav a').click(function() {
		var curChildIndex = $(this).parent().prevAll().length + 1;
		$(this).parent().parent().children('.current').removeClass('current');
		$(this).parent().addClass('current');
		…
		return false;
	});
});

The final step is to hide the tab content that is currently showing and to show the tab content that matches the tab that was just clicked on. This is where we will make use of the curChildIndex variable and the nth Child Selector:

$(document).ready(function(){
	$('ul.tabNav a').click(function() {
		var curChildIndex = $(this).parent().prevAll().length + 1;
		$(this).parent().parent().children('.current').removeClass('current');
		$(this).parent().addClass('current');
		$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
			$(this).removeClass('current');
			$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
				$(this).addClass('current');
			});
		});
		return false;
	});
});

The previous snippet of the code is traversing from the clicked tab ,(this), to the current content that has a class of current, sliding that up, and removing the class of current. Once that is complete, we are selecting the tab content that matches the tab clicked, sliding it down, and adding the class of current.

Take a look at the sample jQuery tabbed interface to see it in action.

Making it Work for Non-JavaScript Users

Now, that works great, but what about people who don’t have JavaScript enabled? Sure it’s a very small number, but we still want to account for those people.

Most other JavaScript tab scripts use JavaScript to hide the non-active tab content sections or to write in the tabbed navigation, but then you get that flash of changing content. My idea is to use CSS to hide the non active tab content (which I discussed earlier) and pass a parameter into the URL to select which tab to show.

The Code

Below is the new code for the tab navigation:

<ul class="tabNav">
	<li<?php if(!isset($_GET['tab'])) echo ' class="current"';?>><a href="">Tab 1</a></li>
	<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 2) echo ' class="current"';?>><a href="?tab=2">Tab 2</a></li>
	<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 3) echo ' class="current"';?>><a href="?tab=3">Tab 3</a></li>
	<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 4) echo ' class="current"';?>><a href="?tab=4">Tab 4</a></li>
	<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 5) echo ' class="current"';?>><a href="?tab=5">Tab 5</a></li>
</ul>

Basically, I am checking to see if the variable tab is set in the URL, and determining the value of it. I also use the same logic for the tab content. This is the example page with tab 3 displaying. So basically, if the user does not have JavaScript, it would reload the entire page and display the correct tab.

Conclusion

This was just a simple example of jQuery, and the possibilities are endless. Instead of being so quick to use a plugin or someone’s code, try to do it yourself. You will become a much better programmer because of it. Even if you aren’t doing things as efficiently as possible, you will learn something new every time.

There are other great resources for information about form design, and I will take this information into account when I am showing the flexibility of my method of marking up and styling forms.

The Markup

After previously using a definition list to mark up my forms, I have switched to using an ordered list now. I switched for two main reasons:

• The list item of the ordered list provides a containing clearing element that the definition list does not provide.
• Semantically, it just makes more sense. A form is really just a list of form fields to fill out. Forms are typically meant to be filled out in order, hence the ordered list instead of un-ordered list (I think this could be debated, but in the long run, either one is more semantic than anything else).

I have decided to create just a simple un-styled form to use as an example. Here is what the markup of the page is:

<ol class="forms">
	<li><label for="name">Name</label><input type="text"name="name" id="name" /></li>
	<li><label for="email">Email</label><input type="text" name="email" id="email" /></li>
	<li><label for="city">City</label><input type="text" name="city" id="city" /></li>
	<li><label for="state">State</label><input type="text" name="state" id="state" /></li>
	<li><label for="zip">Zip</label><input type="text" name="zip" id="zip" /></li>
	<li class="grouping"><label>Sign Up for the Following</label>
		<ul>
			<li><input type="checkbox" name="info1" id="info1" /><label for="info1">Information 1</label></li>
			<li><input type="checkbox" name="info2" id="info2" /><label for="info2">Information 2</label></li>
			<li><input type="checkbox" name="info3" id="info3" /><label for="info3">Information 3</label></li>
		</ul>
	</li>
	<li><label for="message">Message</label><textarea name="message" id="message"></textarea></li>
	<li class="buttons"><button type="submit" name="submit" id="submit">Submit</button></li>
</ol>

Even without any style applied, the form is still completely usable.

Styling the Forms

There are really 3 main styles of laying out forms:

• Labels above the form field
• Labels to the side of the form field, jagged right
• Labels to the side of the form field, jagged left

Again, like I said, I am not going to go through the pros and cons of each method, I am going to show how easy it is to switch between the methods using my markup.

Labels Above the Form Field

This is by far the easiest method. Here is the CSS used to style my example form:

ol.forms { float: left; list-style: none; width: 100%; }
ol.forms li {
	clear: both;
	float: left;
	margin: 0 0 10px;
	width: 100%;
}
ol.forms label { cursor: pointer; display: block; font-weight: bold; }
ol.forms input, ol.forms textarea {
	font: inherit;
	padding: 2px;
	width: 300px;
}
ol.forms textarea { height: 250px; }
ol.forms li.grouping { margin-bottom: 0; }
ol.forms li.grouping ul { list-style: none; }
ol.forms li.grouping ul label {
	display: inline;
	font-weight: normal;
	margin: 0 0 0 10px;
}
ol.forms li.grouping ul input { width: auto; }

Really nothing too complicated. In my opinion, I don’t like stacking the label over the form field; I think it just makes the form too long.

Labels to the Side of the Form Field, Jagged Right

I like this layout of forms the best. I think it presents the form in a clear way so that you can just scan right through the form fields. With just a few changes to the CSS, you can float the labels to the left of the form fields. The changes are marked in bold:

ol.forms { float: left; list-style: none; width: 100%; }
ol.forms li {
	clear: both;
	float: left;
	margin: 0 0 10px;
	width: 100%;
}
ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	margin: 0 10px 0 0;
	width: 90px;
}
ol.forms input, ol.forms textarea {
	font: inherit;
	padding: 2px;
	width: 300px;
}
ol.forms textarea { height: 250px; }
ol.forms li.grouping label { margin: 0; width: auto; }
ol.forms li.grouping { margin-bottom: 0; }
ol.forms li.grouping ul { list-style: none; margin-left: 100px; }
ol.forms li.grouping ul label {
	display: inline;
	float: none;
	font-weight: normal;
	margin: 0 0 0 10px;
	width: auto;
}
ol.forms li.grouping ul input { width: auto; }
ol.forms li.buttons { float: none; margin-left: 100px; width: auto; }

Take a look at the example with the fields on the left. Depending upon your label length, you may need to increase the width of the labels so that it does not span more than one line, but that is an easy enough change.

Labels to the Side of the Form Field, Jagged Left

Now with two changes to the CSS, you can easily switch to having the labels jagged left, which puts them closer to the form input. The changes needed are highlighted in bold:

ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	margin: 0 10px 0 0;
	text-align: right;
	width: 90px;
}
ol.forms li.grouping label { margin: 0; text-align: left; width: auto; }

Here is the example of the form with the labels jagged left.

Taking it a Step Further with More CSS and a Little jQuery

Since I like the form layout with labels to the side and jagged right, I am going to use this one to customize the display a little, and then add in some jQuery functionality.

Improving the Display

When looking at the form, it may be confusing to have all form fields be the same width. It is helpful to the user to modify the width to suit the data that will be entered.

For example, there is no reason that the zip code, city, and state fields should be so long, so let’s add a class to each one to shorten it to the length of the data that will probably be entered. Here is the modified markup:

<li>
	<label for="city">City</label>
	<input type="text" name="city" id="city" class="medium" />
</li>
<li>
	<label for="state">State</label>
	<input type="text" name="state" id="state" class="small" />
</li>
<li>
	<label for="zip">Zip</label>
	<input type="text" name="zip" id="zip" class="extraSmall" />
</li>

Then we just have to add those 3 classes to the CSS:

ol.forms .extraSmall { width: 50px; }
ol.forms .small { width: 100px; }
ol.forms .medium { width: 150px; }

Here is what the form looks like with that little bit of extra style. I also added in some help text, a notation for required fields, and the associated CSS; so take a look at the code to see that.

Adding a Little jQuery

Obviously you have read my article about AJAX forms with jQuery, which discusses how to add AJAX functionality to a form in a degradable way. So the following code assumes that you are going to be doing server side validation of the form as well.

Since there are required fields in this form, I add a class of required to the form and to each parent list item of required input fields.

First, we want our JavaScript to execute when the form with a class of required is submitted:

$(document).ready(function() {
	$('form.required').submit(function() {
		…
	});
});

If there are any error messages still displaying from before, we want to hide them. Also, let’s disable the submit button so just in case, the form cannot be submitted twice. I am also creating a variable that I will be using later to determine if there is an error or not:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;
	});
});

Now, we want to check each form field that has a parent list item with a class of required:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;

		jQuery.each($('form.required ol.forms li.required'),function() {
			…
		});
	});
});

There are a lot of other jQuery plugins that validate forms, but most of the time, it will just alert the user that the field is required. Instead of doing that, I am going to grab the text from the label element and display that in the error message:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;

		jQuery.each($('form.required ol.forms li.required'),function() {
			var labelText = $(this).children('label').text();
			labelText = labelText.replace(' *','');
		});
	});
});

Now, we have two different structures of form fields for each list item: a single form field and a grouping of checkboxes or radio buttons. We have to do things a little bit different for each one:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;

		jQuery.each($('form.required ol.forms li.required'),function() {
			var labelText = $(this).children('label').text();
			labelText = labelText.replace(' *','');

			if($(this).hasClass('grouping')) {
				…
			} else {
				…
			}
		});
	});
});

First, let’s focus on the case when there is a grouping. We want to loop through each input and see if it is checked. If it is, we just increment a counter. Then, if the counter equals zero, meaning we have no fields checked, we display an error message:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;

		jQuery.each($('form.required ol.forms li.required'),function() {
			var labelText = $(this).children('label').text();
			labelText = labelText.replace(' *','');

			if($(this).hasClass('grouping')) {
				var numSelected = 0;
				jQuery.each($(this).find('input'),function() {
					if($(this).attr('checked') == true) {
						numSelected++;
					}
				});

				if(numSelected == 0) {
					$(this).append('<span class="error">You must select from '+labelText+'.</span>');
					hasError = true;
				}
			} else {
				…
			}
		});
	});
});

That seems easy enough, and it’s even easier for the single input fields. We just check to see if the value is empty, and if it is, display the error message:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;

		jQuery.each($('form.required ol.forms li.required'),function() {
			var labelText = $(this).children('label').text();
			labelText = labelText.replace(' *','');

			if($(this).hasClass('grouping')) {
				var numSelected = 0;
				jQuery.each($(this).find('input'),function() {
					if($(this).attr('checked') == true) {
						numSelected++;
					}
				});

				if(numSelected == 0) {
					$(this).append('<span class="error">You must select from '+labelText+'.</span>');
					hasError = true;
				}
			} else {
				if(jQuery.trim($(this).children('input, textarea').val()) == '') {
					$(this).append('<span class="error">Please enter your '+labelText+'.</span>');
					hasError = true;
				}
			}
		});
	});
});

To finish up, we just check to see if the hasError variable is true. Since this is just a demo form, I just add an alert if the form would submit successfully:

$(document).ready(function() {
	$('form.required').submit(function() {
		$('form.required span.error').remove();
		$('form.required li.buttons button').attr('disabled','disabled');
		var hasError = false;

		jQuery.each($('form.required ol.forms li.required'),function() {
			var labelText = $(this).children('label').text();
			labelText = labelText.replace(' *','');

			if($(this).hasClass('grouping')) {
				var numSelected = 0;
				jQuery.each($(this).find('input'),function() {
					if($(this).attr('checked') == true) {
						numSelected++;
					}
				});

				if(numSelected == 0) {
					$(this).append('<span class="error">You must select from '+labelText+'.</span>');
					hasError = true;
				}
			} else {
				if(jQuery.trim($(this).children('input, textarea').val()) == '') {
					$(this).append('<span class="error">Please enter your '+labelText+'.</span>');
					hasError = true;
				}
			}
		});

		if(hasError) {
			$('form.required li.buttons button').removeAttr('disabled');
			return false;
		} else {
			alert('The form would submit now');
			$('form.required li.buttons button').removeAttr('disabled'); //Remove this line if using for real
			return false; //Change this to true when using it for real
		}
	});
});

Go ahead and take a look at the demo form to see it in action.

Conclusion

With a well structured form, you can easily customize it to your liking with just a little bit of CSS. Then, by using some custom jQuery code, you can easily customize how you would like to have the form validation appear.

With a little more work, you could easily add in validation for things like form elements expecting an email address, zip codes, phone numbers, etc. I will have to save that for another post since this one is quite long.

What do you all think? How do you structure your forms? Which layout of forms do you prefer and why?

Multiple Loops

The blog contained a main blog section, along with a “Favorites” section in the sidebar, that would be used to list anything: favorite websites, books, etc. I didn’t think that using just the basic WordPress blogroll or a third party bookmarking site would give the CEO enough flexibility to mark whatever she wanted as a favorite. So I decided to just create a separate category for Favorites.

In the footer of the site, there is also information about the last 6 projects that we had worked on. I definitely did not want those to be static. Since we complete projects almost daily, I wanted “non-technical” people to be able to update them. So I decided to create a separate category for those.

So in total, I had 3 categories: Blog, Favorites, and Projects.

I figured I would just end up having the main loop in the content area, a loop in the sidebar, and a loop in the footer. I had never really done a site with multiple loops, but after reading the documentation, it didn’t look too complicated. So the key to having multiple loops is to use the query_posts template tag.

The Main Blog Loop

The Blog category has an id of 1. So all you have to do is call the query_posts template tag before you loop through the entries:

<?php query_posts('cat=1');
	if (have_posts()) :
		while (have_posts()) : the_post(); ?>
			…
		<?php endwhile;
	endif; ?>

Then the Favorites and Project categories are basically the same, you just plug in the correct category id into the query_posts template tag.

Paging with Multiple Loops

So since we are using the query_posts template tag, it messes up the paging of the main loop. So, in the main blog loop, we need to use the ternary operator to add in the paging argument:

<?php
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	query_posts("cat=1&paged=$paged");
?>

So those two lines would replace the previous call to the query_posts template tag that we used for the main loop.

Read More Links

When I had first implemented the blog, we were using the read more links (whenever they were added into the post) for all posts. Later in the implementation process, I was told that the most recent article should always show the full post.

I wasn’t sure how the heck I could do that, but after some Googling I figured it out. Basically what we need to do is just create a simple counter to see if we are on the first post. If we are, we set a global $more variable equal to 1. So I define the $count variable and set it equal to 1, then I have this at the beginning of the main loop:

<?php
if (is_home()) {
	global $more;
	if($count == 1) $more = 1;
	else $more = 0;
	$count++;
}
?>

Wait a Minute…

So I was all ready to publish this article, when I found out today that the first article on my CEO’s blog was still showing the read more link. From what I discovered, it looked like both the is_home() and is_front_page() conditional tags were not registering as true when on the homepage. For the life of me, I could not figure out why this was happening.

So this was a little bit of a hacky solution, but it was all that I could think of quickly. I had this code before the loop:

<?php
	if($_SERVER['REQUEST_URI'] == '/') {
		$isHomepage = true;
	}
?>

So essentially, I was setting up my own flag to see if it was the homepage. What that is doing is checking the URL to see if it is the root of the site or not. Then I modifed the if statement in my other code to be:

<?php
	if (isset($isHomepage) && $isHomepage = true) {
		global $more;
		if($count == 1) $more = 1;
		else $more = 0;
		$count++;
	}
?>

I’m not sure if there is a better solution, but I think the reason the is_home() and is_front_page() conditions don’t work is because of calling the query_posts template tag, because they worked before the call.

Custom Fields

I had used custom fields before, and they are amazingly powerful in being able to extend WordPress functionality. For my CEO’s blog, I used 4 custom fields:

• favoriteThumbnail
• favoriteUrl
• projectThumbnail
• projectUrl

Favorites’ Custom Fields

The favorites are supposed to be little blurbs about something that my CEO likes, whether it is a book, website, etc. So the idea is that it is not supposed to be a full blog post, just a little blurb. So instead of linking to the WordPress post, we link to the favoriteUrl custom field. Here is how the favoriteUrl custom field is being used (this is called within The Loop):

<?php
$favoriteUrl = get_post_meta($post->ID, "favoriteUrl", true);
if($favoriteUrl != '') { ?>
	<a href="<?=$favoriteUrl ?>" class="heading"><strong><?php the_title(); ?></strong></a>
<?php } else { ?>
	<strong class="heading"><?php the_title(); ?></a>
<?php } ?>

So basically what I am doing there is first calling in the favoriteUrl custom field and assigning it to the $favoriteUrl variable. Then, I check to make sure it is not empty (meaning the custom field was not entered). If it is entered, I output the link to the URL. If not, I still do not link to the WordPress post, I just display the title in bold.

The favoriteThumbnail is pretty self explanatory and is called in the same way as the favoriteUrl. The reason I wanted to use a custom field for the thumbnail instead of just adding the image to the post content is because the design called for the image to be floated next to the title and because I wanted to link the image to the favoriteUrl. This way, when my CEO is adding a favorite, she does not have to worry about floating the image and linking it to the favoriteUrl.

Projects’ Custom Fields

Both of the Projects’ custom fields are used similarly to the Favorities’ custom fields. The projectThumbnail custom field is just used to show the most recent 6 projects in the footer. Nothing complicated, just showing and linking the photo to the WordPress post.

Until our new company website gets launched, we are linking to the short WordPress post which gives a little description about the project. The projectUrl outputs the URL to the project at the end of the post. Once our company website is finished, I will just modify the custom field to link directly from the footer to its respective page in our portfolio.

Conclusion

I really enjoyed doing this implementation. While it was just a simple blog, it is always great to learn a couple of new tricks/techniques. Any other WordPress tips that you have found useful?

I had just been using the :even and :odd selectors to add classes to each table row.

Here is the code that I have been using:

$(document).ready(function(){
	$("table.striped tbody tr:odd").addClass("odd");
	$("table.striped tbody tr:even").addClass("even");
});

Seems easy enough. Then I just styled the odd table rows like so:

table.striped tr.odd td { background-color: #f0f0f4; }

One thing to note is that the :even and :odd selectors are zero-indexed, so the first table row will have a class of even, and not odd. Here is an example showing this simple striping.

Multiple Striped Instances

The situation that I had today had two different tables that were being striped. So based on the code, you would think that there wouldn’t be a problem. Here is the example with two striped tables on the same page.

Weird, so it looks like the first table row in the second striped table has a class of even instead of odd. I thought that the client may not like that because the two tables were not consistent, so I tried to think of another way to do the striping.

The nth Child

So based on the documentation, it looks like the nth child selector would be the solution. I just modified my JavaScript like so:

$(document).ready(function(){
	$("table.striped tbody tr:nth-child(odd)").addClass("odd");
	$("table.striped tbody tr:nth-child(even)").addClass("even");
});

As a note, the nth child selector is not zero indexed, so the first table row will have a class of odd instead of even. Here is the fixed example.

Conclusion

From what I can tell, this does not appear to be a browser problem, but a bug in jQuery. I have checked this in Firefox, Safari, IE6 and IE7.

I created a demo page. to see what the markup generated from the plugin normally is. The markup is just an unordered list, and I have done some basic CSS so that it looks halfway decent.

Each photo just links to the original Flickr page with the photo on it. I kind of didn’t like that because if someone wanted to see the larger version, they would have to leave my site just to see it.

Digging into the Flickr Photos

If we take a look at the square image of me hugging my new TV, we can see that it is 75×75. Now if we take a closer look at the filename 2543094667_2ddfec7c73_s.jpg, we see that there is a _s at the end. Let’s take a look at the other photo sizes there are:

• Thumbnail: _t.jpg
• Small: _m.jpg
• Medium: .jpg
• Large: _o.jpg

The medium sized photo looks like a nice size to display. What if instead of linking the small square photos to their respective Flickr page, we open the medium sized photo in a lightbox.

Lightbox

The lightbox that I use is a hacked up version of the Facebox script. I modified it a little to use table-less markup and for the entire page to grey out. The lightbox is launched by setting the rel attribute equal to lightbox.

Another modification I would like to make is to enable the lightbox to work in sets. Kind of like the Lightbox 2 script, but that is for another day.

The reason I like the Facebox script is because you can also have inline content and content loaded via an AJAX call.

Tweaking the Flickr Markup

Since I do not want to modify the flickrRSS plugin to change the markup, I will just use jQuery to change the markup on body load.

So there are two things that I want to do:

• Add rel="lightbox" to each link containing the Flickr photo
• Change the href to link to the medium image instead of linking to the Flickr page

The Code

First, let’s add the rel="lightbox" attribute to each of the links that are descendants of ul#flickr on body load:

$(document).ready(function() {
	$('ul#flickr a').each(function() {
		$(this).attr('rel','lightbox');
	});
});

Next, let’s change the link to be the medium photo. We will do this by copying the source of the image, and then replacing _s.jpg with .jpg:

$(document).ready(function() {
	$('ul#flickr a').each(function() {
		$(this).attr('rel','lightbox');
		var imgSrc = $(this).children().attr('src');
		$(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))
	});
});

Next, we just initiate the lightbox script by targeting links that have a rel attribute of lightbox:

$(document).ready(function() {
	$('ul#flickr a').each(function() {
		$(this).attr('rel','lightbox');
		var imgSrc = $(this).children().attr('src');
		$(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))
	});

	$('a[rel*=lightbox]').facebox();
});

I have modified the first demo page to show this new functionality (although you can just look at my footer too).

It’s pretty cool how just a few lines of jQuery can drastically improve the user experience.

The company who designed it used images for the form buttons, and I found some interesting things while implementing them.

A Disclaimer

I think before you design form buttons to be images, you should seriously consider just styling the buttons with CSS. Just think about all of the images you will have to maintain. Is the value of the image button style really that great that you will deal with all of that hassle? In my opinion, it’s not. But whatever, to each his own (you like that Nate?). Ok, enough with the disclaimer, now on to the good stuff.

Some Options

Ok, so I decided that there were 3 options for implementing these buttons:

1. Use <input type="submit" /> and use an image replacement technique (that I didn’t think would work in Safari).
2. Use <input type="image" /> and have the image source as an attribute.
3. Use <button type="submit"></button> and insert the image within the button element.

My Decision

With ease of implementation in mind (since the time line was short), I decided to go with option 2: <input type="image" />. Everything went fine until we decided to test in IE (6 and 7). Apparently, the value from the button does not get passed onto the server. After some Googling around, I found out that this is a well known problem, and the only way to get this to work is by using JavaScript. Whenever I code something with JavaScript, I want to make sure that it works without JavaScript. So that solution would not work.

The Next Option

Next, I went with option 3: <button type="submit"></button>. I really did not know much about the button element until I read Rediscovering the Button Element a year ago.

Again, that option worked fine in everything, except IE6 this time (in IE7, it passed in the entire source of the image as the value, but we could find a way to make that work). Apparently, if you have multiple button elements with the same name attributes, the value that comes out from the server in IE6 is the value from the last element on the form.

Ok, maybe that was confusing. The example page might clarify some. The first example is just <input type="submit" />. The second example is <input type="image" />. Finally, the third example is <button type="submit"></button>.

Be sure to try that in IE6 and IE7 to see the problems I explained.

A Third Try?

Ok, this sucks, obviously I went with option 1 this time: <input type="submit" />. We know from the first example on the previous page that the value is at least passed through to the server properly in all browsers. Now the fun part is just trying to style the buttons in all browsers.

Stying the Input Element

Let’s assign a class to all of the buttons we are going to style, and just add some basic styles to the button:

input.buttons {
	background: none no-repeat top left;
	border: none;
	cursor: pointer;
	display: block;
	height: 25px;
	overflow: hidden;
	padding: 0;
	margin: 0 2px 0 0;
	text-indent: -9999px;
	width: auto;
}

Most of that should be pretty self explanatory. So let’s now add in the background images for the 3 buttons and give them a width:

input.updateCart { background-image: url(update-cart.gif); width: 107px; }
input.continueShopping { background-image: url(continue-shopping.gif); width: 146px; }
input.proceedCheckout { background-image: url(proceed-to-checkout.gif); width: 156px; }

The images are actually CSS Sprites so let’s add in the hover effect:

input.buttons:hover { background-position: 0 -25px; }

Sweet, let’s take a look at the page. Nice, it even looks good in Safari. Of course, it’s broken in IE 6 and IE 7.

Check out the weird buttons in IE

Fixing for IE

Ok, so I had no idea how to even attack this problem. So I started playing around, and finally came up with this:

input.buttons { font-size: 0; line-height: 25px; }

So I just serve those properties to IE6 and IE7. Beautiful, it works now.

One Last Thing

So we were able to get these buttons working in all browsers. There is just one minor thing that bugged me. The hover effect does not work on the buttons in IE6. How about we use jQuery to fix that for IE6:

$(document).ready(function(){
	$('input.buttons').hover(function() {
			$(this).css('background-position','0 -25px');
		},
		function() {
			$(this).css('background-position','0 0');
		}
	);
});

Nice, it works in IE6. So yeah, that was really long. But form buttons are always a fun topic to get working across all browsers. Anyone have anything they would do differently?

Why Should I Set a Body Id?

There are plenty of reasons why you should, here are a few:

• Maybe your design has different colors depending upon which section you are in. Instead of having to touch the markup, you can just modify the CSS depending upon the id on the body.
• You can control the current states for your navigation.
• Maybe the markup on your homepage is a little different than subpages, so instead of creating a different template, just stick in an if statement.

Setting Up the Code

So typically, you setup your navigation to match your directory structure. Ex: Top level navigation is about, and there is a folder on the root called about. So the easiest thing to do, is just check the url and determine which section you are in. This is the code that sets the body id on my site:

<?php
function setBodyId() {
    $path = $_SERVER['REQUEST_URI'];

    if(!isset($bodyId)) {
		if(eregi('^/about/',$path) == 1) {
			$bodyId = 'about';
		} else if(eregi('^/blog/',$path) == 1) {
			$bodyId = 'blog';
		} else if(eregi('^/contact/',$path) == 1) {
			$bodyId = 'contact';
		} else if(eregi('^/work/',$path) == 1) {
			$bodyId = 'work';
		} else if(eregi('^/play/',$path) == 1) {
			$bodyId = 'play';
		} else if ($path == '') {
			$bodyId = 'home';
		} else {
			$bodyId = 'general';
		}
	}

    return $bodyId;
}
?>

Sure, you could do this dynamically and pull in the top level folder from the url, but I have found there are too many situations that arise where you want multiple sections to have the same body id, or you want to set other variables section by section. So I stick with this method, and it has been successful.

My Example

My example is going to be a little different because it is in a subsection of my site. So here is the code I am using to control setting the body id in the example:

<?php
function exampleSetBodyId() {
    $path = $_SERVER['REQUEST_URI'];

    if(!isset($bodyId)) {
		if(eregi('^/play/set-a-body-id/about/',$path) == 1) {
			$bodyId = 'about';
		} else if(eregi('^/play/set-a-body-id/blog/',$path) == 1) {
			$bodyId = 'blog';
		} else if(eregi('^/play/set-a-body-id/contact/',$path) == 1) {
			$bodyId = 'contact';
		} else if(eregi('^/play/set-a-body-id/work/',$path) == 1) {
			$bodyId = 'work';
		} else if(eregi('^/play/set-a-body-id/play/',$path) == 1) {
			$bodyId = 'play';
		} else if ($path == '/play/set-a-body-id/') {
			$bodyId = 'home';
		} else {
			$bodyId = 'general';
		}
	}

    return $bodyId;
}
$bodyId = exampleSetBodyId();
?>

So in the $bodyId variable, you have the value of the body id, so just print the variable on the body tag:

<body id="<?=$bodyId; ?>">

Some Practical Uses

As I discussed at the beginning of the post, there are a lot of benefits to having a body id set on every page. This is the demo section that I am discussing below.

Different Colors Per Section

If you click through the navigation in the example, you can see the colors are different for each section. This can be easily accomplished without changing any markup through the power of descendant selectors. Here is the part of the CSS that is controlling the color of the borders:

div#content { border: 1px solid #000; }
ul#nav { border-top: 1px solid #000; }
body#home div#content, body#home ul#nav { border-color: #FF6600; }
body#about div#content, body#about ul#nav { border-color: #429C19; }
body#blog div#content, body#blog ul#nav { border-color: #54D0ED; }
body#work div#content, body#work ul#nav { border-color: #A81919; }
body#play div#content, body#play ul#nav { border-color: #400152; }
body#contact div#content, body#contact ul#nav { border-color: #F8DC0C; }

Here is the part that is changing the color of the h1:

body#home h1 { color: #FF6600; }
body#about h1, { color: #429C19; }
body#blog h1 { color: #54D0ED; }
body#work h1 { color: #A81919; }
body#play h1 { color: #400152; }
body#contact h1 { color: #F8DC0C; }

Obviously this is not the most beautiful example, but hopefully the idea makes sense.

Current State on Navigation

There are different ways to set the current state on the navigation, but by assigning an id to each navigation element, you can use descendant selectors again. Here is the markup:

<ul id="nav">
	<li id="homeNav"><a href="/play/set-a-body-id/">Home</a></li>
	<li id="aboutNav"><a href="/play/set-a-body-id/about/">About</a></li>
	<li id="blogNav"><a href="/play/set-a-body-id/blog/">Blog</a></li>
	<li id="workNav"><a href="/play/set-a-body-id/work/">Work</a></li>
	<li id="playNav"><a href="/play/set-a-body-id/play/">Play</a></li>
	<li id="contactNav"><a href="/play/set-a-body-id/contact/">Contact</a></li>
</ul>

Then, we use the following CSS to change the background color and text color when we are in that section:

body#home ul#nav li#homeNav a { background: #FF6600; }
body#about ul#nav li#aboutNav a { background: #429C19; }
body#blog ul#nav li#blogNav a { background: #54D0ED; }
body#work ul#nav li#workNav a { background: #A81919; }
body#play ul#nav li#playNav a { background: #400152; }
body#contact ul#nav li#contactNav a { background: #F8DC0C; }
body#home ul#nav li#homeNav a, body#about ul#nav li#aboutNav a, body#blog ul#nav li#blogNav a, body#contact ul#nav li#contactNav a { color: #000; }
body#work ul#nav li#workNav a, body#play ul#nav li#playNav a { color: #fff; }

Slightly Different Homepage Markup

Typically the markup for homepages are slightly different. But, if you are using one header and footer template for the entire site, you probably don’t want to create another template just for the homepage. So since we have the body id that tells us when we are on the homepage, we can just write a simple if statement:

<?php if($bodyId == 'home') { ?>
	…PUT YOUR HOMEPAGE SPECIFIC ELEMENTS HERE…
<?php } ?>

Make it Work with WordPress

So just take the setBodyId function that we defined earlier, and add it to your WordPress theme functions (functions.php).

After you have added the function, we want to add actions to wp_head and wp_footer (for some reason there isn’t a WordPress Hook Reference for wp_footer, but it is essentially the same as wp_head, just in the footer). Here is how we add our function to those hooks:

add_action('wp_head', 'setBodyId');
add_action('wp_footer', 'setBodyId');

Then, in your header, just call the wp_head hook, and call our function:

<?php wp_head(); $bodyId = setBodyId(); ?>

There you have it, you have the body id defined in the $bodyId variable, and you can do with it what you want.

Other Thoughts

I think by setting an id (or class) on such a high level element gives you a lot of control over its descendants. Another interesting idea that I heard was to use jQuery to determine the browser and version that the user is using, then add a class on the body. That way you could differ your CSS depending on which class is on the body. That idea would eliminate the need for conditional comments (at least for users with JavaScript enabled).

So hopefully this tutorial shows you an easy way to make some site-wide tasks simpler, and I am interested to see if other people have ideas for what to do with body ids.

I didn’t necessarily want to completely remove them because I thought that some people might be interested in them. These are the steps that I want to take:

1. Assign a class to all trackbacks
2. Hide them all with CSS
3. Add a jQuery visibility toggle

1) Assign a Class to All Trackbacks

In your comments.php theme file, find a line that looks like this:

<li id="comment-<?php comment_ID() ?>">

And replace it with this:

<li class="<?php if(get_comment_type() != 'comment') echo 'trackback'; ?>" id="comment-<?php comment_ID() ?>">

Explanation

The get_comment_type function returns either comment, trackback, or pingback. Since I want to hide everything except comments, I filter out anything that does not equal comment, so I assign a class of trackback to that list item.

2) Hide them All with CSS

Ok, easy enough, just add the following to your stylesheet:

ol.commentlist li.trackback { display: none; }

That should be pretty self explanatory.

3) Add a jQuery Visibility Toggle

The logic of the JavaScript will be as follows:

1. Check to see if there are any list items with a class of trackback.
2. Add a link to Show/Hide trackbacks.
3. Add a click event to the Show/Hide trackback link.
4. Update the text of the link accordingly.

First, let’s execute the JavaScript once the document is ready:

$(document).ready(function(){

});

Next, let’s check to see if there are any elements with a class of trackback:

$(document).ready(function(){
	if($('.trackback').length > 0) {

	}
});

Next, if there are trackbacks on the page, insert a link to show trackbacks:

$(document).ready(function(){
	if($('.trackback').length > 0) {
		$('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
	}
});

I am adding the show/hide trackback link after the heading with an id of comments.

Finally, I want to add in the click event to the link, and toggle the text depending upon if the trackbacks are visible or not:

$(document).ready(function(){
	if($('.trackback').length > 0) {
		$('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
		$('#toggleTrackbacks').click(function() {
			$('.trackback').slideToggle('slow');
			if($('#toggleTrackbacks').text() == '(Show Trackbacks)') {
				$('#toggleTrackbacks').text('(Hide Trackbacks)');
			} else {
				$('#toggleTrackbacks').text('(Show Trackbacks)');
			}
			return false;
		});
	}
});

So basically, I am adding the jQuery slideToggle effect when the show/hide trackbacks link is clicked. Then, if the text in the show/hide trackbacks link is Show Trackbacks, I change it to Hide Trackbacks, and the opposite when the text is Hide Trackbacks.

I have grabbed some of the comments from The Ultimate PNG Guide so you can see a demo of this in action.

I love how simple jQuery is.

1. Get a Consistent Base Font Size
2. Get Consistent Margins
3. Set a Float to Clear a Float
4. Image Replacement
5. Faux Columns
6. CSS Sprites

1. Get a Consistent Base Font Size

body { font-size: 62.5%; }

Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.

Although I typically then set my container font-size to 1.2em, which in turn sets the font-size to 12 pixels. But still, then you know that 1em is equal to 12 pixels.

See the example »

2. Get Consistent Margins

There are some great CSS resets out there, but I usually don’t need one that goes so far. I like to just remove the margin and padding from every element.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Then, you can set the margins that you want accordingly.

See the example »

3. Set a Float to Clear a Float

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too. All you need to remember is: Set a Float to Clear a Float.

I have created a simple page with two floating columns next to each other. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to set the containing element to float. But now, you will see that the container background doesn’t contain the content area.

Since the container has margin: 0 auto, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to insert a clearing element. In this case, I just use an empty div set to clear: both. Now, there are other ways to clear a float without markup, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty div.

4. Image Replacement

Sure, there are a lot of different image replacement techniques. But, I think that you get to most benefits from this technique. I also discussed this technique in a previous article, Improved Navigation Image Replacement

The Markup

<h1 id="logo">Company Name<span></span></h1>

The CSS

h1#logo {
	height: 110px;
	overflow: hidden;
	position: relative;
	width: 560px;
}
h1#logo span {
	background: url(/wp-content/uploads/2008/03/logo.gif) no-repeat;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

Basically, all we are doing is absolutely positioning an image over top of the HTML text.

The reason that I like this technique is because even when images are disabled, the text is still visible. Of course this means that you cannot use a transparent image to lay over top of the text, so it will not work in all situations.

See the example »

5. Faux Columns

It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.

The Markup

<div id="container">
	<div id="primaryContent">
		<h1>Primary Column</h1>
		<p>…</p>
	</div>
	<div id="secondaryContent">
		<h2>Secondary Column</h2>
		<p>…</p>
	</div>
	<div class="clearing"></div>
</div>

The CSS

div#container {
	background: url(/wp-content/uploads/2008/03/content-bg.gif) repeat-y top right;
	padding: 10px 0;
	width: 640px;
}
div#primaryContent { float: left; padding: 0 10px; width: 400px; }
div#secondaryContent { float: right; padding: 0 10px; width: 200px; }

Pretty simple: a containing element, 2 floating columns, and a clearing element so that the containing element will contain the floating columns (as noted in the Set a Float to Clear a Float technique above).

See the example »

6. CSS Sprites

CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math. Note: In both of these examples, I am using the Image Replacement technique discussed above.

Example #1

For this example, we are just going to have one download link that we want to replace with a nice graphic. Then, on hover, we want to change the image.

The Markup

<a href="#" id="download">Download Now<span></span></a>

The CSS

a#download {
	display: block;
	height: 75px;
	overflow: hidden;
	position: relative;
	width: 150px;
}
a#download span {
	background: url(/wp-content/uploads/2008/03/download.gif) no-repeat;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
a#download:hover span { background-position: 0 -75px; }

As you can see from the code, on hover, we shift the position of the background image to view a different part of the image.

Oh, and also, IE6 and 7 suck, so here are the styles we are serving to them:

Styles to IE6 and IE7

a#download { cursor: pointer; }

I realize that we could just put that in the regular stylesheet since it has no affect on other browsers, but I prefer to move stuff like that to the IE only stylesheets.

Styles to IE6 Only

a#download:hover { background-position: 0 0; }

This is some weird bug where the images shift when you hover, but then when you mouse-out, the images don’t shift back.

See the example »

Example #2

For the second example, we are going to use the CSS sprites technique, but for the entire navigation. This way, only one call needs to be made to the server to load the navigation. We are basically creating a CSS sprites matrix.

The Markup

<ul id="nav">
	<li id="home"><a href="#">Home<span></span></a></li>
	<li id="about"><a href="#">About<span></span></a></li>
	<li id="work"><a href="#">Work<span></span></a></li>
	<li id="play"><a href="#">Play<span></span></a></li>
	<li id="contact"><a href="#">Contact<span></span></a></li>
</ul>

The CSS

ul#nav { background: #91c6d5; float:left; list-style: none; width: 510px; }
ul#nav li { float: left; }
ul#nav a { color: #000; display: block; font-size: 1.5em; height: 38px; text-align: center; position: relative; }
ul#nav span { background: url(/wp-content/uploads/2008/03/nav.gif) no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

ul#nav li#home a { width: 102px; }
ul#nav li#home a:hover span { background-position: 0 -38px; }

ul#nav li#about a { width: 106px; }
ul#nav li#about span { background-position: -102px 0; }
ul#nav li#about a:hover span { background-position: -102px -38px; }

ul#nav li#work a { width: 92px; }
ul#nav li#work span { background-position: -208px 0; }
ul#nav li#work a:hover span { background-position: -208px -38px; }

ul#nav li#play a { width: 79px; }
ul#nav li#play span { background-position: -300px 0; }
ul#nav li#play a:hover span { background-position: -300px -38px; }

ul#nav li#contact a { width: 131px; }
ul#nav li#contact span { background-position: -379px 0; }
ul#nav li#contact a:hover span { background-position: -379px -38px; }

That may seem crazy, but it all makes sense if you take the time to think about it.

Again, we have to serve some similar styles to IE6 and 7 from the previous example:

Styles to IE6 and IE7

ul#nav a { cursor: pointer; }

Styles to IE6 Only

ul#nav a:hover { background-position: 0 0; }

See the example »

In Conclusion

This list is definitely not exhaustive; they are just the 6 that I think are extremely important. What other techniques do you think are important to know?

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!

Jakob Nielsen: The Top Ten Web Design Mistakes of 1999

Breaking the back button is never a good thing. But this article is not about that.

Back to the site I was implementing. I was really not interested in adding target="_blank" to every single external link, so I came up with a better solution…

The Solution

The site was already using jQuery for other functions, so I figured that I should just use some of its powerfulness to make my life easier.

With a couple lines of code, I solved my problem:

$(document).ready(function(){
	$("a[@href^='http']").attr('target','_blank');
});

Check out the demo to see the results.

Explanation

If you know anything about attribute selectors, that should look familiar to you. Basically, it is saying, apply the attribute target="_blank" to all links that begin with http.

Really easy, really powerful, problem solved. Some may say it almost might be preferable to browse the site with JavaScript disabled so that the external links would just open in the same window. But that debate is for another time.

I was trying to use the Microsoft proprietary AlphaImageLoader Filter because they background images were PNGs that were going to scale to fit the background. The div that I was setting the PNG as the background to, did not have a height or width specified. Apparently, to use the AlphaImageLoader property, the element that you are using it on must have another Microsoft propriety property: hasLayout.

From the Microsoft Developer Network Site:

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute.

An Example

I am going to use the same working example I used in my Ultimate PNG Guide. But this time, I am going to add the following to the head of the page:

<style type="text/css">
div#container div.inner { width: auto; }
</style>

Obviously not how you would want to really add that style to the page, but I am just trying to prove that in IE6, to use a PNG with the AlphaImageLoader Filter applied, the element must have layout. So here is the new page, which should be broken in IE6.

So there you have it, remember to give elements layout if you are going to use the AlphaImageLoader Filter.

The Function

function age($bMonth,$bDay,$bYear) {

	$cMonth = date('n');
	$cDay = date('j');
	$cYear = date('Y');

	if(($cMonth >= $bMonth && $cDay >= $bDay) || ($cMonth > $bMonth)) {
		return ($cYear - $bYear);
	} else {
		return ($cYear - $bYear - 1);
	}
}

This function takes 3 arguments: the birth month, the birth day, and the birth year. It will return the calculated age. It obviously won’t work with an age in the future; it will return a negative number. I could add in checking to see if it’s a valid date, but I don’t think it’s really necessary.

Check Out Some Examples

Nothing too complicated. Let me know if anyone has any suggestions to shorten the code.

Thankfully, Dean has improved them even more. Instead of having a ton of different JavaScript files with large file sizes, he has compressed them into two light-weight JavaScript files.

The are now two scripts, IE7.js and IE8.js, and they are hosted on Google Code. The IE7.js file “fixes” IE5 and IE6 so that it is up to par with IE7. Then, IE8.js adds in some additional functionality that is missing from IE7. Note: If you include IE8.js, you do not need to include IE7.js.

Usage

There are a couple of different options here, you can either download the files and place them on your server or link directly to the Google Code version.

Option 1: Download Files

1. Download the ZIP file.
2. Extract the IE7 folder to the root of your server.

3. Include the script in the head of your document:

   <!--[if lt IE 7]>
   <script src="/ie7/IE8.js" type="text/javascript"></script>
   <![endif]-->

   In this example, I am targeting all versions of Internet Explorer less than IE7, and applying the IE8 script to it. Or, you could apply the IE7 script instead, I just wanted the advanced CSS functionality.

   You could also set it so that it is applied in IE7 as well:

   <!--[if lte IE 7]>
   <script src="/ie7/IE8.js" type="text/javascript"></script>
   <![endif]-->

4. Open IE6 and enjoy some things not being broken.

Option 2: Link to Google Code Files

1. Find the version of the file you want to use
2. Copy the URL, ex: http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js

3. Include the script in the head of your document:

   <!--[if lt IE 7]>
   <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
   <![endif]-->

4. Smile, you just “fixed” IE6.

Hopefully that should get you started with what you need. My previous articles: Using Dean Edwards’ IE7 Script, The Ultimate PNG Guide have some other details about the previous version of the script, some of which still apply.

Let me know if you have questions.

I have already written about Using Dean Edwards’ IE7 Script, but I wanted to take it a step further and talk more about PNGs.

To Review

First, download the Dean Edwards script. Next, extract the files to the root of your webserver in a folder called ie7. It needs to be in this folder, because some of the scripts have a dependency on the folder.

Finally, just include the script in the head of your document using conditional comments:

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->

Ok, so now when you want to have the script “fix” the PNG in IE6, you just have to have -trans.png as the suffix of the filename of the image.

An Example

Now, I am no designer, but I have mocked-up a simple page to show some usage of PNGs.

Since the background on the body is the repeated diagonal lines, we cannot use a GIF for the rounded corners, because we aren’t sure where the corners will intersect with the lines on the bottom.

In an ideal world, this is how I would want to mark the page up.

But, in IE6, the PNGs have a blue glow around them. So if we apply the Dean Edwards scripts to the page, we see the bottom image disappears (keep in mind you have to be looking in IE6 to see this problem). This is because the script is applying the IE proprietary filter property, and once this applied, we cannot position or repeat a PNG.

So let’s change the way we are marking it up so that the bottom shows up in IE6. Basically, we have just added an empty div that contains the bottom background PNG.

Now we just have to worry about the repeated background of our main content area. In order to get rid of the blue glow, we have to apply IE’s filter property, which means that we can’t repeat it.

But, if we apply the filter property manually and change the sizingMethod to scale, we can give the effect of repeating the background.

div#container div.inner {
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/wp-content/uploads/2008/01/container-bg.png', sizingMethod='scale');
}

Basically, it’s just stretching the image to fit the area, but since it’s a simple image that we were going to repeat anyways, it looks fine stretched.

In Conclusion

Hopefully using a combination of these two PNG fixes can provide you with enough to get things looking good in all browsers.

Anyone have any other solutions?

Basically, XAMPP is a all in one Apache web server. It installs Apache, PHP, MySQL…everything I needed.

Once you install it, you get a web directory here C:\Program Files\xampp\htdocs (or whichever directory you install XAMPP to). That’s great, everything works fine when you put things in that directory and browse to localhost. But what about if you want to setup multiple sites? That is where I really had to do some digging.

Setting Up Multiple Sites

I found this really good article that walks you through setting up multiple sites on XAMPP. The article was a little longer than I thought it had to be, so I thought I would clarify some things.

1. Find this file: C:\Program Files\xampp\apache\conf\extra\httpd-vhosts.conf, and open it in notepad.
2. Find a line that says something like NameVirtualHost *:80. Remove the # sign that you see in front of it; this turns it from being a comment to code that is actually executed. (This was not in any instructions I could find)

3. Next, scroll to the bottom, and you can add multiple domains. Here is what mine looks like:

   <VirtualHost *:80>
   ServerAdmin webmaster@localhost.trevordavis.dev
   DocumentRoot "C:/sites/trevordavis.dev/webpages"
   ServerName localhost.trevordavis.dev
   </VirtualHost>
   
   <VirtualHost *:80>
   ServerAdmin webmaster@localhost.trevordavis.redesign
   DocumentRoot "C:/sites/trevordavis.redesign/webpages"
   ServerName localhost.trevordavis.redesign
   </VirtualHost>

4. Finally, find this file: C:\WINDOWS\system32\drivers\etc\hosts and open it in notepad. You need to add an entry for each site you setup in the httpd-vhosts.conf file. My file looks like this:

   127.0.0.1 localhost
   127.0.0.1 localhost.trevordavis.dev
   127.0.0.1 localhost.trevordavis.redesign

That’s It

Once you have done this you can browse to http://localhost.trevordavis.dev and http://localhost.trevordavis.redesign on your computer when you have your web server running. This means that you can view PHP files and execute SQL locally.

It’s great.

Let me know if you have any questions.

Start with a Regular Form

First, I am going to build a regular form. The form is just going to be a basic email form. You enter an email address to send to, an email address to send from, a subject, and a message. All fields are required. So the process of the form is:

1. User fills out the form.
2. User submits the form to the server.
3. Server side script makes sure that there are no blank fields and that the email addresses are valid.
4. If there are errors, show the form again with the error messages.
5. If there are no errors, send the email.

Ok, so this form is pretty simple, and doesn’t take much time to submit since it’s so short, but let’s see how much better we can make it with a little jQuery.

Add in JavaScript

OK, so next, I am going to make an AJAX version, which is a duplicate of the first form. The only other things I am going to include on the page are the jquery library (which you can download here) and my JavaScript to process this form.

Firing My Script When the Document is Ready

jQuery has a nice little function to have you script start when the document is ready:

$(document).ready(function(){
	//Script goes here
});

OK, easy enough. Now, let’s make something happen when the button to submit the form is clicked. I was smart enough to add an id of submit to my button, so it makes it really easy to reference:

$(document).ready(function(){
	$("#submit").click(function(){
		return false;
	});
});

First things first, I’m going to hide anything with the class of error if it’s showing (which nothing will be unless the form is unsuccessfully submitted twice). I also create a variable that I am going to use later to see if the form has an error and a variable to store the email regular expression:

$(document).ready(function(){
	$("#submit").click(function(){
		$(".error").hide();
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

		return false;
	});
});

Error Checking

Now that we’ve got the beginning of the script setup, we need to do the error checking. So first, let’s check to make sure that the email to address is not empty or invalid:

$(document).ready(function(){
	$("#submit").click(function(){
		$(".error").hide();
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

		var emailToVal = $("#emailTo").val();
		if(emailToVal == '') {
			$("#emailTo").after('<span class="error">You forgot to enter the email address to send to</span>');
			hasError = true;
		} else if(!emailReg.test(emailToVal)) {
			$("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
			hasError = true;
		}

		return false;
	});
});

Remember, the email address to send to input has an id of emailTo. What that code is saying is:

• Get the value of the email to address input.
• If it is empty, add an error message after the input
• If it has an invalid email address, add an error message after the input.

Now, we just need to repeat the error checking for the other form fields:

$(document).ready(function(){
	$("#submit").click(function(){
		$(".error").hide();
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

		var emailToVal = $("#emailTo").val();
		if(emailToVal == '') {
			$("#emailTo").after('<span class="error">You forgot to enter the email address to send to.</span>');
			hasError = true;
		} else if(!emailReg.test(emailToVal)) {
			$("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
			hasError = true;
		}

		var emailFromVal = $("#emailFrom").val();
		if(emailFromVal == '') {
			$("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
			hasError = true;
		} else if(!emailReg.test(emailFromVal)) {
			$("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
			hasError = true;
		}

		var subjectVal = $("#subject").val();
		if(subjectVal == '') {
			$("#subject").after('<span class="error">You forgot to enter the subject.</span>');
			hasError = true;
		}

		var messageVal = $("#message").val();
		if(messageVal == '') {
			$("#message").after('<span class="error">You forgot to enter the message.</span>');
			hasError = true;
		}

		return false;
	});
});

Ok, error checking is done. If there are no errors, we need to send the email via an AJAX request. I’m not going to include the whole script here, just because it’s getting long, but you can see the whole script.

So, there are no errors. Let’s remove the button from the form, and add in a loading graphic:

if(hasError == false) {
	$(this).hide();
	$("#sendEmail li.buttons").append('<img src="/images/template/loading.gif" alt="Loading" id="loading" />');
}

Submit the POST Request

Ok, now let’s send the values via an AJAX POST request to our send email script that just sends the email. Once the request is completed, let’s hide the form and display a success message:

$.post("/play/jqueryAjaxForm/sendEmail.php",
   { emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
   	function(data){
		$("#sendEmail").slideUp("normal", function() {

			$("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');
		});
	}
);

Pretty nice huh? So now, you have a perfectly accessible form. It works fine without JavaScript. But it works even better with JavaScript. I highly recommend checking out the jQuery Documentation. So go ahead, send yourself some emails to see for yourself.

Update…

I was asked in the comments if I could include the PHP script. So as requested, here are the files that are used:

• index.php
• verify.php
• sendEmail.php
• thanks.php

I love Dan Mall’s Soft Serve Technique, but then you have to make a special case for IE6. (Hopefully it won’t be too much longer that we have to worry about IE6).

Getting a Usable Base Font Size

Ok, so to start, I like setting the font size of the body to 62.5%. I used to take Dan Cederholm’s approach of setting the font size to small, but I finally realized that it did not give me a nice base font size to play with.

So by setting the font size of the body to 62.5%, we get a base font size of 10px. This gives us a nice round number to work with. Thus, 1em now equals 10px. 10px is way too small to be the font size of the content though. Thus, I just set the font size of the outter-most container to 1.2em. Since we had a base size of 10px, our font size in the container becomes 12px.

Heading Font Sizes

The next thing I like to do is to set the font sizes of all of the headings, h1-h6. A good set of values for headings is:

• h1: 22px
• h2: 20px
• h3: 18px
• h4: 16px
• h5: 14px
• h6: 12px

Again, these are just values that I am suggesting, you could definitely choose whatever you want.

To get these font sizes, we just need to do some simple math.

Example

Let’s use an h3 as an example. We take the size that we want the heading to be, 18px, and divide it by the container font size, 12px. So, 18/12 = 1.5. Then, we set the font size to either 1.5em or 150%. I personally like working with ems, although I used to prefer percentages.

So again, font size we want to achieve / font size of the container. Use this to compute the rest of your heading font sizes, and then you will have nice pixel values to work with.

Attacking the Margins

So obviously you want to avoid letting the browser control how your elements will be spaced, so let’s work on setting the margins on these elements too.

Remove the Default Margins

The first thing I do in a stylesheet is zero out the margins and paddings:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, th, td {
	margin: 0;
	padding: 0;
}

Next, I set a bottom margin of 1em on p, ul, ol, dl, blockquote:

p, ul, ol, dl, blockquote { margin-bottom: 1em; }

Then, to get an equal amount of margin on the bottom of the headings, we just need to do more simple math. We can’t just set the bottom margin to 1em because our font size on these elements are bigger than the rest of the content.

Example

So let’s use the h3 as an example again. This time, we take the font size of the container, 12px, and diving it by the size of the heading, 18px. 12/18 = 0.667. So then, our h3 would look like this:

h3 {
	font-size: 1.5em;
	margin-bottom: 0.667em;
}

So again, font size of the container / font size of the element. If you do this for all elements, you will have an equal margin between all elements. I made a page showing elements with equal margins.

I used to think this was best, but I have since realized that I like having the headings closer to the text that is following. So I divide the bottom margin on the headings by 4. Thus, we get a quarter of the margin above the heading, below it.

In my opinion, the example page with custom margins looks much better.

Anyone else have other methods?

I did not want to have Wordpress control everything; I wanted to have more control. By doing some quick queries, you can generate a sitemap for Google that has all of your blog entries in it.

Setting it Up

First, you will need to send the correct headers, create the opening xml tag, and connect to your database.

<?php
header("Content-Type: text/xml;charset=iso-8859-1");
echo '<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
require_once('DB CONNECTION GOES HERE'); //This is where I would require my DB connection file

If you are not sure how to connect to your database, you will need to contact your host to get that information, and then do a search for php MySQL connection. If you can’t figure it out still, let me know, and I can help.

Get the Categories

Next, we want to query the database to get the categories used in Wordpress:

$query = "SELECT cat_ID, category_nicename
		FROM wp_categories
		ORDER BY category_nicename";
$result = @mysql_query($query);

Then, we need to loop through the categories and display a url entry for each category:

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	echo '<url>
		<loc>http://trevordavis.net/blog/' . $row['category_nicename'] . '/</loc>
		<changefreq>weekly</changefreq>
	     </url>';

Get the Entries

Next, we need to create a query to return all of the entries for each category:

$artQuery = "SELECT p.post_name, DATE_FORMAT(p.post_date, '%Y-%m-%d') AS createdOn
		FROM wp_posts AS p, wp_categories AS cat, wp_post2cat AS pc
		WHERE p.ID = pc.post_id AND pc.category_id = " . $row['cat_ID'] . "
		GROUP BY p.ID
		ORDER BY p.ID DESC";
$artResult = @mysql_query($artQuery);

Finally, we want to create a url entry for each blog entry:

while($artRow = mysql_fetch_array($artResult, MYSQL_ASSOC)) {
	echo '<url>
		<loc>http://trevordavis.net/blog/' . $row['category_nicename'] . '/'. $artRow['post_name'] . '.php</loc>
		<lastmod>'.$artRow['createdOn'].'</lastmod>
		<changefreq>weekly</changefreq>
	     </url>';
}

To finish it off, we just close everything up:

}
echo'</urlset>';?>

The Whole Script

Here is the finished script:

<?php
header("Content-Type: text/xml;charset=iso-8859-1");
echo '<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
require_once('DB CONNECTION GOES HERE'); //This is where I would require my DB connection file

$query = "SELECT cat_ID, category_nicename
		FROM wp_categories
		ORDER BY category_nicename";
$result = @mysql_query($query);

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

	echo '<url>
		<loc>http://trevordavis.net/blog/' . $row['category_nicename'] . '/</loc>
		<changefreq>weekly</changefreq>
	     </url>';

	$artQuery = "SELECT p.post_name, DATE_FORMAT(p.post_date, '%Y-%m-%d') AS createdOn
			FROM wp_posts AS p, wp_categories AS cat, wp_post2cat AS pc
			WHERE p.ID = pc.post_id AND pc.category_id = " . $row['cat_ID'] . "
			GROUP BY p.ID
			ORDER BY p.ID DESC";

	$artResult = @mysql_query($artQuery);

	while($artRow = mysql_fetch_array($artResult, MYSQL_ASSOC)) {

		echo '<url>
			<loc>http://trevordavis.net/blog/' . $row['category_nicename'] . '/'. $artRow['post_name'] . '.php</loc>
			<lastmod>'.$artRow['createdOn'].'</lastmod>
			<changefreq>weekly</changefreq>
		      </url>';
	}
}
echo'</urlset>';
?>

Modifying the .htaccess file

We also want to rewrite the url for this file so that it is available at http://trevordavis.net/sitemap.xml. Open up your .htaccess file, or create one if you don’t have one. Then add the following:

RewriteEngine on
RewriteRule sitemap.xml googleSitemap.php

Upload this file along with the googleSitemap.php script to your site root, and you are set. You can also add the rest of your site’s file structure to the sitemap as well. You can see how I did this in my google sitemap.

Sitemaps Protocal

You can read more about the sitemaps protocal to see what other attributes you can apply to each url entry.

By the Way…

Let me know if you can think of any way to improve this.

The client wrote back right before we were ready to launch and said that they noticed a large white margin on the right hand side. We had to explain to them that since the design was left aligned and the picture can’t go on forever, there has to be an end to the design. We decided to center the design in order to make it look better.

So I went in and added margin: 0 auto like I normally would to center anything, but then I realized since it is absolutely positioned, it would’t work like that.

How to Center the Absolute Positioned Item

After doing some thinking, I thought about positioning the item from the left edge a certain percent. So I thought if I moved it over 50% and then shifted it back to the right, then it should work.

Example

Here is the CSS that I started with:

div#centered {
	height: 300px;
	left: 50%;
	position: absolute;
	top: 20px;
	width: 500px;
}

Ok, so now we’ve got it shifted over 50% from the left hand side, and in order to get it back to the center, you need to take half of the width of the item, in this case 250px.

So if we set a negative left margin of -250px, we end up with the following CSS:

div#centered {
	height: 300px;
	left: 50%;
	margin-left: -250px;
	position: absolute;
	top: 20px;
	width: 500px;
}

You can see that the absolutely positioned item is now centered.

In Case You Didn’t Notice…

I alphabetize my CSS properties. It makes everything so much easier to maintain. Once you actually start to think about it, it pretty much comes naturally too. Give it a shot.

For the project at work, I did it in ColdFusion; but on my own, I did it in PHP. I figured the way that I would have to do it would be to parse the URL to see which folders I was in.

The Code

File: breadcrumbs.php

<?php require('buildbreadcrumbs.php'); ?>

<ol id="breadCrumbs">
	<li class="first"><a href="/">Home</a></li>
<?php
	$breadCrumbs = $_SERVER['REQUEST_URI'];
	if($breadCrumbs != '') {
		$crumbUrl = '/';
		$toks = split('/', $breadCrumbs);
		for($i = 1; $i < count($toks) - 1; $i++) {
			$crumbUrl .= $toks[$i] . '/';
			if($breadCrumbMapping[$toks[$i]] != NULL) {
				echo '<li><a href="'.$crumbUrl.'">'.$breadCrumbMapping[$toks[$i]].'</a></li>';
			} else {
				echo '<li><a href="'.$crumbUrl.'">'.$toks[$i].'</a></li>';
			}
		}
		echo '<li class="last">'.$pageTitle.'</li>';
	}
?>
</ol>

The Explanation

The first thing that I do, is include the file buildbreadcrumbs.php (I’ll get to that later). Then the idea is that we will determine what folders we are in, based on the URL. We split the URL based on the slashes and step through them to make links.

Now, back to the File: buildbreadcrumbs.php

<?php
$breadCrumbMapping = Array();

/*Folders to be mapped*/
$breadCrumbMapping['f1'] = "Folder 1";
$breadCrumbMapping['f2'] = "Folder 2";
$breadCrumbMapping['f3'] = "Folder 3";
?>

This file is building as associative array to display different text than the folder name. There are some situations where the folders are not too pretty, so basically you just add the folder name (f1, f2, f3) to the associative array and assign it a “pretty” name (Folder 1, Folder 2, Folder 3). If you don’t assign a pretty name to a folder, it will just display the folder name instead.

I made an example page to see the bread crumbs in action.

You can download the scripts here:

• breadcrumbs.php
• buildbreadcrumbs.php

Update

Dean Edwards has updated his scripts. I have written a new entry describing the updated IE7 scripts.

At An Event Apart Boston, Eric Meyer discussed how IE7 is quickly being adopted. Since this is the case, we can treat IE6 as more of a secondary browser now.

We should all start to use the Dean Edwards IE7 script to bring IE6 up to par with standards compliant browsers.

The history behind the Dean Edwards script is that he wrote it when Microsoft had said that they were not going to produce any more versions of Internet Explorer. He wanted to provide a JavaScript solution to add more compliance to the browser.

Using the Script

First, download the Dean Edwards script. Next, extract the files to the root of your webserver in a folder called ie7. It needs to be in this folder, because some of the scripts have a dependency on the folder.

Finally, just include the script in the head of your document using conditional comments:

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->

On the configuration page, Dean shows you which scripts do what. By including the ie7-standard-p.js, you get the support of the following scripts:

• ie7-core.js
• ie7-html4.js
• ie7-layout.js
• ie7-css2-selectors.js
• ie7-graphics.js
• ie7-fixed.js

The only other script that I have included as well is the ie7-css3-selectors.js to include support for CSS3 selectors. Think of all those wonderful attribute selectors you can start to use in your project. It makes me all warm and tingly inside to think about where CSS can go when the browsers are up to the task.

Enjoy!

This really should be one of the first steps you take in a project. By doing this simple task, you will save yourself from a lot of IE6 headaches.

Sure, this only works for IE6 users who have JavaScript enabled. But honestly, is there anyone who is using IE6 who actually turns off JavaScript? If they do turn off JavaScript, it may just break some presentation layer things, but the site should still be perfectly usable.

So my co-worker went with the quick fix (for now), a JavaScript onmouseover solution, and I told him that it was lame. I told him there had to be a way to use CSS to do it. I didn’t have time to do it at work, so I played with it, and I have found a solution.

The Markup

Ok, so everyone knows to mark-up navigation in an unordered list:

<ul id="nav">
	<li><a href="#">Text to Cover Here</a></li>
	<li><a href="#">Text to Cover Here</a></li>
	<li><a href="#">Text to Cover Here</a></li>
	<li><a href="#">Text to Cover Here</a></li>
</ul>

Now, instead of placing an image in the anchor tag and then using JavaScript to change the hover state, I thought, why not just add an extra span at the end of the anchor tag. I chose the end, but it also works with it at the beginning. I think it makes more sense to have it at the end though, so that the text within the anchor tag is read first by screen readers and bots. So this is what our markup looks like now:

<ul id="nav">
	<li><a href="#">Text to Cover Here<span></span></a></li>
	<li><a href="#">Text to Cover Here<span></span></a></li>
	<li><a href="#">Text to Cover Here<span></span></a></li>
	<li><a href="#">Text to Cover Here<span></span></a></li>
</ul>

Let’s Style It

So I started off with just some normal styles that you would apply to a navigation: zeroing out margins and paddings, floating it, removing the list-styling, and giving it a width.

Next, I floated the list items so that they would be in a line horizontally. This is where it finally gets interesting, I promise. I styled the anchor tag like so:

ul#nav li a {
	background: #FFFF99;
	display: block;
	height: 30px;
	padding: 0 5px;
	width: 115px;
}

Since this is just an example, I put a random background color on (to make sure it didn’t show through in the final example), and I gave them all the same width. Not a likely situation, but I didn’t feel like giving each list item an id. That should be self explanatory enough.

Now, when I think back to the talk that Eric Meyer at An Event Apart Boston, he kept stressing that to a browser, an element is just an element, and you can do anything to it. So, my plan was to just set the anchor tag to be relatively positioned so that it would contain the span.

The next step is to add the background image to the span. Now one thing that needs to be realized is that you cannot use a transparent image. But I don’t think that really causes much of a problem in most cases.

ul#nav li a span {
	background: url(/wp-content/uploads/2008/01/nav.gif) no-repeat 0 -30px;
	cursor: pointer;
	display: block;
	height: 30px;
	left: 0;
	position: absolute;
	top: 0;
	width: 125px;
}

The only things to note from that is that I combined the normal and hover states into one awesome image (I wasn’t worried about how pretty it looked). I also had to add the cursor property for our best friend, IE6.

Ok, cool. We are on our way. Now we just need to shift the background image on the hover state:

ul#nav li a:hover span { background: url(/wp-content/uploads/2008/01/nav.gif) no-repeat 0 0; }

Voilà! It works like a charm. Check out the example.

But…

Did you check it in IE6? When I checked it in Firefox and IE7, everything worked beautifully. You can turn off the images and you get the text underneath.

When you do check it in IE6, you will notice that the hover states stay on. It’s very odd.

After a lot of tinkering, I finally found something that worked. If you add the following to the anchor when it is in its hovered state, it for some reason fixes it:

ul#nav li a:hover { background: 0 0; }

I have no explanation, but it does not seem to have any adverse affects on other browsers.

Let’s Bulletproof It

We can add a simple property to the anchor tag so that when someone resizes their text, it does not poke out from under the image:

ul#nav li a {
	background: #FFFF99;
	display: block;
	height: 30px;
	overflow: hidden; /*Added for bulletproofing*/
	padding: 0 5px;
	position: relative;
	width: 115px;
}

Check out the final example.

More Bulletproofing

If you wanted the text to resize gracefully when images are disabled, I suppose you could set your height in ems. Then you would just need to build some extra blank space into your image, so that it would work when images are enabled.

So hopefully that helps out my co-worker. I think it potentially solves a pretty big problem with CSS image navigation with images disabled.

Well, I ran into a little problem with the splintered striper, and I have a solution to the problem.

The problem occurred if you had multiple class names on the element you are trying to stripe. That may not make much sense, so I guess an example will suffice.

Striping Example with Problem

Say we start with the following markup:

<ul class="stripe something">
	<li>This is an odd row.</li>
	<li>This is an even row.</li>
	<li>This is an odd row.</li>
	<li>This is an even row.</li>
	<li>This is an odd row.</li>
	<li>This is an even row.</li>
</ul>

We are going to pretend that the class name something actually does something useful. Then using a JavaScript addLoadEvent function, we will add the striping event to run on page load:

addLoadEvent(function() {
  striper('ul','stripe','li','odd,even');
});

Essentially, we have told the striper function to stripe all list elements (lis) that are descendants of unordered lists (uls) with the class name of stripe. Then we want to apply the classes odd and even to the alternating list items.

Here is where the problem lies. Since there are two classes on the unordered list, the striper function does not recognize that it has a class name of stripe. Here is the problem in the code:

if ((parentElementClass == null)||(currentParent.className == parentElementClass)) {

Since we are just seeing if the class name of the current element is equal to the class name of stripe, this is not true.

I have created a simple demo page with an unordered list, table, and paragraphs that are supposed to be striped.

Fixing the Striper

Really all you have to do to the JavaScript is to remove the line from above and replace with the lines below:

var pattern = new RegExp("(^| )" + parentElementClass + "( |$)");
if ((parentElementClass == null)||(currentParent.className.match(pattern))) {

That takes the class name and splits is with a regular expression. So now you could have fifty class names on the element, and it will still work

Here is a little demo of the improved splintered striper.

I’m sure there is another way to do that easier, so feel free to let me know if there is.

Currently, you really have to do some digging to figure out exactly how to use them, but I hope this article explains them all better.

General Information

Basically, attribute selectors allow you to target elements based on their attributes (i.e. alt, href, title, etc.). In the table below, you can see all the different options for attribute selectors.

[attr]

Whenever the attribute is set. Ex: input[type]

[attr="val"]

Whenever the attribute equals the specific value. Ex: input[type="radio"]

[attr~="val"]

Whenever the attribute equals one of the space separated list of values. Ex: input[type~="radio checkbox"]

[attr|="val"]

Whenever the attribute equals a hyphen-separated list of words, beginning with the value. (This one is supposed to be unreliable, and I am a little confused by the specifications, so I am not really sure of how to explain an example.)

[attr*="val"]

Whenever the attribute contains the value. Ex: a[href*=".com"]

[attr^="val"]

Whenever the attribute starts with the value. Ex: a[href^="http"]

[attr$="val"]

Whenever the attribute ends with the value. Ex: a[href$=".pdf"]

Ok, so hopefully the general information makes them a little clearer, and I hope the following examples make them very easy to use.

Examples

Below, I will give an example of each attribute selector and how it can be used.

[attr]

Ok, so say maybe you want to style anchors that have the href attribute set to something. This may help differentiate JavaScript anchors.

The CSS you want to add is like so:

a { text-decoration: underline; }

a[href] {
	border-bottom: 1px dotted #999;
	text-decoration: none;
}

That will remove the underline, and add a grey bottom border to anything that has the href attribute set.

[attr="val"]

Ok, so maybe you have added a green border to all input elements, but then you don’t want them on radio buttons. So you add the following CSS:

input { border: 1px solid green; }

input[type="radio"] { border: none; }

That will add a green border to all input elements except for radio buttons.

[attr~="val"]

Use the same example that you want to add a green border to all input elements except for radio buttons, checkboxes, and submit buttons. The CSS you need is:

input { border: 1px solid green; }

input[type~="radio checkbox submit"] { border: none; }

So you get a green border on all input elements except radio buttons, checkboxes, and submit buttons.

[attr*="val"]

Ok, so maybe you want to add a Google favicon to every link to Google. Add the following (pretending you have a Google favicon):

a[href*="google"] {
	background: url(/images/googleIcon.gif) no-repeat 100% 50%;
	padding-right: 25px;
}

So now any link to Google, http://google.com/analytics, http://google.com/sitemaps, etc. will have the Google favicon.

[attr^="val"]

Let’s add an external link to all links that start with http

a[href^="http"] {
	background: url(/images/external.gif) no-repeat 100% 50%;
	padding-right: 25px;
}

Now every link that starts with http will have an external link icon.

[attr$="val"]

Ok, now we should display an icon for any file types that we are linking to: pdf, doc, xls.

a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"] {
	background-position: 100% 50%;
	background-repeat: no-repeat;
	padding-right: 19px;
}

a[href$=".pdf"] { background-image: url(/images/pdf.gif); }
a[href$=".doc"] { background-image: url(/images/doc.gif); }
a[href$=".xls"] { background-image: url(/images/xls.gif); }

This is one of the coolest things for me. No more adding extraneous markup in order to add an icon that shows the file type when linking to a file.

That’s it!

I must say, that this works in all browsers, except IE 6 of course. But if you use the Dean Edwards IE7 Script and include the CSS 3 selectors, it will work. I will eventually give a rundown of how to use that script, because I find the documentation a little hard to read. So I hope everyone enjoys attribute selectors as much as I do.

They are hard to style so that they work with your site design. They are hard to make them accessible. Yeah, yeah we have heard it all. But in reality, they are not that hard to do.

Since every other web developer/designer has their own method, I thought I would share my two cents.

When thinking through all of the HTML elements to find something that makes sense for forms, there are many options.

• Unordered List
• Ordered List
• DIVs
• Paragraphs
• Tables (Yes some people still use tables for forms)

There are probably others. But I like to use a more uncommon element: a Definition List. It is perfect for the job. You have got the definition term, which is essentially like the label. Then you have got the definition description, which is basically the actual form element.

Let’s start with some un-styled markup:

<form action="#" method="post" name="sendToFriendForm" id="sendToFriendForm">
	<dl class="forms">
		<dt><label for="name">Your Name:</label></dt>
		<dd><input name="name" id="name" type="text" /></dd>

		<dt><label for="senderEmail">Your Email Address: <span class="required">*</span></label></dt>
		<dd><input name="senderEmail" id="senderEmail" type="text" /></dd>

		<dt><label for="recipientEmail">Friend's Email Address: <span class="required">*</span></label></dt>
		<dd><input name="recipientEmail" id="recipientEmail" type="text" /></dd>
		<dd class="help">Use commas to separate multiple email addresses.</dd>

		<dt><label for="sex">Sex</label></dt>
		<dd class="radio"><input name="sex" id="male" type="radio" /> <label for="male">Male</label> <input name="sex" id="female" type="radio" /> <label for="female">Female</label></dd>
		<dt><label for="message">Message:</label></dt>
		<dd><textarea name="message" id="message"></textarea></dd>
	</dl>
	<button type="submit">Submit »</button>
</form>

I have created the page so you can see the output. Even un-styled, this form doesn’t even look bad. But lets add some style:

	form {
		margin: 0;
		padding: 0;
	}

	dl.forms {
		float: left;
		width: 100%;
	}

	dl.forms dt {
		margin: 0;
		padding: 10px 0 0 0;
		clear: left;
		float: left;
		width: 175px;
	}

	dl.forms label { font-weight: bold; }

	dl.forms dd {
		margin: 0;
		padding: 10px 0 0 0;
	}

	dl.forms dd.help {
		clear: left;
		padding-top: 2px;
		font-size: 90%;
		color: #999;
	}

	dl.forms input, dl.forms textarea { width: 300px; }

	dl.forms dd.radio input { width: auto; }

	dl.forms textarea { height: 150px; }

	.required {
		color: #FF0000;
		font-weight: bold;
	}

I don’t think I need to go step by step through that because it is pretty simple styling. I have created the styled page for you to see.

I personally like forms that have the label and the input element on the same line, but that’s just me. It is pretty flexible, try resizing the font two times. Still very readable. You could easily do the widths in ems or percentages; I just chose to use pixels since I don’t have any parent element containing it.

Should be pretty good in all browsers, especially since we didn’t do any crazy CSS. I know it looks good in FF, IE6 and IE7. I believe it works fine in Safari and Opera.

Obviously this isn’t the be all and end all to styling forms with CSS. But it is something to start with. So, go out and make it better. But be sure to share what you have created.