Open the finder and go to:

Applications/MAMP/conf/apache/

The file you want to edit is httpd.conf, if you are not using MAMP you can search for this file and then follow the directions below.

Open the httpd.conf in the editor of your choice. Once you have it open search for “Listen 80“. Paste the example below into your config being careful to either paste over Listen 80 or do not copy the Listen 80 part from the example below. These directions are assuming a default MAMP httpd.conf. Replace username with your own username.

Listen 80

NameVirtualHost *
<VirtualHost *>
ServerName dev.localhost
DocumentRoot /Users/username/Sites/dev
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/dev>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

<VirtualHost *>
ServerName coolsite
DocumentRoot /Users/username/Sites/coolsite
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/coolsite>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

<VirtualHost *>
ServerName localhost
DocumentRoot /Users/username/Sites/
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

So what we have here is three different server names and paths. You can use subdomains like dev.localhost or you can even use a full name like coolsite. The reason we specify localhost and point it to the root of the sites folder is so localhost still works properly when you type it in the browser.

There is one step left. Open the terminal from your Applications/Utilities directory in the finder or search for it in spotlight. You will need to edit your hosts file, I use the VI editor, but if you haven’t used VI before, I recommend using Nano instead.

Type one of the following into the terminal.

$ sudo vi /private/etc/hosts

or

$ sudo nano /private/etc/hosts

The sudo will prompt you for your password, enter it and the file should open. If you don’t use sudo and enter your password you will not be able to save your changes. You should now see your host file, look for the line 127.0.0.1 localhost. Enter the info below being careful not to change anything else in your hosts file, it may be empty or it could have something other programs or people have put in there.

127.0.0.1 localhost
127.0.0.1 dev.localhost
127.0.0.1 coolsite

As you can see these correspond with the names you entered in the httpd.conf file. Now you will need to stop and start your server via MAMP or command line. Once you have stopped and started the MAMP stack, your new server names should load when typed into the browser. This is a great way for testing your sites and in some cases may be the only way to test them. You can use any names you wish and setup as many server names as you wish.

The problem

$jQuery('#toggle-test').toggle(function() {
  $jQuery(this).stop(true, true).animate({width : 500});
}, function() {
  $jQuery(this).stop(true, true).animate({width : 300});
});

As you can see in the example above, when clicking the link the toggle animation is triggered instead of the link destination.

The solution

$jQuery('#toggle-test2').toggle(function() {
  $jQuery("a").click(function(e) {
    e.stopPropagation();
  });
  $jQuery(this).stop(true, true).animate({width : 500});
}, function() {
  $jQuery(this).stop(true, true).animate({width : 300});
});

The difference with the second example is that we have added a click event within the toggle and added the stopPropagation() method. This “Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event” thus allowing the link to take it’s normal course of action.

A more practical use of this would be clickable slide out boxes with links embedded or even a close button on a toggleable element. These are just some of the uses for stopPropagation(), so keep it handy in your arsenal of jQuery tools.

Fancybox

Like most web challenges, the fix is quite simple, but almost every example I found always seemed to be missing one important piece of the puzzle.

$("#lightbox").fancybox({
  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
      $('#fancybox-content').height($(this).contents().find('body').height()+30);
    });
  }
});

In the above example we have given our lightbox an id of #lightbox. We initialize the plugin with some options and give it a type option of iframe. Now you can create your separate HTML file for the lightbox and link to it form your main page and give the link href an id of #fancy-box. If you would like to use multiple lightboxes on one page you could use a class instead of an id.

The iframe height magic happens when the onComplete event is triggered. Here you can set up a call call jQuery’s load function which will then be used to call the height function after the iframe has loaded—you cannot get the height until the frame source has fully loaded. The id of #fancybox-content is the name of the div that Fancybox wraps the iframe in. We then set the height of that div by checking the contents of the iframe and using jQuery’s find method to locate the body tag and then get the height. I found that the height was always off by about 30 pixels, thus the +30. This may be due to paddings and margins within the loaded HTML file, but you can fiddle around with it until you get the right offset. You should now have an iframed lightbox that auto sizes its height.

This quick tutorial will not go into the details of how to use the Google maps API, for that I refer you to the starter tutorial which is missing the fix needed to make the maps display properly in the iPad. This issue also affects the iPhone and should fix any problems there too. After thinking it was a CSS issue and fiddling with the CSS for over an hour I stumbled across more metadata options. In the Google example linked above, it shows a metadata name attribute of  “viewport” with content attribute values of “initial-scale=1.0, user-scalable=no”. You need a bit more than this for the iPad and iPhone. See below.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

The most important value is maximum-scale=1.0, width=device-width is just in there for good measure.  Basically this stops Safari from scaling or zooming your viewport when the orientation is changed. One note, sometimes the Safari browser won’t forget the way it was displaying before you made your changes, a quick stop in options -> Safari and you will find a clear cache option.

ThemePassion is all about premium themes of course, but more precisely, themes for content management systems, most of which are Open Source CMS projects. Right now there are well over 100 theme reviews on WordPress, Drupal, Joomla!, Magento, ExpressionEngine, OpenCart, phpBB, standalones and Photoshop. It’s taken about 3 months to compile all these, and the list keeps growing daily. So far the site has been a success and I’ve grown my readership faster than with any site in the past. Theme builders love to have more exposure, and the great thing about ThemePassion is that I only write positive reviews — I don’t believe there would be any value in people wasting time on themes that look ugly. These are all themes that I personally think look fantastic and in some cases really raise the bar.

ThemePassion itself is based on a template from Elegant Themes, a fantastic theme provider and probably the best value on the market at the time of writing. This was a hard decision for me as I have always built the themes myself for every iteration of this blog and I am quite capable of building and designing my own WordPress template. The issue was time, I wanted to get started, and really what better place for a premium theme than on a site about premium themes. The site is a grid layout so you can easily glance over all the thumbnailed screenshots for each review. The reviews themselves are short, but every one is written by yours truly.

The review process has really exposed me to a variety of designs in a very short time. In the future I plan on releasing some of my own themes through ThemePassion. Viewing beautiful themes every day really lights a fire in you. I would also like to provide more tutorials here on this site with whatever valuable lessons I learn along the way.  So if you are into themes or great design, I invite you to peruse ThemePassion, and if you have any ideas or advice, feel free to get in contact with me.

It’s called the IE upgrade warning and it’s pretty slick and super easy to set up. All you need to do is download the zip file from Google’s IE upgrade warning page. Extract and upload the included goodies to your server and add this snippet into the page.

<!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]-->

You will also need to upgrade the paths to point to your JavaScript directory. Once you do so, you should get a pretty little box like the one shown below when ancient IE browsers arrive at your site.

I know a lot of us could probably think of more colourful things to say in this message, but it’s probably just best to leave it alone. You can also get loads of translation files too! So the next time you think about dumbing down the user experience or spending 25% more time trying to make a site work in IE6, maybe this handy little script is the answer.

Before they left I was pretty excited to help set up a blog so they could document their adventures in Kenya while they were actually there, and the experience still fresh in their minds. So far the stories have been nothing short of amazing and I’m proud to work for a company involved in this kind of philanthropic work. You can find out more, and follow their adventures on our Kenya Blog.

Below we have four examples, two jQuery toggles and two jQuery hovers. The first toggle and the first hover do not employ the stop() function while the proceeding ones do. Try them out for yourself.

4 examples

No stop() function used

var height = $('#example1').height();
$('#example1').toggle(function() {
     $(this).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).animate({'height' : height}, 'slow');
});

$('#example3').hover(function() {
     $(this).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).animate({'height' : height}, 'slow');
});

The above examples first get the height of the example1 id, this height is then used for resetting all the examples to their original height after the first animation.

The snippet then sets the height the #example1 element to 100px when toggled/clicked and then back to the original height when toggled again. The same logic is applied to #example3 only with a hover instead. If you rapidly click the first and third examples above you will see the animations queue up and continue repeating until finished. It is more noticeable with rollovers, and this is probably not a desirable behavior in most situations.

Examples 2 and 4 use the jQuery stop function

$('#example2').toggle(function() {
     $(this).stop(true, true).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).stop(true, true).animate({'height' : height}, 'slow');
});
$('#example4').hover(function() {
     $(this).stop(true, false).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).stop(true, true).animate({'height' : height}, 'slow');
});

As you can see it’s pretty simple to fix, but you also have to be careful with the stop() function as sometimes you can get undesirable flicker effects.

Understanding the stop() function

The stop function takes two Boolean values, both of which default to false.

.stop( [ clearQueue ], [ jumpToEnd ] )

The first value clearQueue will stop the animation from stacking or queuing up each animation. The jumpToEnd value tells whether to finish or jump to the end of the animation sequence. You will often need to play around with these values to see what works best. As you can see in the hover example, the mouse over clears the queue but continues to animate, while the mouse out clears the queue and jumps to the end of the animation. If these values are all left to true in this example you can get some flickering effects.

Remember that the jQuery stop() function can be used on any animation function, which includes functions like slideUp() and SlideDown(). Happy coding.

Method 1: Dot by dot

The dot by dot method is exactly as it sounds, grab a brush and draw your line out. Depending on your layout this could take forever and end up being less than perfect if you make a mistake. A quick way to speed up the process is by duplicating and merging the layers as you go.

Start with a blank canvas of 500×500 pixels. Go to your layers window and create a new layer. Now zoom in about 500% and create two horizontal dashes or dots with the pen tool ( b ). Once you have completed this switch to the move tool (v). Now drag your two dots while holding down the ( alt ) key, this will turn your move tool into a double arrow which means you are duplicating the layer. As you drag the layer line it up so the spacing is correct with the previous two dots. You should now have 4 dots/dashes. Once you have lined them up merge them ( command/control e ). Now repeat the whole process again, each time you will double the length of your dotted/dashed line. If you use this method, although clunky, you can created many lines very quickly and then trim them to your desired size with the marquee tool. If you need a vertical line all you have to do is rotate ( command/control t ) the layer while holding the ( shift ) key to get a perfectly straight vertical line.

Need to change the colour? No problem, select the dashed/dotted lines layer in your layers palette and click “Lock transparent pixels”. Now select your brush tool ( b ) and increase the size ( ] ) to a large enough brush to paint over the dots/dashes quickly. Select the colour you wish to use and scribble over top of your lines.

This method while not overly eloquent is often the easiest method for a quick dashed line. If you need to use many dotted/dashed lines you might want to look at one of the other methods below.

Method 2: Brush palette

The brush method is fairly fast. Create a new 500×500 pixel canvas. Open your brushes ( F5 ) palette and select the 1 px brush. Uncheck Shape Dynamices, then select Brush Tip Shape. Slide the Spacing slider to the far right and then hold shift while drawing a line. You should have a perfect dotted line.

You can mess around with the spacing and roundness options, but there is only so much you can do with the default brushes, if you use rounded brushes are will get rounded dots, which may or may not be what you want. If you need larger dashes you can create your own brush. Say you want a 10×8 dash, all you have to do is created a 10×8 square dash and crop the canvas to that size. A quick way is to trim the document in the image menu. ( Image -> Trim… and select ok ).

Once you have your brush ready go to the edit menu and define a brush. ( Edit -> Define Brush Preset… ). Name it can click ok. When you return to the brushes menu it should be selected. Now if you apply the spacing settings to this brush you should have a much thicker dashed line.

The brush method is probably one of the most robust methods for creating dotted/dashed lines in photoshop.

Method 3: Pattern palette

The pattern method is similar in some ways to the brush method. This is by far the most complex of the 3 methods, but if you plan on changing the size of dotted boxes a lot then this method is the most flexible. When I create Photoshop mockups for web, I use a lot of layer shapes for sidebars, boxes, headers and what not and constantly nudge them into place with the arrow keys and the direct selection tool. With this method you will apply a pattern via the styles to a shape layer and then work with the vector mask to only show the edges of the pattern. Once completed you will now have a dotted or dashed line that you can move and nudge with the direct selection tool as much as you like without ever worrying about recreating the dotted lines again.

For this example we will create a 1 pixel dotted line, but this will work with thicker lines too. Create a new 2×2 document, add a new layer to it and hide the background layer so the image is completely transparent. Now put one pixel in the top left corner. Your document should look like the zoomed in example to the left. If you were to create a 3 pixel dash, your document would be 6×6 with a 3 pixel black box in the top left corner.

Now go to the edit menu and define a pattern. ( Edit -> Define Pattern… ). You are ready to create your box shape now. Create a large new document ( command/control N ) to play around with. Select the rectangle tool ( u ) and create a rectangular shape.

Now select the newly created shape and reduce it’s fill to 0%. The difference between Opacity and Fill is that Fill will hide the shape but not the Blending Options that you will be applying next. You can leave this a solid colour too, but make sure it’s not the same colour as your pattern, otherwise you will not see the dotted line. Now right click your new shape layer and select Blending Options…

In the blending options click Pattern Overlay and then select your pattern in the Pattern: section. Your pattern should be the last one added. Click OK.

Now you should have a box full of 1 pixel dots. Select the shape tool again ( u ) and make sure Shape layers and Subtract from shape area are selected in the toolbar as shown below.

Now select the Vector mask of  your shape in the layers palette and draw a mask over your shape. The key here is to draw it right to the edges. You can use the Direct Selection Tool ( a ) to tweak your anchor points.

You should now have a nice box with dotted lines like the one to the right.  You can continue to use the Direct Selection Tool by selecting the entire edge of the shape to manipulate this rectangle without worrying about the borders again. If you wanted the border only on one side then you would manipulate the inner vector mask so that it covered the top, right and bottom sides of the rectangle.

Although this method is more time consuming than the first two, it’s also very powerful if you are going to have a lot of dotted or dashed boxes in several layouts. Now you can just duplicate this one over and over and resize it without worrying about re-drawing the dots/dashes. As mentioned this can also be used for straight lines, just make sure the other sides of the rectangle are masked. Remember that the pattern is the colour of your border, so if you want a different colour you need to change the pattern colour.

If you have other tips on how to achieve the same examples as above with different methods, I would love to hear about them in the comments below.

FireBug Lite has the Inspector which is that button that lets you click on any part of the web page and see what’s going on. It’s especially helpful when troubleshooting layout issues with JavaScript or jQuery where you can’t actually see the CSS or HTML that is generated after the page loads.

Firebug Lite comes in a few flavours, a bookmarklet, a live link and a local link. You can test out Firebug Lite right now! I have embedded it right into this blog post. Look for a little bug in the bottom right hand corner of your browser window and click it, voilà! Enjoy.