Using JavaScript to Style Active Navigation Elements

I’m all about efficiency when I’m writing web code. Any time I find myself writing the same functionality more than once or twice, I try to consider whether my repeated code could be wrapped into a function of some sort.

Navigation is often one of those areas where I try to improve my efficiency. I like my navigation elements to pull double duty. I want them to:

1. Show the user where they can go, and
2. Show the user where they currently are.

In other words, I want some sort of visual indication in my navigation that shows my user which section of my site they’re in. You can see this on the CSS Newbie site: if you click on the TOC (Table of Contents) link in the bar at the top of the page, you’ll see that link gets special styling when the table of content loads.

Now, I could manually set this on every page using a CSS class. But that’s inefficient — depending on the size of my site, I could end up writing dozens or hundreds of lines of one-off code. And why go to all that work, when you could just wrap it all up into a nice JavaScript function?

First, I’ll explain the logic behind my functions — because they won’t work equally well for every site. Then I’ll walk you through a few examples of the code that makes it all happen.

The Logic

All of my functions assume a very clean, straightforward directory structure. For example, if you have an About section, a Blog section, and a Contact section on your site, a logical directory structure might be:

/
/about/
/blog/
/contact/

And if you had several blog entries inside your blog directory, your structure might grow like this:

/
/about/
/blog/
/blog/post-one/
/blog/post-two/
/blog/post-three/
/contact/

And therefore, a function could logically assume that anything inside the blog directory should be considered a part of the blog section of your site, and mark the blog link as active for those pages. This makes our job a lot easier. And luckily, most CMS platforms make this sort of directory structure pretty easy to create.

The functions also assume that you have either a fairly shallow directory structure, or that you’re not linking to too many similarly nested directories. What I mean by this is, if you have this sort of a structure:

/
/contact/
/contact/me/
/contact/me/here/

And you wanted to link to both /contact/ and /contact/me/here/ in your navigation bar, you might run into problems distinguishing between the two. There are ways to increase precision, but they come at the cost of flexibility.

But enough of that. Let’s get to the good stuff!

A JavaScript Solution

I’ve written about this method before, when I previously talked about building intelligent navigation bars. This technique is nice because it doesn’t rely on any JS frameworks, so you can add it to older sites without needing jQuery or the like. The basic function looks like this:

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}

This function looks for an element with an id of “nav” (presumably your navigation bar), then looks at each of the anchor tags inside it. It then compares the anchor tag’s href tag with the page’s URL. If the href tag is contained within the URL anywhere, it gives that link a class of “active,” which I can then style specially in my CSS.

As an example of what I mean by all that, if I had an anchor tag in my navigation bar that linked to “/blog/” and the page I was on was “/blog/this-is-a-post.html”, my blog link would be styled as active, because “/blog/” is contained within “/blog/this-is-a-post.html”.

As a final note, you wouldn’t want to call this function until the page was finished loading: if you call it too soon, your links won’t exist yet! So you can either call it at the very end of your document, or dynamically call it when your page is done loading, with something like this:

window.onload = setActive;

A jQuery Solution

If you are already loading a framework like jQuery (like I do on almost every site I work on these days), this sort of functionality could be written even more succinctly. And like I said earlier, I’m a sucker for efficiency. Here’s a jQuery solution that does essentially the same thing in a much smaller space:

$(document).ready(function() {
	$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

This function is making use of both native JavaScript and jQuery tricks to reach a whole new level of brevity. First, the whole thing is wrapped in a “document ready” function, which means it won’t fire until the page is loaded and our links are in place. Next, we’re looking for anchor tags inside our “nav” ID. And really, we’re looking for a very specific anchor tag: one whose href starts with (^=) a slash, followed by a part of our page’s location (location.pathname). Specifically, we’re looking for the first directory in our page’s URL.

We’re doing this by making use of the JavaScript split() method, which lets us take any string (for example, “/blog/this-is-a-post.html”) and break it into an array based on a substring (in our case, the forward slash). If you’re familiar with PHP, it’s similar to the explode() function. In our example, we’d end up with a three-part array that looked like this:

["","blog","this-is-a-post.html"]

Which means that if we look at the second value of our array (arrays start counting at zero, so [1] is the second value), that should give our first-level directory (”blog”, in our example). This lets us match any subsequent child directories with our parent in the navigation bar.

Tweaking for Home Links

Our jQuery function works great in most scenarios, but it fails if you have a “home” link where you’re just pointing to the root directory, like this:

<a href="/">Home</a>

And because I tend to have a link like that, I needed a workaround. Here’s a way to get around that with just a little more code to account for our special case:

$(document).ready(function() {
	if(location.pathname != "/") {
		$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
	} else $('#nav a:eq(0)').addClass('active');
});

Here, we’re checking to see if we’re in the root directory. If so, we’re skipping the loop through our anchor tags and just making a specific anchor tag active. In this case, I’m giving the active class to the first anchor in our list (which is the most common location for a home link).

And that’s that. If you know of even more efficient or fool-proof ways to accomplish this task, I’d love to hear about them in the comments section. Or if you’re skilled in a framework other than jQuery, feel free to share the equivalent code!

Note: I apologize for the long gap between articles. I had some problems while rebuilding my PC (DOA motherboard) and was without my computer for several weeks.

Read More

Similar Posts

Three timeless navigation tips

It’s 2006, and we’re still talking about site navigation? Yes, we are; and apparently we need all the reminders we can get, since so few sites seem to get it right. (Including, I’m well aware, CSS Insider. Don’t hate; I didn’t design it.)

In his new A List Apart article (“Where Am I?”), Derek Powazek slaps us upside the head, again, with the cardinal rules of web site navigation. From any page on a site, a user should be able to easily answer these three questions:

1. Where am I?
2. Where can I go?
3. Where have I been?

So simple, and yet somehow, so elusive to many designers.

Derek provides visual examples of great site navigation. Put your site to the test! Do you know where you are, where you’ve been, and where you’re going?

Read | Permalink | Email this | Linking Blogs | Comments





Read More

A Simple jQuery Stylesheet Switcher



There are lots of reasons you might want to offer your users more than one CSS file for your website:

• You want to offer a “stylish” low-contrast and an easy-to-read high-contrast version of your site.
• You have many low-vision readers and want to give them easy access to a customized stylesheet with a larger typeface.
• Your site is schizophrenic and you want to be able to change the look quickly.

Whatever the reason, it’s amazingly easy to create a function that swaps between multiple stylesheets using jQuery.

The first step of course is to build several different CSS files, which we’ll then swap between. Once that is done, we can dive into the XHTML and jQuery that makes the magic happen.

The XHTML

First, we need to create a set of links that will allow the user to swap between CSS files. You can make this as simple or as fancy as you’d like. For the sake of brevity, my links are simple:

<ul id="nav">
	<li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
	<li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
	<li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

Here I have three links, each with a “rel” attribute indicating which CSS file the link will load. Technically, I could have just as easily put this information in the “href” attribute, but I didn’t want to for one specific reason: if the user has JavaScript disabled and the CSS file is listed in the href, then clicking the link will send the user to the CSS file directly (not loading it like we intended). But our way, if JS is disabled, the user gets nothing at all: which is certainly preferable to the less savory alternative.

The jQuery

Like I promised, the jQuery is really simple:

$(document).ready(function() {
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		return false;
	});
});

This function waits until the document is loaded (generally an important step when interacting with the DOM), then attaches a click function to each of our nav anchors. The function basically says, “when someone clicks on this link, replace the link (stylesheet) tag’s href attribute with the contents of this link’s rel attribute.” The “return false” at the end just stops the browser from trying to follow the link.

Of course, you might have to get more detailed if you have more than one link tag, for example, but that’s easily done by giving the link tag a class (”changeme,” for argument’s sake), and writing something like this:

$("link.changeme").attr("href",$(this).attr('rel'));

And while this stylesheet switcher is already complete, we might want to give it some memory: after all, your users might get annoyed if they have to switch their styles back to their preferences every time they visit your site. For that, we’ll need to set a cookie. And to make that easier, I’ll use the jQuery cookie plugin (which I’ve talked about previously when building a popout ad).

With the plugin loaded, we can modify our jQuery thusly:

$(document).ready(function() {
	if($.cookie("css")) {
		$("link").attr("href",$.cookie("css"));
	}
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});

Now we have two statements. The first one checks as soon as the page is done loading to see if a cookie called “css” has been set. If so, it sets the stylesheet to be the one indicated in that cookie. Otherwise, it does nothing.

Our click function is much the same, except after we set the stylesheet, we also set a cookie. This cookie doesn’t expire for an entire year (and each time the user changes their stylesheet preferences, it would reset this timer), giving them a good 365 of CSS bliss.

Fine Tuning

There is one minor annoyance with this stylesheet switcher: there’s generally a flash of the “default” CSS when the user loads the page. That’s because the script waits until the document is “ready” before switching the link’s href. There is a way around this: moving the first “if” statement outside of the document ready function, like so:

if($.cookie("css")) {
	$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});

Generally speaking, you don’t want to run any jQuery until your document is ready. However, so long as your jQuery comes after your link tag in your document structure, like shown below, this shouldn’t be a major concern:

<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script>... your jQuery goes here...</script>

This means your jQuery will run before the document is done loading, and thus your link tag’s href will be swapped before your CSS has been applied. As I said before, it’s generally a bad idea to manipulate the DOM before document ready, but because we know the exact tag we want to manipulate and can place our jQuery below it in the DOM, we should be safe in this one specific instance.

Here’s an example if you would like to see this technique in action.





Read More

Build Custom Frameworks Easily with CSS Classes



Generally speaking, I consider full-fledged CSS frameworks to be overkill on all but the most absolutely complex projects or, on the other end of the spectrum, rapid proof-of-concept prototyping. Most people only use a few of the classes that any one CSS framework provides, but then still require their users to download the entire, and largely unused, stylesheet.

However, I still think that the foundation on which CSS frameworks are built — the concept of using classes to simplify layout and standardize design across similar elements — is very much worth investigation. But instead of relying on a one-size-fits-all (snuggie-esque?) solution, I’d encourage you to take a few minutes and build a custom, simplified framework that does exactly what you need it to do.

The Back Story

I recently built a website based on a fairly regular, consistent grid. The content area was 780px wide and would contain six “columns” of content with 12-pixel gutters between each of the columns, though various elements could span one or more of those columns.



Because of the general flexibility of the content combined with the rigidity of the columnar structure, my mind immediately jumped to frameworks as a way to get this design pushed out in a hurry. But in the end, I just couldn’t justify all that overhead, even to create a flexible six-column design. So instead, I decided to write my own mini-framework to do only what I needed.

The Custom Framework

Here’s the basic CSS I ended up writing:

.col {
	float: left; }
.gutter {
	margin-right: 12px; }
.span1 {
	width: 120px; }
.span2 {
	width: 252px; }
.span3 {
	width: 384px; }
.span4 {
	width: 516px; }
.span5 {
	width: 648px; }
.span6 {
	width: 780px; }
.clear {
	clear: left; }

Pretty simple stuff, right? All it contains is nine classes that I can arbitrarily assign to my structural divs to determine how the page will lay out. The first class, “col”, gets assigned to any div I want to behave like a column.

Then each column is given one of the “span” classes (using the benefit of multiple CSS classes to great effect) to determine its width — or as I thought of it at the time, the number of columns the div would span… just like using “colspan” in old-school table layouts.

Next up we have the “gutter” class, which I add to any column that should have a gutter along its right edge (which would be true for all columns except those along the very right edge of my content area). And finally, there’s a “clear” class, just to ensure that my divs behave themselves even if I didn’t entirely fill up the previous “row” of divs.

The XHTML Structure

There’s not much to the XHMTL structure for my custom framework. Essentially, it’s a bunch of divs given two or more of my nine classes to determine its behavior. For example, to create the 4-2/2-1-3 structure I highlighted in the image above, this would be the structure:

<div class="col span4 gutter">Four columns</div>
<div class="col span2">Two columns here</div>
<div class="col span2 gutter">Two cols and a gutter</div>
<div class="col span1 gutter">Only 120px!</div>
<div class="col span3">Three columns.</div>

If you’d like to see this sort of custom framework in action, it’s running on the website for the Woodsmith Shop TV show.

One Size Doesn’t Fit All

Now, I’m not saying my framework is the end-all CSS framework and that you should just copy it wholesale into your own project and expect it to work perfectly. The idea here is to take this concept and come up with a custom framework that works perfectly for your needs.

The real take-away lesson here is that for most projects, you don’t need dozens of classes and hundreds of lines of CSS just to create a flexible grid structure. I created mine with just nine CSS classes and it was sufficient to power my six-column grid. I’d be interested to see what other people (namely, you) have come up with along these same lines. Share a link in the comments!





Read More

Don’t forget about :active

Every once in a while I remember some functionality of CSS that we have had access too for ages yet is rarely taken advantage of in creative ways. The last time I really wrote about this is when I had discovered a way to make other menu items change when you hovered on just one of them, as you can see here in the Advanced CSS Menu Trick article.

Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.

I was recently reading through “The Elements of User Experience
,” which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.

View the demo here

Most Web Designers Fail to Take Advantage of :active

In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.

We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn’t tell you. However the value of such a subtle detail can have large benefits  to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.

An Common Example

If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my “behavior observing” career seen a user who thinks they have click on a link, despite having missed it slightly.

What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn’t locked up.

This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle “clicking” noise as a link is clicked.

Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn’t be hard to give the user some feedback to let them know the link was successfully clicked on.

What We Can Do

By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don’t have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.

Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.

It Isn’t Perfect

Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn’t perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.

Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.

Consider Adopting it as a Regular Practice

I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.

View the demo here

Read More

SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily



Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.

Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.

SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”

The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.

What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.

It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.

In the README file:

SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.

The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.

It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!

Share

Read More

8 methods to bring your front end coding to rockstar levels

There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.

1. Improve Your Semantic Names

If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”

You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”

Read more about semantic naming from Andy Clarke and A List Apart.

2. Improve the Organization of Your Files

I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)

I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…

There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:

• Documents
• Client files
• Copy
• Proofs
• Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
• Downloads

The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.

3. Use Commenting in Your XHTML

Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.

To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.

     <div id="header" class="section">
          <div id="header-logo">
               <h1>HTMLiZER</h1>
          </div><!--/#header-logo-->
     </div><!--/#header-->

If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)

4. Segment Your CSS

For small 4 – 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.

I recommend splitting your css into logical different files for better organization, such as:

• reset.css
• main.css
• structure.css
• typography.css
• print.css
• helpers.css

This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.

5. Create a TOC With Comments in Your CSS

Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.

EX

/***********

TOC:

=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio

****************/

/* *********  =1: HEADER *********** */

#header { … }

6. Compress and Combine Your CSS files

Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.

Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.

There are several handy tools to do this including this online version.

7. Create your own framework (or improve on another one)

As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:

• More consistant rendering due to reusing ideal CSS techniques
• Easier editing and maintenance as you can better recall what names mean
• The start of code that can be saved and reused every time

Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:

• A class that floats an image left / right and gives it some margin
• The structure for an unordered list navigation
• The structure for a form
• external link, pdf and download icons
• clearfix
• png fix
• Typeography baselines and hierarchies
• etc…

Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.

8. Develop your CSS to be modular or “object oriented”

You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:

• Font sizing (all normal text is 12px, featured text is 14px bold)
• Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
• All navigation tabs will have 15px height and 13px font
• etc…

This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.

Some call this object oriented css, it is worth looking into for rockstar like front end coding.

Read More

CSS tutorial – Positioning

CSS tutorial – Positioning. Navigation. Skip navigation. Site search. Site navigation … example of the ability of CSS positioning (CSS-p), how about designing page …

Source

The Year In Review: 2008


Photo by yewenyi.

2008 was a great year for CSS Newbie. And in the same nostalgic spirit of CSS-Tricks, Smashing Magazine and (I’m sure) countless other web entities, I thought I’d take a minute or two to step back and reflect on what the year has brought for CSS Newbie.

Although I first purchased cssnewbie.com some time in the middle of 2007 and wrote my first “intro to CSS” article in November of last year, I didn’t officially launch the site until February 1, 2008. Thus, this article also serves as History of CSS Newbie – before 2008, there wasn’t such a website, and now there is. And thanks to you fantastic readers and commenters out there, it’s become a better and more rewarding website than I had imagined it could.

Growth

On January 1, 2008, CSS Newbie had exactly zero visitors – it seems even I was too busy recovering from my celebrating to stop by! Luckily, that trend hasn’t continued. I published my first “official” article on the site (talking about how to create book-style article introductions) on February 1st. That day I saw a huge jump in traffic… 11 visits!

By the end of the week, that one article had gained me a couple hundred visitors, and a milestone against which to work. Although the number was small, that first week’s worth of traffic meant a great deal to me. It proved, if nothing else, that maybe I wasn’t entirely crazy to think that I could put together a website talking about CSS. Maybe, just maybe, a few people would find what I had to say interesting.

That first successful article gave me the drive to write a second, and so forth until here we are at the end of 2008 and the CSS Newbie table of contents is chock full of interesting tidbits, so much so that I often find myself looking through the archive to remember how to do things I’ve forgotten! That’s one benefit of writing for CSS Newbie that I never expected.

Statistics

I’m a bit of a statistics nerd. As such, here are some interesting stats that help visualize the year’s progression.

• I published 99 articles, or an average of a little more than eight per month.
• You-all have left 670 comments(!). That’s an average of 56 per month, or roughly seven comments per article. And I appreciate it!
• Alexa gives CSS Newbie a 3-month average traffic rank of 124,122… and a 1-week average of 58,318. Growth is in the cards!
• 152,907 unique visitors have stopped by this year, generating 293,329 page views.
• 50% of my traffic came from other sites. Thanks to all of you who linked here!
• 38% of visitors get here through search engines.

The five most responded-to articles of the year were:

1. The CSS-Only Accordion Effect
2. A Semantic List-Based CSS Calendar
3. Equal Height Columns with jQuery
4. Book-Style Chapter Introductions Using Pure CSS
5. Intelligent Navigation Bars with JavaScript and CSS

And here are the five most popular articles of the year in terms of traffic:

1. The CSS-Only Accordion Effect
2. Six Ways to Style Blockquotes
3. Horizontal CSS Dropdown Menus
4. Intelligent Navigation Bars with JavaScript and CSS
5. Show/Hide Content with CSS and JavaScript

Progression

And where will CSS Newbie go from here? Well, I certainly hope to increase both overall usefulness and visitor levels between the end of this year and the end of 2009. But how that happens could have a lot to do with you, the reader.

To that end, I’ve started a new survey to find out what you’d like to see happen with CSS Newbie over the course of the next year. I’ve made a few suggestions for ideas that I’ve thrown around, but if you can think of anything that I should be doing that I haven’t considered, please let me know about it in the comments.

The survey:

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

The survey is also available in the footer of every page on the site. Please take a second to let me know what you’d like to see from the site over the next year – I’ll take your suggestions into very serious consideration.

Thanks

Thank you, the reader, for making CSS Newbie what it is today, and for helping me make it what it will become in 2009. Thanks to my guest authors for the year: Scott Philips, Chris Coyier, and Aaron Webb. Thanks to Jeremy Harrington for designing the new CSS Newbie that launched at the beginning of this month. Thanks to my coworkers and friends for helping me talk through my article ideas and suggesting fantastic articles of their own. And thanks to the Twitter crowd for expanding my online and inlife communities in ways I never imagined.

Here’s to a fantastic 2008, and an even better 2009!





Read More

Fixing a Bad Feedburner Subscriber Count



Google’s Feedburner is a fantastic service for managing RSS feeds and delivering useful statistics on those feeds, and they have a great API (application programming interface) for pulling those statistics and displaying them on your site. But lately, I’ve run into occasional problems getting at the information that Feedburner collects. Here’s the solution that I’ve developed for dealing with Feedburner’s flops.

I’m using Francesco Mapelli’s Feed Count WordPress plugin to display the number of feed subscribers I’ve accrued. It’s a great little plugin that allows you to generate a custom message associated with your feed stats. For example, in the subscribe section of my sidebar, there’s a little message that, as I write this, reads, “Join 2449 other happy readers!” That’s the Feed Count plugin at work. I find it preferable to those little Feedburner “chicklets” that are scattered around the web these days.

But here’s the problem: when Feed Count makes a call to Feedburner to grab my latest subscriber stats, sometimes Feedburner drops the ball when it returns the number. Instead of returning the number of subscribers, it will sometimes return a “N/A” instead, suggesting Feedburner couldn’t find my stats, and resulting in a sentence that reads “Join N/A other happy readers!” Not quite the message I intended. And worse, sometimes Feedburner will return a big fat zero if it can’t find my stats — and “Join 0 happy readers!” is definitely not the impression I’m hoping to make on first-time visitors.

So what’s my solution? When in doubt, turn to JavaScript.

A JavaScript Solution

I first wrote this JavaScript solution in the last iteration of CSS Newbie when I finally got sick of being greeted every morning with my “not available” subscriber count:

$spans = document.getElementById('subbox').getElementsByTagName('span');
if($spans[4].innerHTML=="N/A" || $spans[4].innerHTML=="0") {
	$spans[4].innerHTML = "thousands of";
}

This solution relies heavily on the XHTML structure generated by the Feed Count plugin, but the concept could be edited to work with most any solution. Basically, I’m using JavaScript to find the 5th span (counting starts at 0) inside the #subbox id, which is the span generated by Feed Count that holds my subscriber count. The code checks the contents of that span, and if it finds one of the two dreaded values — N/A or 0 — it replaces that content with the phrase “thousands of” instead. It’s not as specific as I’d like, but it certainly gets the point across.

A jQuery Option

When I rebuilt CSS Newbie recently, I decided to upgrade this script to work with jQuery. I was already using jQuery for a few other effects on the page, so it made sense to cut down on the size of my code where available. Here’s the much smaller jQuery solution:

if($(".subscribers").html() == "N/A" || $(".subscribers").html() == "0") {
	$(".subscribers").html("thousands of");
}

This code does essentially the same as the JavaScript above but in fewer lines and, I personally think, with greater clarity. It looks for the contents of the element with the “.subscribers” class (which would have been an absolute bear to do with JavaScript due to the lack of a getElementsByClass function) and replaces it if it’s on our no-go list.

This is how I’ve gotten around the inconsistencies of the Feedburner API. If you have other solutions or ideas you’d like to share, I’d love to hear them in the comments!





Read More

Build a Tabbed Box with CSS and jQuery



The longer a site has been around, the more content it tends to accumulate. As website operators, we walk a fine line: too much content on every page and your site will look cluttered. Too little, and users won’t be able to find all your website has to offer. A tabbed box like the one pictured above is a nice bridge between the two extremes. It allows you to show off a large amount of content without cluttering up a lot of space. And this tabbed box has extra niceties that are sure to help your content get noticed.

What it Does

At the end of this two-article series, you’ll be able to build a tabbed content box of your own that:

• Is easily customized to fit the size and color scheme of your website.
• Is either fixed or variable height.
• Can automatically rotate through the tabs to draw interest.
• Pauses its rotation when the user interacts with it.

This article will show you how to take the tabbed box from Photoshop to XHTML and CSS, and how to apply the basic jQuery functionality to make the tabs operate. The next article will show you some advanced jQuery techniques to make your tabbed box even more dynamic and eye-catching.

The Photoshop Mockup

Like most of my projects, this one started life as a drawing roughly sketched out on a piece of paper. Despite all the cool tools we web developers have at our disposal, paper and pencil are still by far the fastest way to rapidly prototype a new idea. Here’s a crappy iPhone photo of the drawing:



This is what I mean when I say I’m not a designer, people.

Once you have a good idea as to what you’re looking to do with your tabbed box, it’s time to move into Photoshop (or a similar editing tool). If you’re looking for an extremely barebones tabbed interface you can probably skip this step entirely, but I wanted my tabs to have a little pizzazz. Here’s a look at my Photoshop document:



It’s nothing fancy: just two layers with gradients, a layer creating my borders, and my text. Of course, your layout may be more complex than mine.

When I’m working in Photoshop, I like to stop and think about how I’m going to actually develop what I’m building (and I’d advocate you do the same!). In this case, I knew that I wanted gradients on both my unselected tabs as well as the content box and that my unselected tabs should appear faded. Once I had a pretty good mockup in place, I could start to visualize how my XHTML and CSS would work together to produce the result I was looking for.



The XHTML

Here’s the basic XHTML I decided on for my tabbed box:

<div class="tabbed-box">
	<ul class="tabs">
		<li><a href="#">Tab #1</a></li>
		<li><a href="#">Tab #2</a></li>
		<li><a href="#">Tab #3</a></li>
	</ul>
	<div class="tabbed-content">
		<p>Here's my content for tab 1</p>
	</div>
	<div class="tabbed-content">
		<p>Here's my content for tab 2</p>
	</div>
	<div class="tabbed-content">
		<p>Here's my content for tab 3</p>
	</div>
</div>

I wanted to keep my XHTML as simple as possible, so that if I ever wanted to update the content my tabbed box, I wouldn’t have to dig through a lot of extra code to do so. The box has three basic components: a wrapper div (tabbed-box) that holds my entire box together, an unordered list with links that will function as my tabs, and a series of divs (tabbed-content) to function as the containers for my tabbed content.

I decided early on to stay away from extra IDs on all my elements as much as possible, to keep the updating process as simple as possible. Of course, that meant my jQuery would have to work smarter to figure out how the box works… but we’ll get to that later.

The CSS

Developing the CSS for this box does take a little math and a good understanding of the box model, but it’s not overly complex. First we’ll style our container box:

.tabbed-box {
	width: 302px;
	background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
	border: 1px solid #ddd; }

The width here is the most difficult number to determine. To come up with the number, I need to know two things: how much space I have to work with, and the number of tabs I plan to have. (I could probably calculate all this dynamically in jQuery, but I prefer to use CSS to accomplish as much as possible before turning to scripting.)

The space allotted is determined by the size of the tabbed box’s containing element: I built this box with CSS Newbie’s sidebar in mind, which gave me just over 300px of breathing room. Next up, I need to consider the number of tabs I’ll have. My box will have three tabs. If each of those tabs are 100px wide, they then use 3 * 100 (300) pixels of space. But don’t forget: according to our design, two of those tabs will need a border on one side to create the tabbed effect. This results in another two pixels added to our width, for a total of 100 * 3 + 2 (302) pixels. But remember, with the borders I added to my tabbed-box class, my final overall width is 100 * 3 + 2 + 2 (304) pixels.

Next up, we’ll style our tabs:

.tabbed-box .tabs li {
	list-style: none;
	float: left; }
.tabbed-box .tabs li a {
	display: block;
	width: 100px;
	padding: 5px 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #888;
	background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
	border-left: none; }

First I’m removing the list style and floating my tabs to the left to get them lined up horizontally. Next I’m making them block-level, so the entire tab becomes clickable. Then I’m setting them to the appropriate width (100px in this case), giving them some padding, styling the text, applying my gradient background, and applying my borders to the left and bottom sides.

Next I have a rather specific rule: I’m removing the left border on the first-child element: this means that my very first tab won’t have a border on its left side, since the containing box has a border there and we don’t want to double up. Of course, first-child isn’t supported by Internet Explorer 6… but don’t worry, we’ll account for that in our jQuery.

Then all we have left to get our tabs in working order is to set how they behave in three states: hover, focus, and “active”:

.tabbed-box .tabs li a:hover {
	color: #333; }
.tabbed-box .tabs li a:focus {
	outline: none; }
.tabbed-box .tabs li a.active {
	background: #fff;
	color: #333;
	border-bottom: 1px solid #fff; }

I’m giving my tabs a slightly darker text color in the hover state, to help the user see when they’re hovering. The focus state is there simply to remove the resulting outline in Firefox when the user clicks a tab: if you’re one of those who insist on having a focus state, feel free to leave this rule out. And finally, we have an active class. This class will be applied by our jQuery to the tab that is currently open. Here we’re removing the bottom border and changing the background color to give it the appearance of an open tab.

And last but not least, we need to apply some styles to our tabbed-content divs:

.tabbed-content {
	padding: 3em 1em 1em 1em;
	display: none; }

The padding simply pushes the content away from the edges of our box. You can set this to whatever you wish. And our display rule hides all our content, until it’s called upon by our jQuery.

The jQuery

Since we’re using the jQuery library to do most of our heavy lifting here, you’ll need to include the jQuery library somewhere above the following code.

Because I decided to write my XHTML without a lot of extra IDs and classes, my jQuery is going to have to be a lot smarter when it comes to figuring out which tabs display which content. My rationale is pretty straightforward: the first anchor in my unordered list should open the first tabbed-content div, the second one the second, and so on down the line. Because our logic is so straightfoward, I can rely on the jQuery index functionality to do a lot of the hard math.

var currentTab = 0; 

function openTab(clickedTab) {
	var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
	$(".tabbed-box .tabs li a").removeClass("active");
	$(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
	$(".tabbed-box .tabbed-content").hide();
	$(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
	currentTab = thisTab;
}

I start out by declaring a global variable that I’ll use throughout the script: currentTab. The currentTab variable will hold the index (an internal counter, like in an array) of the tab we’re currently on. It will also serve later to decide which tab we open by default.

Our function looks more complicated than it is. It requires one variable to be passed it: the clickedTab variable, otherwise known as the tab the user just clicked on. It then calculates the index of that tab (if it was the 3rd tab, the index would be 2) and saves that number as thisTab.

Next, the script cycles through all our tabs and removes any instances of the “active” class if finds, before cycling through a second time and applying the active class to the tab that has the same index number as the tab that was clicked on (in other words, the same tab). This ensures we only ever have one active tab at a time. Then we cycle through our content boxes, hiding them all before cycling through again and showing only the one box that has the same index as our tab… meaning if the third tab was clicked, the third box will open. That bit of math is what saves us from having to apply IDs to all of our tabs and content boxes. Then we set the currentTab variable to our newly open tab’s index.

Now that our function is written, we can get our tabbed box ready for prime time:

$(document).ready(function() {
	$(".tabs li:eq(0) a").css("border-left", "none");

	$(".tabbed-box .tabs li a").click(function() {
		openTab($(this)); return false;
	});

	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});

The first line in our document ready function removes the left border of the first tab. Our CSS handled this for all browsers but IE6, but this bit of code takes care of IE6 as well.

Next, I’ve written a click function that will fire any time anyone clicks on any of our tabs. It only has two parts. First, it fires the openTab function, sending it a variable called “$(this)”. In jQuery, the $(this) variable in a function is always populated with the element on which the function was applied. So if the user clicks on the 2nd tab, our $(this) variable would contain that element. The “return false” after our function prevents the browser from trying to go to whatever we put in our anchor’s href.

And last but certainly not least, our final line forces a click on the tab with an ID that matches currentTab. In my example, that’s the first tab, but you can set currentTab to whatever you’d like to start, so long as currentTab is at least one less than the total number of tabs (since we start counting at zero).

And with that, we have a functioning tabbed box!

You can see this box in action here. The demo contains all the XHTML, CSS and jQuery you need to get this box up and running on your own site.

My next article will cover some advanced tricks you can do with this box, like getting it to cycle through automatically to catch the user’s eye… and how to stop the box from cycling once it has the user’s attention. To be sure to catch the article, you may want to subscribe to my newsfeed.





Read More