I was recently faced with the question of “How do I add a birthday event to my calendar on my iPhone?” Quickly, I said, “You just tap the plus sign to add a new event and select the “Birthday” calendar, right?” Wrong! You can’t select the birthday calendar on your phone, it just defaults to your main “Personal” calendar. This is very strange and I don’t understand why you aren’t given the option to select the “Birthday” calendar, but the fact is, you can’t. I was completely stumped. My birthdays just show up automatically because of an application I use called AddressBookSync (read more about that), so I’ve never been faced with this dilemma.

After almost completely giving up, it dawned on me that I can also see a contact’s birthday when I’m viewing their information in the contact list. Could it be that you have to add birthday information within the contact list to get it to show up on your calendar? Sure enough, if you view a contact on your phone and edit their information, you can tap the “plus” sign to add a new field at the very bottom. One of the options for this new field is “Birthday”. This allows you to add that person’s birthday. Now switch back over to your calendar and you’ll see that person’s birthday on your calendar.

It’s kind of an odd way to do it in my opinion, but it seems to be the only solution to manually add birthdays on your iPhone.

This is a tip for Facebook and Address Book users.  iPhone owners know that Facebook added a neat feature awhile ago to that allows you to sync your friend's profile pictures with your contact information right within the Facebook app.  This way, when a friend calls you, their facebook profile picture displays on your screen.  If you weren't aware, you can go to your friends list within the iPhone app and at the top right is a button called "Sync", tap on that and from there is it pretty self-explanatory.

However, I was looking for this same functionality long before the Facebook dev team added it to their app.  I came across an application called AddressBookSync.  It does essentially the same thing but with some great bonuses Facebook sync doesn't provide.  It scans your Address Book contact list and matches it up against your Facebook friends list and grabs information from Facebook and adds it to your Address Book.  This is all pretty standard, but one cool bonus is that you can also manually link up contacts with their Facebook profiles.  For example, I am on Facebook under my nickname so anyone trying to sync my contact information would have to have me in their phone under my nickname (which most do anyway, but that's besides the point).  If they don't have me in their Address Book under my nickname, no connection is made and none of my information is transferred, so the ability to manually tell Address Book that Matt Kreikemeier and Goon Kreikemeier are the same person is pretty nice.

The other absolute awesome thing is that it grabs your friend's birthday information if they have it listed!  This is such a great feature.  I didn't know it would do that, I wasn't expecting it to do that, but when it did it was a great surprise.  It scans all my friends and anyone that has their birthday listed now shows up in my calendar in iCal or BusyCal under the Birthdays calendar.  You just have to make sure that you are subscribed to the Birthdays calendar within the iCal preferences.   If you need direction on this, just leave a comment and I'll let you know.  Imagine the surprise when I opened up BusyCal and all of the sudden all of my friend's birthdays were scattered about on my calendar.  I have a terrible memory and this has been a great way to remember birthdays without having to go through and add everyone manually.

AddressBookSync is free and you can download it from their website.

This tip is only for MobileMe users, sorry!  If you aren't a MobileMe user, I don't want you to waste your time, no need reading any further.

I've been using Coda for awhile now and I think its my favorite editor.  The only major drawback has been that I can't sync my settings across multiple computers.  I am a "sync" nerd utilizing Dropbox, SugarSync, MobileMe and SVN to keep all of my various files in sync across my work iMac, my work PC, my home iMac, my laptop, my iPad, and my iPhone, and so it drives me crazy that if I add a new project to Coda at work that it doesn't automatically show up on my other machines.  I have to manually add the project and input all of the settings across all of my machines.

However, I found the simplest solution you could ask for simply by accident.  As I said, I have a MobileMe account that I utilize to keep my address book, keychains, textexpander, mail accounts, etc. etc. in sync.  Within MobileMe's settings you can select "Preferences" to sync.  I never realized that selecting this option syncs all of your applications preferences (or at least some of them) across your MobileMe-active machines including Coda and all of its saved settings and projects.

Now I can add a new project at work and when I get home and fire up Coda, the new project and all its settings are there and ready to go accomplishing a full sync of Coda across all my computers.

There are a few caveats to mention though...

This really does sync ALL of your preferences including things like the "Remote Path" and "Local Path" that you enter.  This leads to one major drawback.  You have to have the same local path to the files for that site which means you have to have the same username on every computer and keep your files in the exact some place within the file hierarchy on your machines.  For example, the local path for one of my projects is: /Users/Goon/Documents/SVN/clientnamehere.  Because the local path uses my username of "Goon", that will be synced across all of my computers.  If on one computer I have the username "Matt" instead of "Goon", Coda won't know where to access the local files for this project because it will be looking for a user named "Goon".  (I am actually just assuming all of this as I have the same username on all of my machines so I haven't been able to truly test this.  Maybe Coda is smart enough to figure it out and use a different username, but I thought this was worth mentioning just in case.)

If you're anything like me though, you are probably anal about having many things the same, so hopefully you have the same username and keep your project files in the same file structure on all of your machines.

The second caveat is that I don't think it syncs your clips.  I use TextExpander anyway so that isn't too big of a concern for me, but that could prove annoying to some people.  In this case, I'd highly recommend using TextExpander.  You can copy over all of your clips into TextExpander to use the same shortcuts and you can sync TextExpander using either MobileMe or Dropbox.  TextExpander is much more universal anyway allowing you to use it on pretty much any device.

Any other good Coda-syncing tips?  Comment below...

I know by now most people know all the little secrets about the iPhone, but I was surprised to find a few people that didn't know that you could enable Caps Lock on your iPhone.

All you have to do is go to Settings > General > Keyboard and turn on the "Enable Caps Lock" toggle.  Now, when you are typing an email or text message, just double tap shift and you'll see the key highlighted in blue signifying that Caps Lock is enabled.  You are now ready to SHOUT in your messages.

Any other good tips?  Leave them in the comments below...

This little super bowl drinking game was forwarded on to me in an email. I thought it was too classic to not post online. Hope you enjoy!

• Every time they mention hurricane Katrina, drink 1
• If they show pictures of the City of New Orleans right after Katrina, drink 1
• Every time they say how much the Saints mean 2 the City of New Orleans,drink 1
• Every time the words "tragedy", "flood", or "devastation" are used, drink 1
• Every time they talk about how good Reggie Bush was in college, drink 3
• If they show Kim Kardashian in the stands, drink 5
• Every time they show a picture of Reggie Bush with a bat or say "bringing the wood" drink for 5 seconds.
• Every time Reggie Bush gets negative yardage trying to run around in the backfield a bunch and outrun the defense, drink 1 and turn to the person next to you and say "I told you Vince Young should have won the Heisman"
• Every time Reggie Bush gets up and flexes his arms in that pose he likes to do, drink 1
• If they mention Tim Tebow for any reason, funnel a beer
• Every time they say that "it's destiny for the Saints to win" drink 1
• If they show footage of Katrina survivors at the Superdome, take a shot of cheap liquor
• If they call Saints fans the most passionate fans in football, drink 1
• If they say that the Saints, Saints fans, or the City of New Orleans "deserve" a Superbowl victory, drink 1
• Every time they say how good of a story the Saints are, drink 1
• If Jeremy Shockey pretends to be hurt after dropping a pass, drink 2
• If they mention the Saints beating the Falcons in 2006 in the first game after Katrina in the Superdome, drink 5 and remember that we are still a better football team with better fans.
• Every time they compare hurricane Katrina to the Haiti earthquake, funnel a beer and yell "bullshit!"
• Every time they mention brew Brees as the Mardi Gras king, drink 1
• Every time they show Archie Manning, drink 1, and mention how bad he sucked. If they show old footage of him on the Saints, drink 5. If they mention how tough of a decision it was for him as for whom to cheer for, drink 10.
• Every time they show a saints fan yelling "Who dat!" or a sign/shirt saying the same, drink 1.
• If they show Chris Paul at the game, drink 1 and mention to someone how much better he is than Marvin Williams.
• If they show former Mayor Ray Nagin, drink 5 and then punch someone in the face

Other Rules not involving the Saints:

• Every time they show Eli Manning in the press box, drink 1
• Every time Pierre Garcon is mentioned with Haiti, drink 1
• If Brett Favre is mentioned for any reason, drink 1

This tutorial demonstrates how to create a jQuery FAQ list that is both easy to use and easy to create. View a real life example.

FAQ pages are often a long list of questions followed by answers, or a list of questions that anchor link to an answer further down the page. Neither one creates a very usable way for users to easily find the information they are looking for.

The following script fixes all of that by creating a clean page that puts the user in control of what information to display.

The HTML

First we wrap everything in a wrapper div and give it a class name. Within this div is an h5. This h5 is actually our question. It doesn't have to be an h5, but if you use a different element, you will have to edit the jQuery accordingly to target the element you have chosen to use. Next, we have a div with a class of answer. We will be targeting this div in order for the user to be able to show and hide the answer. Within this div is a paragraph tag with some filler lorem ipsum text.

That is all you need to create the HTML for one question, however, to get the full effect, you will want to copy and past this code a few times so that you have a few questions.

<div class="FAQWrap">
  <h5>This is my question?</h5>
  <div class="answer">
    <p>Notare quam littera gothica quam, nunc putamus parum claram anteposuerit litterarum. Et quinta decima eodem modo typi qui nunc. Per seacula quarta decima nobis videntur parum clari: fiant sollemnes in.  Equitur mutationem consuetudium lectorum mirum est formas humanitatis.</p>
    </div>
  </div>

The CSS

The styles are essentially unimportant. You can styles the layout any way you want, but I will give some insight into some of the styles I often choose when creating an FAQ page.

The first thing to note is that I give my h5 a cursor: pointer style. This creates the hand pointer when the user hovers on the question. That gives the user a clear indication that something will happen if they click on this question.

You will also see that I have different background images for the h5 depending on whether it has a class of inactive or active. We will change this class with jQuery when the user clicks the question and the class, along with the background image arrow, will toggle, again creating visual interactivity between the user and the page.

#content {width: 960px; margin: 0 auto;}
.FAQWrap h5 {color: #555; margin: 10px 0 0 0; padding: 0 0 0 20px; font-size: 14px; font-weight: normal; cursor: pointer;}
.FAQWrap h5.inactive {background: url(../images/bg-faq-inactive.png) no-repeat 0 3px;}
.FAQWrap h5.active {background: url(../images/bg-faq-active.png) no-repeat 0 3px;}
.FAQWrap .answer {background: #EEE; margin: 10px 10px 20px 30px; padding: 10px;}

The jQuery

And finally, the most important part, the jQuery. Remember of course to first link to the jQuery framework.

The first thing we do is hide all answer divs when the page loads. That creates the nice clean layout we are looking for and puts the control in the hands of the user as which information they want displayed on the page.

Next, we target all h5's within the FAQWrap div and assign a class of inactive. This, along with our CSS on the h5, will create a background image of an arrow pointing to the right, denoting that the answer is hidden, but can be displayed if you click the question.

The next thing we want to do is run a function when we click on an h5 within FAQWrap. The first thing we do is use this toggleClass method to switch the class of the actual h5 we clicked. toggleClass simply toggles the class name on the targeted element. If it has a class of 'inactive', it will switch the class to 'active', and if it is 'active', it will switch the class to 'inactive'. So, hopefully you are now beginning to see that each time we click on an h5, we are switching the class name between 'inactive' and 'active', and that, in combination with our CSS, is what is changing our background image arrow on the h5.

The last thing we do, which is most important, is slideToggle the answer div. The way we do that is first find the parent of 'this' (the h5 we are clicking on), then we are finding the div with a class of answer within that parent element, and slideToggling it. This means that if the answer is showing, it will slideUp and and be hidden, and if it is hidden, it will slideDown and show.

$(function() {
      $('.answer').hide();
      $('.FAQWrap h5').addClass('inactive');
      $('.FAQWrap h5').click(function() {
        $(this).toggleClass('active');
        $(this).toggleClass('inactive');
        $(this).parent().find('.answer').slideToggle();        
      });
    });

The Demo

And so when you put all of that together, you get a nice, clean, easy to use FAQ page that any user will enjoy using!

Download the source