Note: Part 1 of this series is available here, and you can read part 2 here. I’d recommend reading both of those articles before continuing on to this one.

The previous article in this series explained how to take CSS- and XHTML-based advertisement we’d developed and animate it using the jQuery JavaScript library. Today, we’re going to expand our jQuery a bit to make our ad a little bit more user-friendly (if an ad can ever be said to be user-friendly, that is).

We’re going to expand our functionality in two important ways. First, we’ll give the popout a memory: when the user closes the ad, it will remain closed for a predetermined number of days, unless they choose to open it again. And second, we’ll allow the user to open and close the ad by clicking the permanent sidebar cap. And before I get started, I’d like to point out that these two examples are really expandable to countless practical uses — don’t feel limited just because I’m talking about a popout here!

Remembering the User

The only practical way to remember whether the user has opened or closed our ad across multiple visits is by using a browser cookie. I’ve written about setting browser cookies here before, and I’ll be honest – it’s a tedious process writing the code to make the magic happen. However, because we’re already using the jQuery framework, our job is about to get a heck of a lot easier.

jQuery does not come with built-in cookie-setting functionality, which is a rather large shortcoming in my opinion. Luckily, jQuery has a rather active community behind it, and a nice man by the name of Klaus Hartl has released a jQuery cookie plugin. All we need to do is include the link to the plugin in the head of our document, underneath our call to the jQuery library, like so:

<script language="javascript" src="/js/jquery/jquery.js"></script>
<script language="javascript" src="/js/jquery/jquery.cookie.js"></script>

And voila! Cookies have suddenly gotten a whole lot easier. You’ll see just how easy in a moment.

So how are we going to use these cookies? Well, what makes the most sense to me (and you’re welcome to suggest alternatives) is this: whenever the user closes the ad box, we’ll set a cookie indicating this. If the user opens the ad box again, we’ll delete the cookie. When we load the page, we’ll simply check to see if our cookie is set: if not, we’ll open the ad; if so, we’ll leave the ad closed.

First up, let’s give our cookie a name. For consistency’s sake, I’m going to define the name at the top of my $(document).ready function, along with the other variables:

var popOut = "#popout";
var adBox = "#adbox";
var adWidth = $(adBox).width() + $("#cap").width();
var adCookie = "ad-example";

In this example, I’m calling my cookie “ad-example,” but you could really name it whatever you wanted.

Next, we’ll have to edit our openAd and closeAd functions that we developed in the last article to accommodate the setting and un-setting of cookies. Our openAd function now looks like this:

function openAd() {
	$(popOut).width(adWidth+"px");
	$(adBox).animate({marginLeft: "0"},1200)
	$.cookie(adCookie, null);
}

You’ll note the new line at the bottom. What we’re doing here is calling the cookie function that is included in the plugin we’re using. After the user opens the ad, we look for any cookies named whatever we selected at the top of the document. If one exists, we set it to “null,” effectively destroying it.

Next up, we have the closeAd function:

function closeAd() {
	$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
		function(){ $(popOut).width($("#cap").width() + "px"); }
	);
	$.cookie(adCookie,'closed',{expires: 28});
}

Again, we’re only adding a single line to our code. You can see how easy this is compared to writing your own JavaScript cookie function! This time, after the ad has successfully closed, we’re setting a cookie. We’re giving it a name of whatever we determined at the top of the function (”ad-example,” in our case), giving it a value of “closed,” and setting the cookie to expire in 28 days (four weeks). You could choose whatever duration you felt appropriate here.

And finally, we’ll want to alter the last line in our $(document).ready function, the one that opens the ad when the page loads. The line that opens the ad will now read like this:

if(!$.cookie(adCookie)) {
	$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);
}

All we’ve done is wrap our animation function in an if statement. If the cookie does not exist (the exclamation point at the beginning of our if statement means “if the following is not true…”), we will execute the animation we built last time. But if there is a cookie set (meaning the user has chosen to close the ad), we don’t animate our ad — meaning it remains hidden off the edge of our page by our CSS.

Developing Click Logic

Next up, we want to alter the click logic on the ad cap — if the ad is closed, a click should open it. But if it’s already open, the ad should close when the user clicks. This increases the odds the user will be able to get rid of the ad when they wish, which is an important usability feature in my mind.

To do this, we’ll need to edit the click function set on our cap. But how do we know if the ad should be opened or closed? Easy: we just set a cookie that will give us the answer we need. If the user clicks on the cap and a cookie is already set, that means the ad is currently closed, so we should open it back up. Otherwise, if no cookie is set, that means our ad is already open. A click at that point should close our ad instead.

Because we went to the trouble of developing functions to open and close our ad, our code change is pretty simple. We just edit the cap’s click functionality like so:

$("#open").click(function() {
	if(!$.cookie(adCookie)) {
		closeAd();
	} else {
		openAd();
	}
	return false;
});

All it takes is a simple if-else statement. If the cookie isn’t set, close the ad. Otherwise, open the ad like we would have originally.

And with those changes, we have now developed a popout box that is simultaneously eye-catching and user-friendly. Here’s the JavaScript in its entirety:

$(document).ready(function() {
	var popOut = "#popout";
	var adBox = "#adbox";
	var adWidth = $(adBox).width() + $("#cap").width();
	var adCookie = "ad-example";

	function openAd() {
		$(popOut).width(adWidth+"px");
		$(adBox).animate({marginLeft: "0"},1200)
		$.cookie(adCookie, null);
	}

	function closeAd() {
		$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
			function(){ $(popOut).width($("#cap").width() + "px"); }
		);
		$.cookie(adCookie,'closed',{expires: 28});
	}

	$("#open").click(function() {
		if(!$.cookie(adCookie)) {
			closeAd();
		} else {
			openAd();
		}
		return false;
	});
	$("#close").click(function() {
		closeAd();
		return false;
	});	

	if(!$.cookie(adCookie)) {
		$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);
	}
});

And you can see a working example of our ad here. If you have any questions, comments, or concerns, please leave a comment and I will do my best to address them.

Note: Part 1 of this series is available here. Be sure to read it first, or what comes here won’t make a lot of sense. :)

Part 2 of our series is going to build on what we accomplished last week. Namely, we’re going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We’ll be using jQuery for most of what we do, so you’ll need to include the jQuery library script at the top of your document for this to work (see the source of the example page to see how this is done).

Before we get started on our JavaScript, however, we’ll need to make one tiny addendum to our CSS from last week:

#popout #adbox {
	margin-left: -300px;
}

This bit of CSS moves our ad box (the bit we hope to animate) 300 pixels to the left of where it sits normally. And because our ad is 300 pixels wide (convenient, no?) this effectively hides the ad off the side of the screen. This way, our ad is hidden by default, and we can use jQuery to slide it back onto the screen.

Now let’s get started with the jQuery. We’ll wrap everything we write today in a “document ready” function, which looks like this:

$(document).ready(function() {
});

This prevents everything we put inside from firing until the document has finished loading, which is a good thing for us: we don’t want our ad to start moving until it’s all loaded!

Set Some Variables

We’ll start by defining a few variables that we’ll use throughout the script:

var popOut = "#popout";
var adBox = "#adbox";
var adWidth = $(adBox).width() + $("#cap").width();

The first variable, popOut, contains the CSS ID of the overall popout container that we built last week. popOut contains the ad and the ad’s cap both. The second variable (adBox) is the ID of just the animated bit of the ad. And finally, adWidth is a custom-built variable which gives us the total width of the area our ad takes up (the width of the ad plus the width of the cap). This variable will come in handy when we start animating our ad, to let us know how much space we have to work with.

The Animation Functions

Now that we’ve defined our primary variables, let’s delve into the actual animation of the ad. I’ve broken both parts of our animations (sliding in to the page and sliding back out again) into two functions. The opening function looks like this:

function openAd() {
	$(popOut).width(adWidth+"px");
	$(adBox).animate({marginLeft: "0"},1200);
}

This tiny little function is doing a surprising amount of work (which is really the power of jQuery). The first line simply sets the width of the popout container to be the width of the ad plus the cap – making sure we have enough room to do our animation. This may seem redundant, but it’ll make more sense later.

The second line of our function is the real workhorse. Here, we’re using jQuery to build a custom animation, which we’re attaching to our adBox variable. We’re telling jQuery to set a left margin of zero on the adBox (to move it back to its “real” position, in other words). But instead of doing it all at once, we’re telling jQuery to slowly make the change over the course of 1200 milliseconds (or 1.2 seconds, if you prefer). Pretty powerful stuff for a single line of code, no?

And now that we’ve built the function to open our ad, we can build the function to close it back up again:

function closeAd() {
	$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
		function(){ $(popOut).width($(".cap").width() + "px"); }
	);
}

This function is obviously a little more complicated, although it wouldn’t have to be if it weren’t for a but in Internet Explorer 6.

The first bit looks somewhat familiar, I hope. We’re setting another animation here, this time setting the left margin of the ad to be the negative of the width of the ad space, effectively hiding it off the side of the screen. And we’re doing it over the same 1.2 seconds as our last animation (though you can tweak these numbers to your heart’s content).

After that, things get a little more complicated. The next bit, “linear,” simply tells the animation function to maintain the same speed throughout the animation – not to slow down at the beginning or end.

And when the animation is finished, we’re firing off yet another function. This function sets the width of the popout area to be only as wide as the cap, since that’s the only part of the ad that is visible (hence why we have to set a width at the beginning of our openAd function).

This is because of a bug in Internet Explorer 6 that prevents the user from “clicking through” an empty div. What that means is, if the user tried to close your ad and then click on anything that had been previously hidden by the ad – a link in your sidebar, for example – they wouldn’t be able to click. Even though the ad is gone, IE6 would assume you were reserving the space for some greater purpose. So to get around this, we grow and shrink the popout space as necessary.

Create Click Events

Now that we’ve created our animation functions, we can attach them quickly and easily to the anchors we built last week for such a purpose. As you’ll recall, we included a “close” button in the corner of the ad – clicking this should obviously close the ad. And if someone ever wanted to see the ad again (we should be so lucky!), clicking the cap will bring it right back out.

$("#open").click(function() {
	openAd();
	return false;
});
$("#close").click(function() {
	closeAd();
	return false;
});

These functions are fairly simple: We’re simply using jQuery to assign an onClick event to our cap (with a CSS ID of “open”) and our close button (which we called “#close” last week). When the user clicks on either of those elements, the function inside (openAd and closeAd, respectively) will trigger. After that, we’ve included a “return false,” which simply tells the browser not to bother following the href in our anchors (it was blank anyway, but we don’t want the page refresh that would go along with an attempt).

And now, one last line of jQuery magic. When we open our page, we want our ad to pop out of the side of the page, catching the user’s eye and drawing their attention to our box’s content. To do that, we use this line:

$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);

jQuery is very powerful, but one thing it lacks is a simple “delay” function. And here’s the problem: I don’t want my ad to start animating the very instant that my document becomes “ready.” For one, I’d like the reader to be able to orient themselves on the page. For another, just because the document is ready (i.e., our code has downloaded) doesn’t mean that all of my images have finished downloading. And an animated ad without any images is far less impressive than the image-rich variety.

Luckily, I found a solution on a blog titled “Panagiotis Karageorgakis,” and modified it to fit my needs. The basic concept is this: we animate the ad in some way that makes absolutely no change whatsoever on the screen, and then we chain on a second animation when we’re done.

So here, our animation, which will fire on load, tells jQuery to slowly set the opacity of our ad to “1.0” (opaque) over the course of 1.5 seconds. Of course, our ad was already fully opaque, so this has no effect at all. And then after the first “animation” is completed, we fire off another function: namely, our openAd function, which will do all the heavy lifting involved in actually opening our ad.

And that’s all there is to it! We now have a fully functioning popout ad. You can see it in action here. And here’s the completed JavaScript, so you don’t have to hunt it down:

$(document).ready(function() {
	var popOut = "#popout";
	var adBox = "#adbox";
	var adWidth = $(adBox).width() + $(".cap").width();

	function openAd() {
		$(popOut).width(adWidth+"px");
		$(adBox).animate({marginLeft: "0"},1200);
	}

	function closeAd() {
		$(adBox).animate({marginLeft: "-"+adWidth+"px"},1200,"linear",
			function(){ $(popOut).width($(".cap").width() + "px"); }
		);
	}

	$("#open").click(function() {
		openAd();
		return false;
	});
	$("#close").click(function() {
		closeAd();
		return false;
	});	

	$(popOut).animate({opacity: 1.0}, 1500, "linear", openAd);
});

Of course, that isn’t to say we couldn’t make our ad a little fancier than it is. Next week, we’ll go over some ways to make the ad even more advanced – like remembering whether the ad should be open or closed, or letting the user open and close the ad by clicking on the cap. Stay tuned!

Note: Part 3 of this series is available here. And if you missed it, here’s part 1.

Advertisements on the web: love them or hate them, it’s safe to say they’re here to stay for a good long while. But advertising is a tough line to walk for a lot of websites (such as this one). Make your ads too annoying, and you’ll lose readership. But make them too unobtrusive, and you might as well not even have them at all. So where’s the balance?

Today I’d like to start an article series of three parts, the result of which will be a popout-style, jQuery-based box like the one pictured above, which I think strikes a nice balance on the obtrusion-scale. A friend of mine and I first developed this box to contain advertisements, but it’s a pretty versatile little technique: we’ve also used it to hold signup forms, and it could be expanded to other uses fairly easily.

If you’d like to see this popout ad in action, click here.

So what’s the benefit of this little popout box? First of all, it’s pretty simple to set up. In today’s article, I’ll cover the XHTML and CSS necessary to build this popout box, and you’ll see that it doesn’t take as much code as you might expect.

Second, it’s an eye-catching, yet not entirely annoying, technique. The ad opens after the page loads, which tends to draw the reader’s eye that direction. But if the ad isn’t for them, they can just click the close button and move it out of the way. Part 2 of this series will cover the jQuery used to make the ad function as prescribed.

Third, the technique easy to customize for your specific needs. In part 3 of this series, I’ll cover adding cookie support (to remember whether the ad should be open or closed) using a great jQuery plugin, generalizing your CSS to support both left- and right-aligned boxes with just one stylesheet, and even supporting multiple ads on the same page, should you decide to push the envelope.

Intrigued? Great! Let’s dive in to part 1.

The Images Required

Depending on how you’re using the box, you’ll need some images. For mine, I’m using two images. The first image functions as the ad “cap,” which is permanently affixed to the side of the page. Clicking this image will, once we’ve added our jQuery, cause the ad itself to open and close.

The second image is simply for the advertisement itself. Depending on your ad source and type, this image may or may not be necessary. If you’d like to follow along at home, you can download the image files I’m using here (Photoshop files and GIF/PNG images included).

Writing the XHTML

The XHTML is fairly simple, only requiring a few divs, images, and anchors:

<div id="popout">
	<div id="cap">
		<a href="#" id="open">
			<img src="images/cap.gif" width="20" height="350" alt="Open the Ad." />
		</a>
	</div>
	<div id="adbox">
		<a href="#" id="close" title="Close this ad.">
			<span>Close</span>
		</a>
		<a href="#" id="ad">
			<img src="images/ad.png" width="300" height="330" alt="" />
		</a>
	</div>
</div>

The main div, “popout,” acts as a wrapper for the whole shebang. It contains all the other elements, and comes in handy when writing our jQuery and our CSS.

Next up comes the “cap” div. Technically, this div isn’t even 100% necessary — you could just as easily attach your CSS and jQuery scripts to the anchor tag it contains. But I find it’s useful to think of the cap as a wholly distinct unit from the advertisement, so I’ve put it in a separate div to help me think of it as such.

Inside the cap div is an anchor, “open,” which in turn contains the image of our cap. The anchor tag serves a critical role: it’s what we use in our jQuery later on to trigger the opening and closing of the ad.

After the cap comes the “adbox” div, which contains the real guts of our popout ad. First up is the “close” anchor, which functions as a close box. As you can see from the image above, I’ve built a close box into my ad itself: if you preferred, you could make the close button a standalone image and absolutely position it over your ad… but for the sake of simplicity in this tutorial, I’ve chosen not to here.

And finally, we have the “ad” anchor, which contains the advertisement itself. I can get away with just an anchor and an image because I’ve developed this ad myself, and am hosting it locally. If you were using a different ad type, such as one that were pulled in dynamically using JavaScript or the like, you’d put that code here instead (probably wrapped in a div to keep it contained).

And that’s all the XHTML you’ll need! So let’s move on to the CSS.

Adding the CSS

The first thing we need to do is establish our containing popout div on the page:

#popout {
	margin: 0;
	padding: 0;
	width: 320px;
	height: 350px;
	position: absolute;
	top: 200px;
	left: 0;
	z-index: 100;
	overflow: hidden; }

The first couple of rules simply nullify any margins or padding that might be hanging around in other places in your CSS: the last thing we need is a rogue rule crimping our style. If you’re sure none exist, you can eliminate those lines.

Our width and height rules are pretty simple: they state the height of the ad (which in our case is actually the height of the cap, as our ad is slightly shorter) and the maximum width the ad will take up (when the ad is closed, it takes up much less space).

Next up, we’re positioning the ad on the page. These rules are useful for two reasons. First, it allows us to position the ad wherever we want on the page. I’ve chosen to start the ad 200 pixels down on the left hand side, but you can really place it wherever you want. Second, positioning the popout wrapper allows us to absolutely position elements within that wrapper, which will come in handy shortly.

We finish up with two less common rules: z-index and overflow. The z-index is helping to ensure our ad is on top of any other content on your page: elements with a lower z-index (1 is the default) will show up below our wrapper. The overflow rule doesn’t do a lot for us initially, but is critical for our jQuery to do its magic. We’ll cover that in part 2.

With our popout wrapper in place, we can start styling its innards, starting with some general rules:

#popout a, #popout a img {
	text-decoration: none;
	border: 0;
	outline: 0; }
#popout a span {
	display: none; }

The first set of rules ensures that none of our anchors or images have any borders, outlines, or underlines from our anchors and the images they contain. Normally you wouldn’t want to eliminate any sign that something had been or could be clicked, but because this is an advertisement we’re building, I think we’re allowed to bend the rules of usability for the sake of aesthetics. If you disagree, feel free to remove that rule.

Next up, we’re setting a general rule that comes in handy for me: any span within anchor tags will be magically disappeared. In our example, this only pertains to the “Close” text inside its corresponding anchor, but in theory you could have more text in your popout wrapper that you’d want to hide. For example, when building these ads I often load the cap image as a background image and have text inside of the anchor.

With the generalities out of the way, let’s start in on specifics, starting with the cap:

#popout #cap {
	width: 20px;
	height: 350px;
	position: relative;
	left: 0;
	z-index: 102; }

Pretty basic stuff, huh? We’re setting a width and height first, which just ensures our div doesn’t take up any more space than is necessary. Then, we relatively position the ad. This is mostly done so that we can specify a z-index. Our z-index here says that we want it to be even higher than the popout ad; and you’ll see why shortly.

Next up, we position our close button:

#popout a#close {
	position: absolute;
	top: 0;
	background: transparent url(transparent.gif);
	left: 240px;
	height: 20px;
	width: 60px; }

Here, we’re absolutely positioning the close button in the top-right corner of our popout wrapper div. If you’ll recall, the top-right corner is where I’d placed the close button in our image. This just ensures the close button is in the right spot, even though its contents were rendered invisible by that previous display:none rule. But you’ll notice that I’m using the “left” property to push our button right, instead of just positioning against the right-hand side with the “right” property. This is to take into account a bug in Opera that causes our close button to be positioned improperly when aligned along the right-hand side of our animated box (you can read all the juicy details in the comment thread of part 2 of this series)

I’m also specifying a height and width — be sure to adjust yours to the size of your close button. Technically you could use a percentage or em value for the width, but I’m using pixels to make the math involved in pushing it from the left easier.

I’ve also added a fix to the CSS above to take care of an Internet Explorer bug. IE shrinks the clickable area of an anchor tag to be the size of its content, even if we’ve specified a width and height that gives the anchor a different size. Because we are hiding the content of this anchor using a “display: none” rule, this means the anchor is effectively unclickable in Internet Explorer. However, IE does recognize the size of the link if it’s filled with a background image. Thus, by adding a transparent background image to our anchor (I’m using a 1×1 pixel transparent gif), the size and shape of the anchor is respected.

And finally, we’re ready to position our advertisement itself:

#popout #adbox {
	position: absolute;
	top: 10px;
	left: 20px;
	z-index: 101; }

Our position of absolute allows us to move the ad right into position: 10 pixels from the top of the popout wrapper (because my ad is 20 pixels shorter than the cap, this centers it nicely) and 20 pixels from the left (which happens to be the exact width of the cap). And finally, we’ve set a z-index of 101, which is 1 less that the z-index of our cap. This means that our cap is “above” our ad — when we use jQuery to animate the ad in part 2, this will come in handy, allowing us to slip the ad behind the cap.

And that brings us to the end of part 1. You can see the results of our efforts (without any jQuery magic) here. Stay tuned for parts 2 and 3, when things really start to get fun!

Note: Part 2 of this series is now available here. And when you’re ready, part 3 is available here.

It’s been a great, if absurdly busy, August for me, and I hope the same can be said for you. But all good things (including the month of August) must come to an end, and so to ends the CSSnewbie Subscriber Contest.

The contest has ended, and a winner has been selected by the true random integer generator at random.org. Each contestant was assigned a number based on the order in which I received their email (see — you’re more than an email address to me! You’re a number as well!), and a number was chosen randomly from that total.

The winner of the subscriber contest is Italy’s own Matteo Moro, who writes on CSSblog.it. Matteo will be receiving a copy of Eric Meyer’s CSS Pocket Reference as well as a website review here on CSSnewbie (date/type to be determined).

Thanks to all of you who entered CSSnewbie’s first-ever contest. I had a lot of fun reading the quips everyone tended to include in the emails they sent me — it made me check my contest inbox probably more than was necessary. The success of this contest suggests that I might hold another in the future… as soon as I come up with something new worth celebrating. August only comes around once a year, sadly.

If you have any feedback on this contest, or on any future contests I might hold, feel free to either email me or leave a comment on this article. I’d love to hear what you have to say.

To all those who didn’t win: thanks for playing, thanks even more for reading, and I hope you stick around! I have more great articles lined up for September, including my first multi-part tutorial, which will combine elements of XHTML, CSS and JavaScript to great effect. Stay tuned!

The display property is a bit of an unheralded workhorse in the CSS world. Even though the list of theoretical display property values is quite long, only three of them ever see any use (primarily due to poor browser support on the others): inline, block, and none.

The inline value allows you to define an element to behave as though it were an inline element (like a span or an anchor tag). Conversely, the block value lets you force block-level behavior (like a div or a paragraph). And “display: none” simply causes an element to not display at all.

But despite the display property’s seemingly limited use, you’d be surprised how many CSS techniques rely on this little workhorse to get the job done. Here are five CSS techniques I’ve written about in the past that wouldn’t exist without the help of the display property.

Showing/Hiding Content

One popular technique that relies on the display property is the Show/Hide Content technique (explained in much greater detail here), which uses CSS and JavaScript to show or hide additional content when the users clicks on a button. The ability to “hide” content on a page is a cornerstone of the modern web: too many options at once leaves a user feeling overwhelmed, but too few options can leave your audience feeling constrained. This technique allows you to get the best of both worlds.

Making Closeable DIVs

In-document message boxes can be quite useful when used for the powers of good — and not, say, to create annoying pop-in ads right in the middle of a page you’re trying to read. Luckily, whether used for good or evil, most all in-document popups come with a “close” option: and that close option is almost always the work of the “display: none” rule. Learn more about creating in-document message boxes here.

Creating RSS-Only Content

As I wrote about in a recent article, hiding content in your RSS feed doesn’t have to require a fancy plug-in — which is good for people who aren’t relying on a fancy content management system to generate their pages. Instead, producing RSS-only content can be as simple as hiding your content in your page with the display property — which is then ignored when picked up by RSS feed readers.

Building Dropdown Menus

Without the CSS display property, fancy dropdown menus would be limited to the realm of JavaScript. However, by combining CSS’s display property and the :hover pseudo-class, you can create beautiful dropdown menus without a single line of JavaScript. Want to learn how? Here’s a tutorial on creating easy CSS dropdown menus, and here’s a second tutorial on creating special horizontal dropdowns.

Fixing Bugs

If you work on web development long enough, sooner or later some browser is going to throw a bug your way (Internet Explorer 6, I’m looking at you). But just because there’s a bug in the browser doesn’t mean that the fix has to be complicated. In fact, two of the most common Internet Explorer bugs out there — the IE6 Whitespace Bug and the IE Double Margin Float Bug — both use the “display: inline” property to make IE behave properly. Click the bug names for more in-depth information.

So when you get right down to it, the display property is a pretty useful little guy, even if only three of its values are supported. Just imagine how prolific it’d be if all its values were available!

I spent a lot of time (7 long years) in academia, writing about technical communication and new media. During that time, I created many academic documents for the web. A lot of those documents had footnotes. Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way.

Today, I’m happy to announce that I’ve come up with a better solution to web footnotes using the jQuery JavaScript framework and a few tags and attributes that already exist in XHTML. And I’m even happier to show you how to do it! If you’d like to see it in action before we begin, go here.

The Problem:

• Many websites could benefit from having footnotes, but…

• Manually creating footnotes for web documents is a slow process.

The Requirements:

• Creating the footnotes should be as painless as possible (i.e., make use of as many standard tags/attributes as possible).
• Users should be able to create footnotes that are pure commentary, book citation, web reference, or any combination thereof.

The Solution:

I decided to make use of the two most common XHTML tags that might need footnote information: blockquotes and quotations (<q>). Both of those tags can take the “cite” attribute, whose value is the URL from which the quoted material originated.

<q cite="http://www.cssnewbie.com/">
	Rob Glazebrook of CSSnewbie is imminently quoatable.
</q>

That takes care of the URL portion of our requirements… but what about commentary-type asides or non-web citations? You can’t put those in the cite attribute, because the only acceptable value for that attribute is a URL, and any comments you put in will be rendered as such in the output (it’s ugly… trust me). So for comments and other reference material, let’s turn to the “title” attribute instead.

<q title="Done with your TPS reports?">
	Is this good for the company?
</q>

And if you’d like your footnote to look more like a standard-issue reference citation, you could even put markup inside your title.

<q title="Zeldman, Jeffrey. <em>Designing with
Web Standards</em> New Riders, 2003.">
	We build only to rebuild.
</q>

Admittedly, sticking XHTML markup in your title tag is pretty bad practice, so I can’t say that I 100% recommend this tactic… but I’ve tested it, and it works (at least in XHTML Transitional).

So now that we know what our XHTML looks like, let’s turn to the jQuery!

$(document).ready(function() {
	$("#wrap").append("<ol id=\"footnotes\"></ol>");
	footnote = 1;
	$("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("footnote");
	$(".footnote").each(function() {
		$(this).append("<sup>"+footnote+"</sup>");
		cite="<li>";
		url=$(this).attr("cite");
		title=$(this).attr("title");
		if(title && url) {
			cite+="<a href=\""+url+"\">"+title+"</a>";
		} else if(title) {
			cite+=title;
		} else if(url) {
			cite+="<a href=\""+url+"\">"+url+"</a>";
		}
		cite+="</li>";
		$("#footnotes").append(cite);
		footnote++;
	});
});

And now, so that everyone understands exactly what this script is doing, I’ll walk you through each section of code.

$(document).ready(function() {
});

This bit of jQuery is saying “wait until the document is fully loaded (“ready”), then run the following function. This prevents our script from running while the document is only half-loaded.

$("#wrap").append("<ol id=\"footnotes\"></ol>");
footnote = 1;

The first line finds my element with an ID of “wrap” (you could use whatever element you wanted, such as the body tag), and appends (adds something to the end of) an ordered list with an ID of “footnotes.” This is where our script will stick all of our footnotes. The second line is just setting a variable, “footnote,” to a value of 1. This is the number we want our footnotes to start on.

$("q[cite],q[title],blockquote[cite],
blockquote[title]").addClass("footnote");

This line is going through our entire document and finding every q and blockquote element with either a “cite” or “title” attribute set, and giving them all a class of “footnote.”

This is a workaround to a problem I uncovered while building the script. Originally, I was just cycling through the document, grabbing all q and blockquote elements and checking for their attributes later, using jQuery’s “each” function (which we’ll see in a moment). The problem is, if you specify more than one element in an “each” function, jQuery will build an array (good) of all of your first elements first, and your second elements second, and so on (bad, in our case). Which meant that when I went through and numbered my footnotes later in the script, all the <q> tags would get numbered, and then the script would start over at the top of the page and number all my <blockquote> tags. That resulted in all my footnotes being out of order. This fixes that problem.

$(".footnote").each(function() {
});

Here’s the “each” function I mentioned previously. This line goes through the document and finds every instance of an item with a “footnote” class (which we just dynamically applied to all the appropriate elements), and then executes the contained function on every element it finds. It’s a cheap and easy “foreach” loop, basically.

$(this).append("<sup>"+footnote+"</sup>");

The first thing we do in our main function is append a footnote number to the end of the element. We put the footnote in a “sup” (superscript) tag to make it look like a footnote tag by default. You could use a different element if you so chose, and then use CSS to style it however you wish.

cite="<li>";
url=$(this).attr("cite");
title=$(this).attr("title");

I’m setting three variables here. The first, “cite,” is the foundation for our footnote at the bottom of the page. Since I’m building my footnote list using an ordered list, every element within will be wrapped with <li> tags. Next, I’m creating a variable called “url” which contains the “cite” attribute, and a variable called “title” which contains the “title” attribute. If the attribute exists on our particular quote, the variable will be set with that attribute’s contents. If the attribute isn’t set, the variable will be a Boolean “false.”

if(title && url) {
	cite+="<a href=\""+url+"\">"+title+"</a>";
} else if(title) {
	cite+=title;
} else if(url) {
	cite+="<a href=\""+url+"\">"+url+"</a>";
}

We have three “if” checks and three possible outcomes here. If both the “title” and “url” variables are set, we wrap the “title” content in an anchor tag with an href of the “url” content, and add it to the end of our “cite” variable. If just the title is set, we just output the title. And if just the url variable is set, we output the url, wrapped in an anchor tag so it’s active.

cite+="</li>";
$("#footnotes").append(cite);
footnote++;

Now we just need to wrap up our script. First, we close the list item in our cite variable, now that the rest of its content has been filled. Then we append the contents of our cite variable to the end of the “footnotes” ordered list that we created at the beginning of our script. And last but not least, we increase the number of our footnote by one, so that the next footnote will be one larger than the last.

That’s all there is to it! You can see this script in action here. Be sure to view the source code so you can see that there is no footnote list in the code… it’s being automatically generated by our script. And of course, you’ll need to include the jQuery framework at the top of your document before you can run this script (view the source on the example page for a demonstration on how to do that). And you could style your footnotes any way you please: my example page contains some rudimentary styles you can feel free to borrow.

This script could probably be made more advanced fairly easily, and I might write another article in the future on expanding this script for added functionality. If you have any suggestions on other things you’d like to see this script do, don’t hesitate to share them in the comments! I’d also love to hear if you’re planning to use this script anywhere, if you know of a better way to write my jQuery (I’m new to the framework, so it’s possible), or anything else of that nature.

Ultimate Collection of Free Textures on the Web | Beeex.net

While it might be a bit premature to call this the “ultimate” collection of textures, patterns, and backgrounds on the web — after all, I could just swipe this list, add one more resource, and call it the “ultimate plus infinity” resource — Beeex.net has nonetheless compiled a rather large and useful collection of backgrounds from around the web. Whether you’re looking for repeating patterns, large images, unique textures, or pattern generators, this is a great place to start your search.

Label Placement on Forms - CSS-Tricks

Chris Coyier of CSS-Tricks posted an interesting discussion on form labels this week (and yes, that means I’m implying that discussions of form labels can in fact be interesting). The question he poses is this: does it make more sense to have a form’s labels top aligned, left aligned, or right aligned? While he doesn’t come to any clear-cut conclusions (no truly heady discussion ever does, after all), he does offer some pros and cons for each version… thus allowing you, the reader/designer, to choose the best solution for your design’s individual needs.

PayPal donation form with CSS and jQuery for WordPress : i.Farang

If you’ve ever considered accepting donations on your site (and if people are wanting to give you money, who are you to judge?), this is a good place to start looking. Pete of i.Farang has posted a fairly complete tutorial for how he developed his site’s custom Paypal donation form using a modified form from Paypal, a healthy dose of jQuery, and a bit of CSS. He even mentions how to incorporate the form into a Wordpress template, should you be so inclined (but Wordpress isn’t required to get the form to work).

A List Apart: The Survey, 2008

Last year, A List Apart decided to survey their web designer/developer/whatever readers in order to learn more about what they did, where they worked, and how they liked it. In the end, nearly 33,000 web-related professionals took the survey, giving our community its first real glimpse of a large-scale analysis of our own population. The results were so enlightening that ALA has decided to take another survey this year (and hopefully every year hereafter), allowing us to track our profession’s development over the course of time. I’ve already taken the survey, and if your job involves the web in any real capacity, I would strongly encourage you to take it as well.

The realm of CSS is a realm of boxes. Everything on the page is a box, within a box, within a box. No wonder it’s so common for beginning CSS developers (or, in my case, poor graphic designers with too much CSS experience) to create boxy layouts!

However, the forthcoming CSS3 specification offers us a glimmer of hope in the form of rounded corners. That’s right — once CSS3 is commonly supported, we’ll be able to childproof all those pointy edges and beautify the web in the process.

And better yet, a few browsers already support rounded corners! As I’m writing this, you’re pretty much limited to Mozilla/Firefox and Safari 3. However, this list is bound to grow as time goes on, so it couldn’t hurt to start playing around with this feature. Especially considering that, in the browsers that don’t support rounded corners, nothing bad happens — the user just sees regular, square corners.

For now, to get the code to work, you’re stuck using proprietary CSS tags: they won’t validate, but they’ll just be ignored by browsers that don’t support them. The code itself is pretty simple; for example, to create a div with nice rounded corners with a radius of 5 pixels, you’d just write something like this:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

And this rule will create a div that looks like this:

The two properties of note here are “-moz-border-radius” and “-webkit-border-radius.” The former is how to specify the radius — number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner (see the image below) — in Mozilla-based browsers. The latter is doing the same thing, but for Safari.

The rule isn’t just limited to curving background colors, either. If you were to add a border to the element, the border would become rounded, as well. For example, a block quote could be styled like so:

blockquote {
	margin: 1em 20px;
	padding: 10px;
	border: 2px solid #555;
	background-color: #f2f2f2;
	color: #555;
	font-size: 140%;
	text-align: justify;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; }

Resulting in a block quote that has a lot of style, without relying on images to accomplish the task:

And finally, you’re also not limited to either all rounded corners or none. Using this property, you can specify which corners you want rounded in your CSS. However, it’s important to note that the Firefox-based version of this rule has deviated a bit from the W3C standard, meaning it’s written slightly differently than the Safari-based rule. For example, consider these two rules used to round out the top-left corner of a box:

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

It’s a minor difference, in the grand scheme of things, but pretty critical if you want your rounded corners to show up where and how they should! Using the ability to round individual corners, you could generate fancy alert messages:

.alert {
	border: 2px solid #fc0;
	padding: 8px 10px;
	font-size: 120%;
	color: #c90;
	font-weight: bold;
	background-color: #ff9;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px; }

Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:

.comment {
	border: 1px solid #999;
	background-color: #d8d8f4;
	margin: 1em 40px;
	padding: 15px;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;
	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px; }

You can see all of my examples in action here. And these are just a few ways of the hundreds of ways you can harness the power of rounded corners with just a few lines of code. With techniques like this at our disposal, it’s easy to see why we’re all so eagerly awaiting CSS3!

The month of August holds a lot of special significance to me. My birthday is in August (is, in fact, this Wednesday). I work for a great company that features the word “August” in its masthead. The month itself was named after Caesar Augustus, arguably a cool cat in an old-school sort of way. And the word “august” as an adjective means something majestic or awe-inspiring. Neat, huh?

So to celebrate all that is August and Awesome, I’ve decided to hold the first-ever CSSnewbie Contest! The winner will receive:

1. A review of your website on CSSnewbie. If you’re new to web development, I can offer suggestions on how to improve/update the site. If you’re already an established web guru, I can promote the splendor that is your site and hopefully send a bit of traffic your way. If you don’t want to promote your site, I’d also be willing to do a private review for your eyes only.
2. Eric Meyer’s book, CSS Pocket Reference: Visual Presentation for the Web. This handy-dandy 168-page book is chock full of great CSS information presented in cheat sheet format.

How It Works:

You subscribe to the CSSnewbie RSS feed using either the links in the sidebar or at the bottom of this (and every) post. If you’re already a subscriber, congratulations! You don’t have to do anything else except remain the subscriber you are.

Watch for a pass-phrase to appear at the bottom of an article in the RSS feed. Remember that “hiding content in your RSS feed” article last week? Here’s where that comes into play. The pass-phrase won’t be present in every article, but it’ll be there often enough that you’ll be able to find it if you’re looking for it.

Once you’ve found the pass-phrase, shoot an email to contest@cssnewbie.com. The subject line should be the pass-phrase and nothing else. The body of the message should contain a link to the website you’d like to have reviewed/promoted, and can also contain any other comments you’d like to include. Email me before the contest ends at the end of the day (11:59PM Central Time) on August 31, 2008.

On September 1, 2008 (or thereabouts — I reserve the right to extend the contest by a week or so if it looks like a lot of people are pouring in at the last minute) I’ll randomly (programmatically) select a winner from the list of emails. They will be notified by email, and an announcement will go up on the site. If the winner doesn’t respond within a week of the announcement, I’ll pick a new winner. And so on.

This proposition is really win-win for all involved, I think. If you subscribe to CSSnewbie, I’ll obviously benefit from the additional readership. And if you win, you’ll benefit from that same influx by boosting the number of people who will see your website (and you’ll get a great CSS book to boot!). And hopefully everyone else who subscribes will at least benefit from the articles that get posted here on CSSnewbie.

So click that subscribe button, spread the word about the contest, and let’s see if we can’t make August the best month ever!

Unit Interactive :: Labs :: Unit PNG Fix

PNGs (Portable Network Graphics) are one of the coolest things to happen to the web in the last decade. Unfortunately due to terrible PNG support in Internet Explorer 6 (which is arguably one of the least cool things to happen to the web in the last decade), PNGs have never really caught on. However, as IE6 usage starts to drop and PNG support in all major modern browsers, PNGs are set to make a comeback. But what about poor, old IE6? Well, that’s what fixes are for. And Unit Interactive had released a new PNG fixer-upper script for IE6 that is lightweight and does most all of what you’d want a PNG fixer-upper script to do.

200+ Resources for Freelance Web Designers | DesignM.ag

The folks over at DesignM.ag (whose site I’d never seen, but will definitely be visiting again!) have compiled a fantastic list of over 200 resources for the freelancing folk in the web design/development community. They’ve broken their compilation into two parts: business resources and design/development resources. The business resources are all about helping you (the presumed freelancer) work better and faster: they cover everything from finding freelance jobs, to invoicing your clients, to managing your time and projects. The design resources, on the other hand, are a great resource for finding new sites to bookmark: they have stock photography sites, layout generators, SEO tools, and more.

Removing The Dotted Outline – CSS-Tricks

If you’re a regular Firefox user (and with the great rendering and better plugins, why wouldn’t you be?), you’ve probably noticed a certain bit of “usability” that more often than not just looks pretty darn annoying: the dotted outline Firefox puts around links or images when you click them. The outline is meant to act as a visual cue, letting you know which of the possibly closely associated links just received your ministrations. However, the effect more often than not simply clashes with the site’s overall design. Luckily there’s an easy fix, and Chris over at CSS-Tricks has written an article on removing that annoying little line. And better still, he offers solutions for adding some sort of visual “click” indicator back to the anchor, thus preserving usability, but not at the expense of beauty.

NETTUTS – Submit a Form Without Page Refresh using jQuery

This tutorial had an awful lot to offer me. jQuery is, in my humble opinion, the coolest JavaScript framework out there to date. But clunky form redirection, on the other hand, is one of the (admittedly copious) banes of my existence. So this tutorial rocks, in that it’s using a technology I love (and plan to start writing more about here) to eliminate a problem I despise. And if you’ve ever wanted a surprisingly simple way to validate and process form inputs without having to refresh the page, I wager you’ll like this tutorial just as much as I did.