YouTube Roundup 1

Funny, weird or cool videos I’ve enjoyed recently in no particular order.

Scissor Sisters – Invisible Light (official video) [NSFW?]

Cat vs Printer – the Translation

Science Saved My Soul

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.

And now a post from a previous blog that I abandoned.

“David v. Goliath, Now With Public Relations”

Original post date: September 13, 2009

There are a lot of great sites and pages out there with information on Opera Software, the company most widely known for the Opera browser used on computers, mobile devices and even the Wii and Nintendo DS. That’s all well and good, but boring. On the other hand, Opera’s caustic relationship with Microsoft, and the way both companies handled the conflicts, is fascinating from a public relations perspective.

Conflict 1

What Happened:

Although the software leviathan’s Internet Explorer easily reaches MSN, other browsers–such as Opera, Mozilla and some versions of Netscape–run into trouble…. MSN brings a message from Microsoft saying it has “detected that the browser that you are using will not render MSN.com correctly…. Additionally, you’ll see the most advanced functionality of MSN.com only with the latest version of Microsoft Internet Explorer or MSN Explorer.” … The page then provides several links for users to download versions of Internet Explorer for Windows, Macintosh and MSN Explorer. (source)

What Microsoft Said:

“All of our development work for the new MSN.com is … W3C standard,” said Bob Visse, the director of MSN marketing, referring to the World Wide Web Consortium, which is developing industry standards for web technologies. “For browsers that we know don’t support those standards or that we can’t insure will get a great experience for the customer, we do serve up a page that suggests that they upgrade to an IE browser that does support the” standards. (source)

What Opera Said:

Quite a lot. In an editorial on A List Apart, Opera CTO Håkon Wium Lie obliterates Microsoft’s claims by viewing the source code of 63 pages on MSN.com and its related portals, finding that none of those 63 pages was valid W3C standards, and only ten of them even declared a doctype.

Who Was Right:
continue reading →

So the contest just ended, and…

Hi Aaron,
Congratulations! Your excellent Keyboard Cat costume won first prize in Urlesque’s HallowMeme costume contest! As outlined on the voting page, you are the lucky recipient of a computer key seat from Great Big Stuff (and other assorted Urlesque goodies).

Send your mailing address to me (Kelly!) at [email] and I will get the prize-fulfilling wheels in motion.

Thanks for entering and reading Urlesque! We love you!

Kelly