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...

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

Description:

This page demonstrates the easiest way to do font replacement on the web. Get up and running in just a matter of a few minutes. This is a fairly brief and basic overview, but I am thinking that anyone trying to use this technique will have a basic understanding of how to manage the various files. But be sure to ask questions if anything is unclear, I promise it's not hard and anyone can do it, finally!

Until we are able to use the CSS3 @font-face property, we are stuck using 'hacks' to load styled fonts without creating background images manually. While many of these can be a major pain (cough-sifr), Cufon makes it super easy.

1. Download Cufon and call it in your html file.
   

   <script type="text/javascript" src="cufon.js"></script>

2. Select the font you would like to use by browsing to it on your computer through Cufon's web interface.
3. Be sure to make sure that you are allowed to freely use the font you are using and check the 'EULA' checkbox.
4. Select the different glyphs you want to use. You are probably fine just using uppercase, lowercase, numerals, punctuation, and maybe wordpress punctuation if you want.
5. Type in your domain so this file can only be used with your domain. This is a good security measure to prevent people from hotlinking your fonts.
6. You can play with the other settings but they are usually just fine so just check the 'accept terms' checkbox and download the javascript file for your font.
7. A javascript file will be downloaded with the necessary information to use this font, so be sure to call to this file in your html as well.

   <script type="text/javascript" src="Apple_Casual_400.font.js"></script>

8. Load the cufon script that calls a specific element.
   

   <script type="text/javascript">
     Cufon.replace('h2');
   </script>
   

   
   In this example, all H2s in our page will be display our stylized font (see demo below).

Demo:

This is an H1 with font replacement.

This is an H2 without font replacement.

This is a paragraph with font replacement.

Important Notes:

• This is javascript based so it will not work if the user has turned off javascript for some reason.
• You cannot add a css hover state to the focused element so this would not be a good solution for links that you want to change color on hover for instance.
• Unfortunately the text is NOT selectable (one of the pluses of sifr).
• In its out of the box form, you cannot target specific elements using selectors so you will need to load a javascript framework to handle that. I highly recommend jquery. Just load jQuery BEFORE you load cufon, and then you can target elements with css selectors.

        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      

      <head>
      	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      	<script type="text/javascript" src="cufon.js"></script>
      	<script type="text/javascript" src="Apple_Casual_400.font.js"></script>
      	<script type="text/javascript">
             Cufon.replace('.cufon');
        </script>
      	<title>Font Replacement - The Easy Way</title>
      </head>
    

Download full sources files!