Today I was working on a project that:

1. Made use of jQuery UI Tabs through the WordPress Post Tabs plugin
2. Uses custom fonts for the tabs via Cufon
3. Requires tab font to change color when selected

My first attempt was to simply render the tabs with Cufon…

jQuery(document).ready(function($){
    Cufon.replace('.ui-tabs .ui-tabs-nav li a');
});

..and style the active and default states with CSS.

/* default tab style */
.ui-tabs .ui-tabs-nav li a {
    color: #454545;
}

/* selected tab style */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    color: #FFFFFF;
}

So far so good. The tabs were customized quite heavily and now looked like this.

However, there was a problem: the Cufon text wasn’t changing color when you clicked on different tabs.

The reason for this is because Cufon has already rendered on the page, and because there is no page reload when you click the tabs, Cufon doesn’t re-render to update the fonts and colors.

Checking the Cufon documentation, I found that you could manually refresh Cufon by calling the Cufon.refresh() function. With jQuery UI Tabs you can bind the refresh function to fire after the tabsshow event:

$('#tabs_0').bind('tabsshow', function() {
    Cufon.refresh('.ui-tabs .ui-tabs-nav li a');
});

Now the tab fonts and colors update when you click on the tabs, yay!

One more thing. In the code above I had to target the #tabs_0 selector because that is the selector which the Post Tabs plugin uses to render the tabs. However this wasn’t very flexible because it wouldn’t match the other instances of the jQuery UI Tabs which would have the IDs of #tabs_1, #tabs_2, #tabs_3.. #tabs_n.

So I turned to Twitter and within minutes I had my answer (thanks @cheeaun!). Simply use jQuery’s Attribute Starts With Selector:

$('[id^="tabs_"]').bind('tabsshow', function() {
    Cufon.refresh('.ui-tabs .ui-tabs-nav li a');
});

Now, the Tabs are a lot more bulletproof.

1. Cufon text will be updated when new tabs are selected
2. The code applies to multiple tabs generated by the Post Tabs plugin, i.e. #tabs_1, #tabs_2, #tabs_3.. #tabs__n_.

I hope this saves a few people the time spent figuring this out.

Related posts:

1. Simple form validation with FBJS on Facebook Page Tabs

Recently I helped my friend Beth Heavrin of Smart Green Tips to migrate her blog to a new domain name. Along the way I realized that the simple way of domain redirection doesn’t work as well for websites that are add-on domains in CPanel environments. This article shows you how to create bulletproof redirects that will work, even for add-on websites.

The Problem

CPanel site structure

In CPanel environments, you start off with a primary domain that resides in the public_html directory. When you add new site to your CPanel hosting, they are added as add-on domains whose root folder are subdirectories of public_html.

You end up with a directory structure in your web hosting account like the image on the right.

Simple .htaccess Redirects Don’t Work

For our example, let’s assume that the primary domain is PrimaryDomain.com and the new domain we want to redirect it to is AddOn1.com. To redirect PrimaryDomain.com to AddOn1.com, you may have used this code in the .htaccess file for PrimaryDomain.com:

# Redirect 301 / http://www.AddOn1.com/

Or, you may have used this code:

# RewriteRule ^(.*) http://www.AddOn1.com/$1 [R=301,L]

With the code above, PrimaryDomain.com will get redirected to AddOn1.com. But unfortunately visitors to AddOn2.com will be wrongly redirected to AddOn1.com/AddOn2.com. Same for other add-on domains within the public_html directory.

This is because AddOn2.com is a subdirectory of public_html. The 2 code snippets above redirect everything, including add-on domain subdirectories to AddOn1.com. Confused? Never mind! Just use the solution below.

The Solution

The solution is to check the hostname (URL) that the visitor is trying to visit before redirecting them. So, let’s update our .htaccess file to the following:

# Redirect PrimaryDomain.com to www.AddOn1.com
RewriteCond %{HTTP_HOST} ^PrimaryDomain\.com$
RewriteRule ^(.*)$ http://www.AddOn1.com/$1 [R=301,L]

#Redirect www.PrimaryDomain.com to www.AddOn1.com
RewriteCond %{HTTP_HOST} ^www\.PrimaryDomain\.com$
RewriteRule ^(.*)$ http://www.AddOn1.com/$1 [R=301,L]

The first block of rules only redirects visitors to PrimaryDomain.com and the second block only redirects visitors to www.PrimaryDomain.com. Visitors to AddOn2.com or AddOn3.com will not be redirected. Solved!

I’m a big fan of MAMP and use it to create development environments on my MacBook for websites I’m building. Ocassionally I run across a problem where the Apache and MySQL servers are stuck. What I mean is that MAMP says they’re on, but they’re not. And clicking the Stop/Start servers button doesn’t work. This usually happens when your system crashes with MAMP still running.

To fix it, simply go into MAMP preferences and click Reset MAMP Ports. Your Mac may ask you to enter your password. After that, click Set to default Apache and MySQL ports. Now you should be able to start/stop your servers again. Happy times