The Crafty Bastard

jQuery How-To: Changing One Dropdown’s Value Based on Another’s, in Every Browser

$("#popup-dates select").change(function() {
        var fromMonth = new Number( $('#month-from').val() );
        var toMonth = new Number( $('#month-to').val() );
        if ( fromMonth > toMonth ) {
                $('#month-to').val($('#month-from').val());
        }
});

I’m working on a project where the visitor searches for info in a date range, selecting a From: month (#month-from) and a To: month (#month-to) within the same year. This code automatically advances #month-to to equal #month-from if the visitor tries to make a selection where #month-to would be earlier than #month-from, creating a reverse timespan (ie. trying to search from June to January within the same year).

The code does the following:

1. Gets the values of the selected options (January’s option should have value=”1″, February’s “2″, etc.) and converts them to Number variables.
2. Compares the two values.
3. Updates #month-to to equal #month-from if one of them is changed to create a reverse timespan.

The most important part to note, though, is using $(“#popup-dates select”).change() as opposed to $(“#popup-dates option”).click(). For some reason the latter, which is semantically more accurate, simply doesn’t work in WebKit browsers like Chrome and Safari. Using $(“#popup-dates select”).change() will work in every browser, even IE6.

Hope this can save someone some time.

WordPress Tip: How to Make a Progress Marker (or Bar) for a Series of Pages

WordPress is a platform that I use heavily in both my personal and professional life as a web developer. Most of the websites I build use it as a CMS in some capacity and while it’s far from perfect, its customizability and huge support base make it a great, client-friendly tool. One of the first big WordPress-backed sites I worked on a few years ago, for which I did a lot of custom templating and PHP functionality, is actually in the WordPress.org Showcase, which remains a huge honor for me.

As many projects as I work on, though, each one still manages to teach me something new or an even better way to approach a routine challenge. I hope to use this space (in between ramblings about myself and pictures of my cat) to share some of the tricks I find or develop. They can always be better, I’m sure, but hopefully they can help out someone else who’s hopelessly stuck before a looming deadline and furiously Googling for an answer.

The Challenge

The portfolio website of San Antonio-based photographer (and all-around amazing dude) Mark Menjivar is organized into series, each of which has multiple photos displayed one per page. I needed not only to incorporate a way to navigate forward and back between pages in an ordered set but to display the visitor’s progress so they know where they are in the series.

Setting Up Previous/Next Navigation Between Sibling Pages

This is one of several basic features that WordPress somehow doesn’t have—there are functions like next_post_link() and previous_post_link() to navigate between posts but none for pages. Thankfully, the Next Page, Not Next Post plugin by Matt McInvale seamlessly adds this functionality to WP and saves the rest of us a lot of custom hacking.

Creating the Progress Marker

This was a little trickier. I didn’t find anyone sharing code to accomplish this, so I found my own solution:

<p class="progress">
<?php
	$current = $post->ID;
	$children = get_pages("title_li=&child_of=".$post->post_parent."&echo=0&sort_column=menu_order");
	$pagecount = 0;

	foreach ($children as $child) {
		$pagecount++;
		if ($child->ID == $current) {
			  $currentpage = $pagecount;
		}
	}

	if ($pages != 1) {
		echo $currentpage . "/" . $pagecount;
	} else { echo "&nbsp;" }
?>
</p>

This does the following:

1. Pulls all child pages of the current page’s parent, preserving their admin-set menu order.
2. Iterate through each page, finding the place number of the active page.
3. Count the total number of pages.
4. If the total number is more than one—ie. if the active page is not the only child of its parent—output the progress info.

This snippet simply outputs the two values inline but they could be used in other ways, such as to generate a progress bar. However you use it, though, it’s a great way to let visitors know exactly where they are in a series of pages. Feel free to share your alternate versions or uses of it.