Ask the CSS Guy

Update your Ask the CSS Guy RSS feed

Thu, 16 June 2011 21:05:45 -0600

You have a been a subscriber to my site and for that I am grateful. I've switched over to a new host and am now using a different CMS, so this feed will not be updated going forward. To get notified of any new posts, please visit my site again and subscribe from there, or follow @askthecssguy on twitter. Muchas thanks!

Waqas asks the CSS Guy how to specify an alternate font size if the preferred font isn't available on the user's system

Fri, 05 Nov 2010 16:11:28 -0600

Waqas writes:

Is there any way to specify alternate font size?

e.g.

p { font: 11px Tahoma, Helvetica; }

If Tahoma font is not available in machine, Helvetica will be used (if available) with size 11px. Is there any workaround that if Tahoma is available it will use size 11px & if it is not available Helvetica will use for example 13px?

Yes - here's a way. I had found this article from 2007: JavaScript/CSS Font Detector, so let's use that as a starting point.

I'll start with HTML for a simple paragraph:

Row, row, row your boat

Gently down the stream.

Merrily, merrily, merrily, merrily

Life is butter dreams.

And style it:

And so I have two fonts: Brush Script Std as my preferred font, and Arial as my fallback. The challenge is that supposing Brush Script Std isn't on the user's system, I want Arial to display not at 28px, but at 18px.

I'd approach is like this. First set a style rule for the fallback state. If we know that 'Brush Script Std' is available, let's use JavaScript to add a class to the body tag that indicates the font is good to use, like . I could then write a separate style rule that makes use of that selector, like so:

Now for the script that handles the font detection and adding of the class name to the body. I verified that Waqas isn't using jQuery, so I'm writing a couple of extra functions to handle the onload event and the adding of class names. (credits at the end of the article).

Here's the final result where you can view source and copy if you wish. Know of other methods, better methods, or gotchas? Tell me about it.

Script credits:

addLoadEvent function courtesy of Simon Willison.
font detection script courtesy of Lalit
addClass script courtesy of (dunno... Jeremy Keith, maybe? I got it from his DOM Scripting sample site)

Memphis AIGA Mini-conference

Thu, 14 Oct 2010 09:05:45 -0600

This saturday morning, October 16th, there is a local AIGA mini-conference on topics like designing for mobile, HTML5 and CSS3 (yours truly speaking), HTML frameworks, accessibility, and more. If you're in the Memphis area, check it out.

Here are the details.

I only know two of the other speakers (JD and John Lloyd). I'm looking forward to meeting the others, but even more so, getting to meet some of the other web-savvy designers in Memphis who are interested in these topics. Maybe I'll see you there.

Spinboxes Optimized for Touchscreen

Mon, 19 Jul 2010 10:49:12 -0600

So what's a spinbox? A picture is worth a thousand words:

Here's the thousand word version (via):

A spin box — sometimes called a spinner control — is a collective term for the combination of a text box with an up-down control. Users can click arrow buttons (the up-down control) or press the UP ARROW or DOWN ARROW key to change the value in the text box. The value ascends or descends incrementally.

I've been optimizing web forms for use in iPhones and Androids. Not too long ago I ready a post by Luke Wroblewski on the topic (which used hotel search forms as an example - bonus for me). In Luke's post, he calls attention to the fact that Kayak's mobile app uses spinboxes for room and guest count instead of select drop-downs:

The up/down controls are sized and positioned optimally for input from a fingertip instead of a mouse.

I've seen these used in iPhone apps, but not in web forms. I wanted to make a form that used these but wasn't sure how to mark on up. According to the forms chapter of "Dive into HTML5", Opera will render a spinbox for input type="number", and Opera even respects the min and max attributes. That's great, but Safari doesn't respect the min and max attributes (yet), so using cool new HTML5 attributes for input isn't going to work for me.

I decided to use jQuery to dynamically create a spinbox that uses a select dropdown as it's source. The jQuery would grab the select and all its options, create a spinbox control that dyanimically updates the hidden select as the up/down buttons are pressed, while keeping the original select hidden.

Here's an example I made that I wrote specifically for webkit (iPhones, Androids, or if you want to see it in the desktop, Safari or Chrome). Or here's a screenshot:

Download a zip if you want to play around with it. I'm no JavaScript/jQuery expert, so I'd love to hear about any improvements. Note that my script and styles use the term 'tapbox', which was my way of saying 'touchscreen optimized spinbox'.

More about spinboxes

For select drop downs with few options (like in my case, 4), a spinbox is a great substitute for a select box. Select boxes that have many options, like say 31 days in a 'day of the month' drop down, should likely stay in a select, and not be converted to a spinbox, else you risk triggering your old nintendo thumb by furiously tapping to get to the higher options.

Other situations in which a spinbox might be appropriate, as summed up in this article:

Spin boxes are useful when users don’t need to see the whole range of values in order to make a selection. For example, if the range is so familiar to users that they'll be able to infer all values from seeing just one (such as Monday indicating days of the week), consider using a spin box.

Review of CSS Mastery, Second Edition

Fri, 22 Jan 2010 10:46:22 -0600

I don't read many technical books about web site development with CSS. I probably learned like many of you likely did: online articles, right click/view source, firebug, and a hell of a lot of trial and error. I never take for granted that I've been able to provide bacon and diapers for my family by learning from these freely available resources. I'm taking a moment now for that to sink in.... it's awesome.

You can't do that and become a surgeon, right? Like you can't walk up to someone who you know has recently had their appendix removed, right-click, view source, and replay the procedure, saving the information to implement later. If you could, I'd imagine there'd be lots of link bait blogs with headlines like "32+ Ass-Kicking Drugs That Help Prevent Heart Disease You Should be Prescribing to Your Patients, but (Probably) Aren't."

Anyway, let's bring this back home. As easy as it is to find great content all over the internet that would educate you on every possible thing you could imagine regarding what you can do with CSS, there's nothing like having a book to articulate concepts from beginning to end and provide a coherent narrative of the thought and methodology behind a technique's implementation. Andy Budd's CSS Mastery: Advanced Web Standards Solutions, Second Edition, accomplishes this.

CSS Mastery isn't for those just starting out (although anyone would learn something from this book if they are familiar with CSS and HTML). This isn't something that starts out with how to specify font sizes for the p element. Athough it touches on some fundamentals, you'll want to have been using CSS for a while in order to get the most out of this book.

Chapter 1 is called "Setting the Foundations", and addresses the use of meaningful markup, using classes vs ids, different versions of HTML and CSS, DOCTYPE, among other things. It gets your head around some of the parts you don't learn just by zapping an element on someone else's site with Firebug. There is a part about microformats that is mentioned here, and though it's great information, it feels out of place among the other topics in this chapter.

Chapter 2, "Getting Your Styles to Hit the Target", talks about selectors, specificity, inheritance, style sheet planning and organizing, and style guides. It's good to know these before you start authoring your CSS style. I appreciated his explanation as to why he prefers one CSS file rather than splitting it up into smaller ones. I've noticed other authors advocate splitting them up, so it's nice to see someone of Budd's stature offering some yang to balance the yin. (Note that it all depends on the site in question in anyway.)

Chapter 3, "Visual Formatting Model Overview", describes the box model, differences with IE, positioning (relative/absolute/etc.) and floating. I particularly found helpful Budd's description of how inline boxes work, and why they ignore certain properties like height and vertical padding and margins.

Chapter 4 is "Using Backgrounds for Effect", and talks about using images for list bullets, various rounded corner techniques (including border-radius), multiple background images, opacity (including RGBa), drop shadows, image replacement techniques, and then some. I sensed that this chapter got beefed up a bit with the CSS 3 properties from the previous version of the book.

Chapter 5 is "Styling Links", and mentions all sorts of interesting ways to play up links, including creating CSS-only tooltips.

Chapter 6 is "Styling Lists and Creating Nav Bars", which is definitely one of the most common things I get asked about. Not only does this chapter discuss all the various proven methods of creating CSS-styled navigation, but also has a terrific section on how to create Flickr-style image maps.

In Chapter 7, "Styling Forms and Data Tables", Budd shows how to style a calendar, and what markup he'd use to make various layout methods for a simple form. This is one chapter I think is a little weak. I would've loved to have seen this chapter fleshed out much more. The concepts from the calendar can be applied to any table, but it would be nice to see a real data table taken on here, something like what happened here. And though the form concepts mentioned here are common in the wild (like a blog comment form), they feel far from leaving someone with a mastery of tackling forms. It only seems to tackle basic form layout, but nothing further. We've seen in Chapter 5 some pizazz he'd throw on links, but what about form fields? What about warning of the inherent dangers of applying styles to form fields?

Chapter 8, "Layout". This is a meaty chapter, which discusses how to create fixed, elastic, and liquid layouts, and the bonuses of each. Someone could have a field day playing with layouts and techniques used here.

If you've forgotten why web developers cuss IE so much, then Chapter 9, "Bugs and Bug Fixing", will help you remember. The chapter mentions how to find and isolate bugs, and reminds you to "fix the problem, not the symptoms." It then goes into various IE-releated bugs, why they happen, and how to prevent them. Budd also mentions the concept of graded browser support ('graded' as opposed to 'supported'/'not supported'). Great read.

The final two chapters are the all-new case studies for sample sites "Roma Italia" (by Cameron Moll) and "Climb the Mountains" (by Simon Collison). Moll and Collison walk through their approach to building their sites, and walk you through the implementation of various techniques. These case studies serve as professional models for readers to learn from and experiment with. These aren't just wireframes or isolated elements - they are fully fleshed out pages, professionally designed and developed by leaders in the field on web development. You'll hear them describe CSS3 properties in their own words. Although there is some overlap among all three authors in subject matter, this is a pro in two respects: 1) the case studies can be independently of the rest of the book, and 2) what concept may not have congealed under one author would hopefully click with the reader by another.

I have some some minor issues with the book. This book seemed to be written over a span of time while the latest crop of browsers were just coming out. I didn't see any mention of Internet Explorer 8, which was released in March of last year. Also, whenever a tech book has chunks of code, and we want to illustrate what's different from one chunk of code to the next, color highlighting is very helpful. And although this book is in color, only Chapter 8 and Chapter 10 appear to use different font colors to illustrate changes in within blocks of code and markup. As I mentioned before, there is some slight overlap in content that the three authors were responsible for. And while this can be helpful, for someone reading the book straight through, it seems a little weird to have concepts re-explained as if the last chapter didn't just do that. Though I point out these issues, the pros of the book outweigh the cons by a landslide.

I'm sure a question might be from someone who already owns the first edition, as to whether they benefit from purchasing the second. In my opinion, no. I should restate that I didn't read the first edition, so take this all with a grain of salt, and I also don't pick up CSS books on a regular basis. But I would imagine anyone who has read the first edition and has also regularly kept up with web sites like the authors' blogs, 23ways.org, alistapart.com, css-tricks.com, etc., that person may not get much more from this text. However, if you feel out of practice with CSS sites and were wondering if you should brush off your old copy to read again, then get this one instead.

Recommended. $26. Available from Amazon.

Monetizing your code

Fri, 08 Jan 2010 20:52:30 -0600

I've toyed with offering affiliate links to Theme Forest from this site in the past. But since the people who typically visit my site tend to design and markup their own, it didn't seem worth it (and the click-through numbers supported that). If anything, readers of this site would be on the selling end rather than the purchasing end.

Now I see that the same family of sites is offering Code Canyon, a marketplace for code, which also seems to fit the readers of my site (once again, the selling end rather than the purchasing). And if you aren't the kind of person who sells their designs and themes, perhaps you are the type of person who would be interested in monetizing your javascript image gallery, or your php contact form, or whatever. It appears you can do that at CodeCanyon.net. (Disclaimer: Yes, I'm using my affiliate link, although it doesn't really help me that much if you are a seller, so maybe you want to buy something, too? Go ahead, look around :) ).

I wonder if the quality of some of the things sold here are much better than what you can find in the jQuery plug-in repositories and free php tutorials. Are you any of you out there buying these things? Are any of you selling? If so, how's it going?

A way we could potentially get around the fact that many web forms prevent plus signs in email addresses

Tue, 17 Nov 2009 22:34:18 -0600

Many of you are likely already familiar with the immensely useful feature of including plus signs (+) in Gmail addresses, such as the following:

askthecssguy+mileycyrusfanclub@gmail.com

This would allow me to sign up for account at another web site, and be able to track spam or apply filters based on everything after the plus sign.

The problem is that many web sites that ask for email addresses will reject addresses that contain a plus sign. To get around this, we could do one of two things:

Contact every web site owner whose site doesn't allow plus signs, and convince them to change their form validation.
Get Gmail to recognize a special string of characters as the same as '+'.

I'd love to see Gmail implement a feature where a specially string of characters would serve the same purpose as '+'. That string would be made up of commonly accepted characters, like [a-z] and [0-9], but their special combination would trigger the Gmail application to treat it like a plus sign.

For example, let's say Gmail enabled this for the following string of characters: zzzplussignzzz. So I would sign up for the Miley Cyrus fan club using the following address:

askthecssguyzzzplussignzzzmileycyrusfanclub@gmail.com

I chose 'zzzplussignzzz' because it is unlikely to be used in a legitimate email address, and it would be easy to protect any new Gmail signups from using that string, perhaps by using the 'Sorry, that's already taken' indicator in case someone attempts to do so.

Disabled labels and the Trilemma plugin

Wed, 19 Aug 2009 17:25:37 -0600

I'm working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don't have as much contrast as what I'd like. To better distinguish at a glance which inputs are disabled/enabled, I've chosen to style the labels of disabled inputs with a faint gray color.

Consider the differences in the screenshot below.

You may also view a live HTML example of the above form to see how disabled fields appear in your browser.

HTML

The difference in HTML is a small one. The first example might have a checkbox whose HTML looks like this:

disabled="true" />
Astronomy

While the second example, I've added class="disabled" to the label:

disabled="true" />
class="disabled">Astronomy

CSS

I've chosen to apply a light gray color to any label with a class of 'disabled'.

label.disabled { color: #aaa; }

I found this technique to be particularly useful if you have a form that requires some fields to dynamically become disabled/enabled, in which case some JavaScript would also come in handy. Consider the trilemma:

The Trilemma jQuery plugin

According to Wikipedia, a trilemma is a difficult choice from three options. A trilemma can also be expressed as 'a choice among three favorable options, only two of which are possible at the same time.' That second part is where the name for this plugin came from.

(I found out about this term from the comments of the 2005 "Pick Two" post on kotte.org, a fun read and part inspiration for this plug-in.)

As my illustrative example, I've chosen the trilemma that web designers offer to their clients: Out of good, fast, and cheap, you can only pick two.

How is this represented on an online request for proposal? I would present it as a series of checkboxes:

The trilemma plugin will disable the other checkboxes after the user checks two of them. If the option is turned on, the plugin also applies class="disabled" to the labels of disabled inputs.

Try it out.

This plugin isn't limited to '2 out of 3' - the trilemma is just a way to illustrate what this plugin does. The '2' maximum is a default setting, but you can set it to be anything. For example, maybe you have 8 options and only wanted to allow a maximum of 5 to be checked. So the 'trilemma' plugin is simply a jQuery plugin that allows you to limit the number of checkboxes that can be checked within a set. (Yes, changing this number to anything other than '2 out of 3' breaks the meaning of trilemma, but I'm ok with that.)

Trilemma plugin: examples, how-tos, downloads

Here are some examples.

Pick 2 (out of 3): The maximum of '2' is default out of the box behavior.
Pick 2 (out of 5): This is the same as the previous example, except there are more to choose from. The maximum selectable is still '2'.
Pick 4 (out of 5): Changes the maximum limit to something other than 2.
Pick 2 (out of 3) with disabled labels: Adds class="disabled" to the labels of the disabled fields.
Pick 3 (out of 10) with disabled labels: Changes the maximum limit of selectable checkboxes to something other than 2, and adds class="disabled" to the labels of the disabled fields.

To install, download and insert jQuery and jQuery.trilemma.js in the head of your document, then call trilemma on whatever element contains all the checkboxes. In the example below, it assumes all the checkboxes are wrapped in a fieldset with a class="goodFastCheapFieldset".

By default, trilemma only allows 2 checkboxes in the set to be checked. To allow more, just pass a new maximum by setting 'max', like so:

$(function(){
  $('fieldset.sciences').trilemma({max:4});
});

Also by default, trilemma won't try to set class="disabled" on the labels. If you want to turn it on, just set it to true, like so:

$(function(){
  $('fieldset.sciences').trilemma({disablelabels:true});
});

To use disabled labels and set a maximum other than '2', use a comma to separate those options:

$(function(){
  $('fieldset.sciences').trilemma({max:4,disablelabels:true});
});

Download a zip with the trilemma plugin and examples.

If you use the disabled labels option, make sure to add something to your stylesheet, otherwise you may not notice the difference!

If you find this article or plugin helpful, I'd like to hear about it. Also, consider kicking off your next amazon purchase using the link in my sidebar. I get referral credit, and it costs you nothing extra.

Update 2/23/2010: Fixed a minor bug that involved using more than one set of checkboxes on the same page.

59+ Amazing (and jaw-dropping) web design-related lists with titles that will rip your face off, blow your mama's mind, and make you cry under the crushing pain of their inspiration

Mon, 03 Aug 2009 15:05:08 -0600

I couldn't resist. The round-up post trend is growing at an unbelievable rate. If lists are that good, then surely a list of lists is even better, right? Let's get started.

Titles with interesting adjectives and words

20+ Wicked Proof of Concepts for Better use of jQuery/CSS
I appreciate concepts that keep the wicked from seeping through.
40 Sexy And Creative Typographic Logo Designs
This is the Justin Timberlake of article titles.
50 Kick-Ass And Creative Dark Website Designs
Of all terms to use, I like 'kick-ass' the most.
6 Easy Ways To Cure A Nasty Case Of Redesign-itis
I'm glad there's a 6-step program to treat this.
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts
With the other lists using words like 'brilliant' and 'amazing', this title doesn't seem to be aiming high enough with 'decent'.
16 bitchin' commands and shortcuts for Twitter
Twitter was made for bitchin', so this works doubly well.

(Titles that use) parentheses

75 (Really) Useful JavaScript Techniques
(Really)?
10 Intelligent Ways of using [FORM] Elements
Not really parentheses, but I can't imagine why brackets are being used here.
15 CSS Properties You Probably Never Use (but perhaps should)
..(.)
Web Nerd Terminology (Explained)
Am I alone or does the title work better when 'explained' is not encompassed in parentheses?
50 Best-Of Designer's (NEW) Download Picks and Resources
Odd placement.

Things your must or should do (but in some cases probably don't !)

Posts that lost count of how many items are in the list, so they give up counting and slap on a plus (+) sign

More round-up of round-ups

CSS image replacement for... images? It makes sense for print.

Thu, 25 Jun 2009 17:08:25 -0600

Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn't show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color.

One way people get around this is by including two logos on their site, hiding the one for print in the screens css, and vice versa. It works, but it includes twice as many img tags as what is really necessary.

A method I've had success with is calling a print-optimized image in the html, and using CSS to swap out the image with a screen-friendly one.

Compare what happens when you don't do this to when you do.

HTML

CSS

#logo {
   background:transparent url(logo_screen.gif) no-repeat top left;
   height:0;
   overflow:hidden;
   padding-top: 100px; /* height of logo for screen */
   width: 100px; /* width of logo for screen */
}

The height:0; and overflow: hidden; combo makes sure that I don't see the logo intended for print on the screen. By adding a width and padding-top to that image, I can set my screen-optimized logo as the background-image. The width and padding-top should match the width and height of the image you want to show up.

This came about by reading David Shea's image replacement tests. I like the Leahy/Langridge method of image replacement because it requires no extra markup, but this image replacement technique has some cons (as they all do) when it is used to replace text.

If it has cons, why do you think it's an ok idea?

One usually reads about image replacement to replace text, and issues that typically come up are what to do when images are disabled, when CSS is disabled, or what extra markup has to be included to make the effect work. Since I'm using image replacement technique to replace an image, these become non-issues. If images are off, it's the same effect as not using the technique at all - alt attribute values are shown instead. If CSS is off, the print-friendly logo is likely the favored image to show anyway. Also, no extra markup is needed - we manipulate the existing img tag and nothing else.

Presenting a src for the print-optimized logo in the HTML, even though it doesn't get shown, feels a little weird, though, doesn't it? You might feel better if you set the src for the screen-optimized logo, and then use a rule in the print style sheet to swap out for the print-optimized one. But that doesn't work - remember that printing of background images is not enabled in browsers (by default, anyway).

So I'm sure you've seen plenty of sites that have a dark background with a white logo on them. You may even have one yourself. Go give them print preview and see how it's handled. Sometimes (as in the case of this site), text is an acceptable fallback, but if the logo is set as an image, hopefully it is represented well in print.

Troubleshooting with

Fri, 20 Mar 2009 15:06:01 -0600

As powerful as Firebug is for inserting HTML and CSS on the fly, sometimes you just want to save a local version of the page so that HTML manipulation can be saved and tested across browsers.

I just wanted to share a tip on how easy this is to do. Right click, view source, and save it as an html file. If you're lucky, the page will load right up, bringing in the CSS/JavaScript files that's being used on its original domain.

For some sites, you have to give a little guidance. Like today, I went to wired.com, viewed and saved the html source. You can view the result here.

Yuck, it's missing styles. That's not what we wanted.

But by inserting a little code in head, we can grab everything the page uses from the site. After the opening head tag, insert the following:

and then resave the file. View the result, and you should see the page just as it is meant to be seen at its original address.

I can modify my local copy to my heart's content, putting new or modified CSS in style tags until I have it just right, then commit the changes to something more permanent. I use this all the time when troubleshooting defects, especially when needing to see how inserting some new element in the HTML will affect IE. Hopefully, it will help some of you, too.

And note that the wired.com example might work for today, but if they ever redesign, this article's example won't mean jack. I apologize in advance.

Checkbox filters with jQuery

Fri, 06 Mar 2009 14:16:16 -0600

Perhaps I'm using delicious.com wrong, but sometimes I wish I had the ability to narrow down my results from a variety of different tags rather than excluding results that don't share the first tag I marked. That's where this exercise came into play.

The technique can be used anywhere. In my line of work (online hotel reservations), I've experimented with this technique for a room selection for online hotel reservations. For instance, hide all but the non-smoking rooms with a king bed, and only show me rooms that I can pay for in advance to get the cheaper price. That sort of thing.

For this article, I'm going to base my examples on delicious.com's bookmarks.

View demo

Disclaimer stuff

This isn't so much of a 'teaching' post as it is an 'asking to be taught' post. Despite the danger I can cause, I'm no JavaScript/jQuery guy, and there are plenty of places here that I'm going about this all wrong. In those instances, I need your help. I'll call out some specific questions where I know I need improvement. And if you see additional places, please let me know. In the meantime, don't look to this post as tried-and-true, ready-to-copy-and-paste way to do things, because it's far from it.

The HTML

Let's recreate a delicious bookmark listing and leave out the filters for now. Here's the html for a single listing:


  ...
  
    The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
    http://www.noupe.com/jquery/the-power-of-wordpress-and-jquery-30-useful-plugins-tutorials.html
    Tags: plugin, wordpress, webdesign, jquery
  
  ...

In order for this to work, we need a way to get the list items using class names. So the tags are repeated as class names. Also, I'm going to give this particular list a class name so the javascript has something to target later.

class="filterThis">
  ...
  class="plugin wordpress webdesign jquery">
    The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
    http://www.noupe.com/jquery/the-power-of-wordpress-and-jquery-30-useful-plugins-tutorials.html
    Tags: plugin, wordpress, webdesign, jquery
  
  ...

We create several of these records and we have ourselves a nice delicious-like page of results.

View example 1 - the starting point: basic page, no javascript

Let's say it in English

The JavaScript for this is kind of long and boring, not to mention that I'm not doing it right in several places. So instead of reprinting it, I'd rather just say in English what I wanted the JavaScript to do. Writing out the logic in English is always a good practice anyway. So here goes:

When the page loads, look through all the class names of the list items to be filtered, and build a new list with all the unique values of those class names, along with a corresponding checkbox. Being friendly, we'll also include a 'show all' checkbox at the end of the list. Since all items are shown by default, all checkboxes will be shown by default, too. When someone unchecks a box, hide any item that has the class name of that checkbox's value. When rechecked, show any item that has the class name of that checkbox's value.

Mouthful, right? There's much more to come, as I quickly realized that there is more I needed to do with this list.

View example 2 - the starting point: basic page, no javascript

Working through one issue at a time

Issues I immediately noticed with example 2:

'jquery' is a common tag to every item. How should that be handled?
When i uncheck 'webdev', an item that has the class of 'resources' also disappears. It's the only item with the class of 'resources', yet it's checkbox stays checked, misleading me into thinking that because it's checked, there must be a listing showing that has it.
It would be nice to alphabetize the filters.

The latter one was the easiest to knock out. I can sort the array of unique class names by adding this line to the JavaScript:

arrayUniqueClasses = arrayUniqueClasses.sort();

Also, I chose to exclude any class that is common to all elements from being in the filter column. (My code is probably cruddy for doing this - would love feedback on this.) For sake of demonstration, I created a paragraph above the filters that states which classes those are common to all list items.

View example 3 - alphabetized filters, and excluding tags common to all list items.

I noticed an additional challenges:

When a filter is unchecked, before hiding the list item, I need to check other classes on the list item to be hidden.
When a filter is checked again, in addition to showing the list item, I need to check all the other filters for every other class associated with a newly shown list item.
For my personal preference, I wanted to add this in: If all other filters are checked, go ahead and recheck the 'show all' checkbox.

To see how I tackled these challenges, I recommend viewing source on the examples. The script is commented with what I'm doing and questions to myself throughout the process.

View final example

Questions for people with more jQuery/JavaScript experience than me:

In order to have only unique values in my array, I'm using a function called unique(a) (credit: Johan Känngård, http://johankanngard.net/). I tried to use jQuery.unique, but it wasn't working right. If anyone can do the unique part in jQuery for me and point out how it's done, I'd be much appreciative.
I'm using what is probably an unreliable method for determining if a tag is common to every result. I count the number of list items, and I count the number of times any class appears. If a class's total occurrences equals the total of all list items, I assume that class is common to all list items. Is there a better way to do this?
I'm removing items from my arrays using a removeItems(array, item) function that I got from who-knows-where. Is there a way I can do this in jQuery?
Any other things that could be done better?

How to make a 'wall of awesome' with CSS and an animated gif

Thu, 29 Jan 2009 22:46:11 -0600

My coworker Alan sent me a link to moustacheme.com last week. Moustacheme.com has a wall of awesome, which is a gallery of moustachioed photos (perhaps it could be called a "stash of staches", or a "stache-cache"), and it uses a clever CSS technique for an attention-getting effect on hover.

Let's recreate it.

The HTML

We want a thumbnail container, with our link inside of it. The thumbnail image is inside the link. The thumbnail containers are at a fixed dimension (thanks to the thumb) and will simply float left and repeat .

So this:

repeated a few times and put in a container, like so:


  ...
  ...
  ...
  ...

View example 1

Some basic layout CSS

Right off the bat, I want to layout my thumbs a little better, like a 9x9 grid. So I'll start with that first.

.container { width: 470px; }
.thumbnail { float:left; }
.thumbnail a img { display:block; border:none; }

View example 2

Now let's get awesome.

Awesome CSS

To get awesome, we need to find a nice high-contrast animated gif to assist our hover state. I could use the star blast used on moustacheme.com, but those are cut to the size used on that site, so I think I'll create my own little animated spiral based on a rough gif I found on the internets.

We set that image as the background of our thumbnail div. The awesomeness is baked into place once the opacity of the thumbnail image is changed on hover.

.container { width: 470px; }
.thumbnail { float:left; background:transparent url(images/spiral.gif) no-repeat 50% 50%; }
.thumbnail a img { display:block; border:none; }
.thumbnail a:hover img {
  opacity: 0.8;
  filter: alpha(opacity = 80); /* for IE */
}

View example 3

I'm certain this could be done with less markup. For instance, we don't need a div.thumbnail. Our tag can be the thumbnail - set it to display block and attach the background image to it.

View example 4

In summary

Ok, so my wall of awesome featuring images from the Men Who Look Like Kenny Rogers web site is not as awesome as moustacheme.com's wall, but you get the idea.

Mike asks the CSS Guy about a scrolling trick with background images

Tue, 13 Jan 2009 16:27:30 -0600

Mike writes:

Check this out: http://econsultancy.com/reports.
Scroll up/down... whaaaaat? :) How was this done?

Answer: fixed background images. Let's look at some examples.

Images

For the basic effect, start with two same sized images, with a slight difference. For my example, I chose this color image and made second version of it in black and white.

The images don't have to be the same size, but that definitely makes it easier.

The markup

Each image will need it's only container. I've used a header div and a content div.

The CSS

Now you assign each image as the background image of each div. The positioning should always be the same, and background-attachment should be set to fixed.

...
.header {
  padding:40px 40px 40px 300px;
  background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
}
...
.content {
  padding:10px 40px 10px 300px;
  background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;
}
...

View example 1

I've kept this example basic. If your browser is wide enough by default, the two images are already seen at the same time. That's ok just for purposes of illustration.

And knowing this can be done, there's no reason it has be limited to just two images.

View example 2

So what can be done with it?

This 'effect' isn't inherently bad or annoying, but it is noticeable enough that I'd rather it exist for a reason - where the effect adds some value to the content. Otherwise, like in the case of econsultancy, it just seems like an excuse to show both the home and away jersey, as if someone couldn't decide which logo to go with, so they came up with a way to use both.

I took a stab at it. Maybe a paper shredder web page?

View example 3

Or maybe not...

If you've seen technique this used effectively, let me know in the comments.

Jan 14, 2009: Some readers of reddit mention that the following sites that have used fixed background images to achieve a nice effect:

Eric Meyer's complexspiral demo uses fixed background images to fake transparency
Bryan Katzel's We Bleed Design portfolio. (Click the 'play' link at the top, sit back, and enjoy).

Josh asks the CSS Guy about row locking with jQuery

Wed, 22 Oct 2008 08:49:22 -0600

With regards to this article, Josh writes:

"Would it be possible for you to recreate this with jQuery and see how many lines of JS you can save in the process?"

Yes!

View demo

This is a direct jQuery replacement of this particular example.

The jQuery

I ditched all the home-grown functions, linked out to the jQuery-latest.js, then wrote the following bits:

$(document).ready(function() {
  $('.pickme tbody tr:odd').addClass('odd');
  $('.pickme tbody tr').hover(
    function() { $(this).addClass('highlight'); },
    function() { $(this).removeClass('highlight'); }
  ).click( function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected').find('input').attr('checked','checked');
  });
});

In English, this says:

When the page has finished loading the DOM...
add a class of 'odd' to every other row in the table...
then assign a hover behavior that consists of:
adding a class of 'highlight' to the row when hovered into...
and removing the class of 'highlight' when hovered away.
When any row is clicked...
remove the class of 'selected' from any other row that happens to have it...
then add class of 'selected' to the current row, while also checking it's radio button.

This is much shorter and easier to write for than the previous example. Compare the javascript written in the source code on the previous version to the jQuery version.

The usual warnings for using libraries still apply. If it's a single effect on your site, it is likely best and more concise to write out your functions from scratch, but if you are already using jQuery (or any other library) on your site, take advantage of it. Also, just because it's easy doesn't make it right - give consideration to whether a behavior should be applied at all.

Pardon the mess

Thu, 04 Sep 2008 13:39:51 -0600

I'm gutting some movable type html, and along with that, I'll need to rebuild the CSS file as well. If you keep seeing fresh articles in your feed reader, this is why. This will take a few days.

Sep 12, 2008: I suppose it could be considered subjective, but the 'mess' has been straightened up. I still have some entries to edit to bring up to column standards (why didn't I do this sooner?), but things are falling into place, and I'm learning plenty in the process. I've got a vacation coming up, but hope to get some articles currently in the works on the site soon after my return.