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.

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.

For custom CSS and JavaScript within the post, the best place to put these snippets is embedded right into the HTML head of that post. This is super easy to do with WordPress custom fields and a slight modification to your WordPress theme.

What are custom fields?

If you don’t know what custom fields are in WordPress then step aboard, they are another powerful tool to add to your arsenal and easy to understand. The first step is making sure they are displayed on your Edit Post admin page. Create a new post and look to the top right corner of you admin interface. You should see Screen Options. Click it and then make sure Custom Fields is ticked in the Show on screen check box options. Now if you look below your post you should see a panel called Custom Fields.

A quick update to your theme

Either download your header.php file or use the WordPress editor to paste the snippet of code below into it. The snippet below should go right before your closing </head> tag.

<?php
if (is_single()) {
     if ($custom_header = get_post_meta($post->ID, 'custom_header', true)) {
     echo $custom_header;
     }
}
?>

This example allows you to post any type of data into your page head and allows you to specify the type of tag such as link style or script. The code above says: is this a single page? If so get the custom field named custom_header and echo/print it out. Now you are done and can save/upload the file to your server.

Now in your custom fields panel enter a new custom field of custom_header and add the styles or JavaScript you need. In the example below you would then add .myCustomStyle to your post in the HTML tab. I find using span tags in the editor is the best way to add custom classes.

You can add any kind of custom code into the header using the same method. Read more about custom fields in the WordPress codex.

My custom CSS isn’t showing up

If your CSS classes seem to be having no affect it’s probably because they are being overridden by your own theme CSS. Adding the !important declaration to any problem styles will fix this issue forcing them to override the style that is overriding your custom style, see the example below.

font-size:20px !important;
color:#1f1f1f !important;

That’s all there is to it, happy coding.

Using only JavaScript is the wrong way to do a pop-up. It’s not because JavaScript may be disabled; by now many websites would be completely broken without JavaScript and the expectation is that JavaScript is enabled. The reason for not using only JavaScript is accessibility and search engine optimization. First, pure JavaScript pop-ups will annoy power users who like to middle click links. I’m a middle click fiend and can have anywhere from 10 to 20 tabs open at any given time and pure JavaScript pop-ups take this expected functionality away. You are also crippling many search engines and thus harming your SEO rankings.

The easy but wrong way to do a pop-up

function badPopup() {
	window.open("http://www.ianhoar.com/", "window", "height=300,width=300" );
}

<a onclick="badPopup()" href="#">Very bad pop-up</a>

The above function can also be done inline with an onclick too, but either way it’s not the right way to do a pop-up. You cannot middle click or right click it and search engines will have trouble following it.

Some better ways to do a pop-up

function goodPopup(url) {
window.open(url, '_blank', 'scrollbars,resizable,height=300,width=300');
return false;
}

<a onclick="return goodPopup(this.href)" href="http://www.ianhoar.com">Much better pop-up function</a>

The above function is a much better way to do a pop-up because you are passing the links href thus enabling the link to work without JavaScript. This means we can middle click it and right click it, access it with JavaScript disabled and search engines will have no problem following the link either.

If you need a quick and dirty one off pop-up you can use inline JavaScript.

<a href="http://www.ianhoar.com" onclick="window.open(this.href, this.target, 'height=300,width=300'); return false">Quick and dirty pop-up with inline javascript</a>

Separating logic from markup

Another way to create pop-ups is to use an event listener. That requires a bit more JavaScript and I would rather not re-invent the wheel and use a JavaScript library like jQuery.

$(document).ready(function() {
	$('.pop-up').click(function() {
		url = $(this).attr('href');
		window.open(url, '_blank', 'scrollbars,resizable,height=300,width=300');
		return false;
	});
});

<a href="http://www.ianhoar.com" class="pop-up">Separating logic from markup with jQuery</a>

This function turns anything with the pop-up class attached to it into a pop-up link. You could add more functionality to this function by adding multiple window sizes and attributes.

No matter which method you choose, steer clear of using only JavaScript to open windows. It’s easy to make your links more accessible, and if you don’t have time to set up functions, just use the quick and dirty inline method above.

Check out all of the examples discussed in this post.

Who cares if my CSS is clean or optimized

There will always be people who don’t care, if it works it works, right? Why do you want to waste time cleaning up yoru CSS. Well the answer to that is twofold. The most obvious answer is that if you are not optimizing your CSS code base, it makes it larger and thus slower to load, but arguably this is a small issue for many websites and there are also automated compression tools. The second reason is far more important; messy CSS is hard to work with and wastes time and money, it’s as simple as that. The longer an unruly styles sheet grows the more unmanageable it becomes. Even if you are the only one working with your styles, you can still benefit from clean CSS. This tutorial aims to make your CSS cleaner, faster, and far more manageable, so start working towards super clean CSS.

Stop writing classes for HTML tags that already exist!

You should never have something like “main-header” in your styles for a title you plan on using throughout the site.

Avoid this:

.main-header {
     color:#green;
}

Do this instead:

#content h1 {
     color:#green;
}

This is cleaner and less confusing. This goes for all the HTML formatting tags. Also many web editors can apply header tags allowing a user to format pages nicely.

Here are some more examples:

#content strong { color:green; }
#content p { color:blue; }
#content em { font-weight:bold; }
#content blockquote { margin:auto 20px; }

Remember you can style any HTML element, so before creating a custom class, ask yourself this, “is there a way I can style an HTML element instead”.

Make use of the body tag

The body tag is another sometimes overlooked HTML tag that you can style. It can save you from declaring many styles over and over again throughout the stylesheet. Think about the style attributes that will be used the most throughout the site. Things like font-family, font-size, background-color and background-image. Declare your main font in the body tag, there is no reason to declare it anyway else. If you have a secondary font for headers then declare those in your header tags.

An example:

body {
     font-family:Georgia, "Times New Roman", Times, serif;
     font-size:12px;
     color:#615a44;
     background:#f8eedb;
}

Redundancy and duplication, group your selectors

This area is one of the biggest offenders for messy CSS, it’s also the place that can reduce the complexity of your styles the most when done right. If you are using the same font for all your header tags, then there is no reason to declare them for each and every header tag. The same holds true for any other common styles.

Avoid this:

#content h1 {
     font-family:Verdana, Geneva, sans-serif;
     color:green;
     font-weight:normal;
     font-size:20px;
     margin:10px 0 0 10px;
}

#content h2 {
     font-family:Verdana, Geneva, sans-serif;
     color:red;
     font-weight:normal;
     font-size:16px;
     margin:10px 0 0 10px;
}

#content h3 {
     font-family:Verdana, Geneva, sans-serif;
     color:blue;
     font-weight:normal;
     font-size:14px;
     margin:10px 0 0 10px;
}

Do this:

#content h1, #content h2, #content h3 {
     font-family:Verdana, Geneva, sans-serif;
     font-weight:normal;
     margin:10px 0 0 10px;
}

#content h1 {
     color:green;
     font-size:20px;
}

#content h2 {
     color:red;
     font-size:16px;
}

#content h3 {
     color:blue;
     font-size:14px;
}

Now if you want to change the font-family or margins for all your header selectors you can easily do it in one spot instead of three. Your CSS is also now faster and easier to maintain. When building out your styles think about what is redundant and how you can consolidate that redundancy into as little CSS as possible.

Shorten your CSS

This one is subjective, but try using short-hand CSS and declare all attributes at once. It’s faster to type, takes up less space and with time will be easier to read.

Avoid this:

     background-color:#000;
     background image:url('images/my_cool_picture.png');
     background-repeat:no-repeat;

Do this:

     background:url('images/my_cool_picture.png') no-repeat #000;

There’s a lot of CSS where you can short your declarations. In some cases you may want keep CSS declarations broken up for clarity, I find I tend to do this with font declarations, but use your discretion on this one.

More examples of short-hand CSS

You can declare font-size, line-height and font-family in one line.

     font: 14px/20px Georgia, "Times New Roman", Times, serif;

You can declare border-width, border-style and border-color in one line.

     border:solid 1px #000;
     border-left: 1px solid #000;

Margins and Paddings can also be done in one line. To remember think of a clock start at 12 going clockwise top, right, bottom left.

     margin:5px 2px 12px 2px;
     padding:5px 2px 12px 2px;

If you want to get really fancy and you have equal margins or paddings on top and bottom, and left and right you can do this.

     margin:5px 2px;
     padding:5px 2px;

If all sides are the same you can specify a single value.

Watch the scope of your styles

Try not to write styles that affect every HTML tag unless you absolutely want those style attributes applied throughout the site as a default style. Instead break down your CSS into manageable chunks. If you have different kinds of headers in your content than in your side bar then limit the style to that element.

Avoid this:

h2 {
     color:green;
}

Do this:

#content h2 {
     color:green;
}
#sidebar h2 {
     color:blue;
}

Now you have different h2 styles without custom classes or overriding anyone else’s styles.

Short hand colours

You can even specify some colours short hand. If the first three characters repeat themselves you can omit three of them. For example, black and white are #000000 and #ffffff.

Do this:

#content h1 {
     color:#000;
}

Always improving your style

CSS is something you can constantly improve. Over the years I have seen mine get better and better and as CSS3 is introduced into the mix things will only get better. A lot of the basics you apply here will carry over. If you have any of your own CSS time savers or tips, please post them in the comments section.

What is Zen Coding?

Zen Coding is hard to explain, but if you have been working with HTML and CSS for awhile now you should be able to pick it up very quickly. It’s easy to learn and best shown by example, so lets start with an example.

Say I want a div with an id of frame and a class of indent, I would type:

div#frame.indent

In the Coda editor hitting F1 would turn the above into this:

<div id="frame" class="indent"></div>

That’s pretty cool, but not life changing, but how about something like this.

table>tr*3>td*4

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Okay, I know what your saying, who needs complex tables anymore! Well, email newsletters and tabular data for one, but how about this.

ul#navigation>li.link*5

<ul id="navigation">
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
</ul>

What if each link class needs to be unique?

ul#navigation>li.link-$*5

<ul id="navigation">
	<li class="link-1"></li>
	<li class="link-2"></li>
	<li class="link-3"></li>
	<li class="link-4"></li>
	<li class="link-5"></li>
</ul>

How about adding a strong tag in each bullet.

ul#navigation>li.link-$*5>strong

<ul id="navigation">
	<li class="link-1"><strong></strong></li>
	<li class="link-2"><strong></strong></li>
	<li class="link-3"><strong></strong></li>
	<li class="link-4"><strong></strong></li>
	<li class="link-5"><strong></strong></li>
</ul>

Want a bunch of caption blocks?
div.caption*5>h1+h2+p

<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>

Attributes? Got that covered too.

a[href="link$.html" target="_blank"]*3

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Okay, it’s probably clear by now that I think Zen Coding is awesome and maybe I’m getting carried away now, but lets try one more. This one helped me post all the examples above to this post by using a filter. Adding a |e filter to the end of the above example will escape all unsafe XML characters with HTML entities. Perfect for posting code examples.

a[href="link$.html" target="_blank"]*3|e

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Many editors are supported

Don’t have coda? That’s not a problem, many editors are supported and chances are you are familiar with one of them. There’s even a PHP version called ZenPHP which will generate blocks of HTML in a similar fashion. If you have any really cool Zen Coding selectors post them in the comments.

• Official Project site
• More selector examples
• List of filters

Keeping code clean in the messy world of email newsletters

Obviously putting the font-family in the table or a surrounding div should do the trick, and it does for everything except Outlook 2007, for some reasons font-family declarations do not cascade. One easy but tedious way to fix this issue is to put inline styles all over the place. I don’t like this method, it makes it easy to forget sections of copy and it messy. I always especially avoid using inline styles on paragraph tags. You have have almost no control on the p tags anyway. Put everything you need in your td tags and leave your p tags clean.

So you might be thinking well then I’ll just add font-family declarations to all my td tags. Again this is slightly less messy, but still messy and our newsletters markup are awfully messy as it is. This is a place where you can use an embedded style. I know there are blanket rules like never user anything but inline styles, but this is not always the case, and blanket rules never benefit anyone. There are places for embedded styles, and they are even required in some cases for optimal cross client compatibility as I wrote about in “Outlook 2007, inline styles, and links“. The thing you must always remember when using embedded styles is that other email clients like Gmail are going to ignore them completely, so build in redundancies.

Style the table data

The fix is simple, you only need to declare your font-family twice. Use an inline style once in your table.

<table border="0" cellspacing="0" cellpadding="0" style="font-family:font-family:Verdana, Geneva, sans-serif;">

At the top of your page add this to your embedded style.

<style media="all" type="text/css">
td {
     font-family:Verdana, Geneva, sans-serif;
}
</style>

Now you have made Outlook 2007 happy and given every td in your email newsletter a font-family. When the embedded style is stripped in other clients like Gmail you are still keeping the client happy, because other clients won’t ignore the font-family in the table tag and it will actually cascade throughout the document.

The problem illustrated

As you can see the list on the left image does not properly aligned, while the one on the right is. The fix is quite simple.

ul, ol {
	overflow: hidden;
}

Use overflow:hidden on your ul and ol tags. This will stop your lists from flowing around images too, but that’s probably a good thing because a list flowing around an image isn’t every pleasing to the eyes.

Getting it to work in IE6

You didn’t think you were finished did you? When I did the redesign for ianhoar.com I really wasn’t sure if I would support Internet Explorer 6 at all, but in the end I decided that if I still have to support it on my professional projects then my blog should probably support this truly awful browser too.

The IE6 fix is a zoom:1 declaration. Unfortunately the zoom declaration is not valid CSS. You can get around this by creating a second CSS file called ie.css and use conditional comments when linking the file.

ul, ol {
	zoom:1;
}

And the CSS conditional

<!--[if IE 6]>
	<link rel="stylesheet" href="ie.css" mce_href="ie.css" type="text/css" media="all" />
<![endif]-->

Your lists should look a lot nicer now when situated next to floated images or other floated elements.

It is becoming more and more important to at least have a basic understanding of all the information that goes into making a fantastic website. Knowing limitations and pushing those limits makes web design and development fun, interesting, and challenging. If you work in this field you probably already know that web work is all about constantly learning new technologies, tools, tips and tricks.

Smashing Magazine

If you don’t know about this one then you have been missing out. While there is some fluff from time to time, you learn a lot from this site. There are a lot of top website and tools lists which can get tedious, but Smashing Magazine really does have the pulse of the web and this is the spot to be if you want to keep up to date on web trends. Some of their most popular posts are actually their trend posts. Critics will say that Smashing causes everyone to create the same type of designs, but I think it’s good to know what is working out there and what is not.

Noupe

Noupe is part of the Smashing network. It has a huge amount inspirational lists and resources. When you need a break from work or if you are feeling creatively drained it can be a great quick stop for a creative inspirational recharge.

Grafpedia

Grafpedia is the holy grail of Photoshop web design tutorials. The site sells their templates, but the real guts of the site is the full on tutorials. You can create all of their PSD templates by following their extremely detailed tutorials. Most of us won’t want to do that of course, but browsing the designs until you see something that makes you say “how did they do that” and then getting a detailed play by play tutorial on just that question is pretty cool. A fantastic resource for Photoshop web design techniques. Also a great place to start if you are completely new to creating Photoshop mockups.

ProBlogger

If you are a blogger, you should be reading this guys stuff. I started reading ProBlogger about two years ago. Some of the subject matter may be obvious for the more advanced bloggers, but you’ll probably gain new insights regardless of your skill level. Once you digest a lot of Darren’s site it does start to feel a bit regurgitated, but a quick visit every now and then always reveals something new for me. He also does a lot of his own tests and research on analytics and SEO. Problogger is also very professional and way less spamy than a lot of the get rich quick blogging tip sites out there.

Ajaxian

Ajaxian is for the more technically minded web designers and developers out there. As the name suggests they follow a lot of Ajax techniques, but the site has much more to offer than news about Ajax. If you want to know where the future of Web Apps are headed, this is a good starting point. Even if you are not a programmer, there’s a lot of cool bleeding edge stuff to see on this site.

Adobe BrowserLab

The best way to really test your websites is with the actual browser, usually via a virtual machine. Not everyone has time to install a load of browsers under virtual machines and if you don’t need to test the functionality then Adobe BrowserLab is the answer to your testing needs. The layout is slick and easy to use. You can select all the browser you want to test with and save them. The site then quickly renders image screenshots of all the browsers you selected. The next time you need to test out good old IE6 or some other hard to find browser version, give it a try.

Focus: Cross-browser testing
browserlab.adobe.com

Web Designer Wall

“A wall of design ideas, web trends, and tutorials.” This is another personal blog with a broad range of web design content. Tutorials, news, funky design techniques and everything in between. There’s a lot of content here and this guy posts often.

Pro Blog Design

This site has been around for a few years, but it only recently hit my radar. The focus is on web design with an emphasis on blogs. It’s got some fantastic tutorials and a lot of discussion.

WebKitBits

I recently discovered this gem of a site and it’s quickly becoming a favourite. WebKitBits is all about really cool projects done using the power of the Webkit rendering engine. Webkit is the browser engine built into Safari, Chrome, iPhone, Palm Pre, and Android, and it’s pretty awesome. This engine blows away Internet Explorer and even gives Gecko a run for it’s money. The stuff here is bleeding edge and some of it possibly years away before we see it in mainstream websites, but it will reignite you passion for everything web and you will be ready for the next wave of awesome.

Learning jQuery

jQuery should need no introduction by now and should be in every web designers arsenal. I would be lost without it or at least spending many more hours on my scripting. It’s the JavaScript framework library that went from “jWhat?” to “oh yeah, that’s easy we can do it with jQuery”. If you’re looking for people who know jQuery like the back of their hand, then this is the site for you as the authors share tips, techniques and tutorials and have written fantastic books on jQuery too.

BrushKing

While not exactly a web design focused site this is still a must see for web designers. It’s a Photoshop brush site with loads of free brushes. There’s always that one brush that you can plop into a web page and just add that little bit of extra wow. The quality of most of the brushes is stunning.

Web Design Ledger

Web Design Ledger or WDL for short is a web design knowledge and resources site. It’s another one of those fully loaded blogs that you can absorb information and inspiration from for hours. If you need a break from Smashing Magazine, check out Web Design Ledger.

COLOURlovers

Colour is so important, and COLOURlovers have got it covered. It’s basically a social media colour palette sharing site. Users share their colours, palettes, patterns and trends with the COLOURlovers community. The site is a great first step in the early design phase. They also oddly spell Colour correctly and incorrectly throughout the site.

Nettuts +

This is another one of those massive resource sites out there that offers free content and premium content. Nettuts + is only part of their huge tutorial network. If you need information on a topic or just want to get exposed to new techniques and ideas than this is the place to go.

A List Apart

This list would not be complete without A List Apart. I my opinion this site is the de facto authority on best web practices and techniques. Many of the well known techniques used today originated on A List Apart. Although they don’t post near as much as some of the other sites listed here, the content is almost always top notch. The topics cover code, content, culture, design, process and user science. A lot of well known industry leaders and thinkers have written for A List Apart.

Did I miss something?

If you think there is some awesome super duper resource that is missing from this list including your own site, please don’t hesitate to post it below in the comments.