Category Archives: Uncategorized

Checkbox filters with jQuery

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.

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:

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

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.

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

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

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.

Working through one issue at a time

Issues I immediately noticed with example 2:

  1. ‘jquery’ is a common tag to every item. How should that be handled?
  2. 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.
  3. 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.

I noticed an additional challenges:

  1. When a filter is unchecked, before hiding the list item, I need to check other classes on the list item to be hidden.
  2. 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.
  3. 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.

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?

CSS Guy said:
@Alex:
Great question. I certainly didn’t account for what happens when only one result is listed.
I’d add this as the first line after the $(document).ready(function () { part:
if ($(‘.filterThis > li’).length < 2) { return; } This checks to see if the number of results is less than 2 (such as one or none), and if so, just escape out of the loop. This way, no checkboxes would be created and no sentence regarding excluded filters would be created either. Does that help? I am using your script to filter my online portfolio. I have four tags set up (logo, website, marketing, print). Lets say an li has a class of "website logo" (two tags). When I uncheck logo I still want that element to remain (not disappear) because it still has a tag of website (which is still checked). I basically want to set your script so an element only disappears if all the tags are unchecked, not just one. How can I do that? CSS Guy said: @Jesse, I think I know what you mean. Does this example help? Jesse portfolio filters

CSS Guy said:
@Bryan,
Great question. I didn’t accommodate for tags that have spaces in them.
I’m not sure I can help. I viewed source on my final example and even though I wrote the code, it made my eyes roll into the back of my head. I wish I had time to make this more flexible, but without sitting down to do it again from scratch, I’m not sure I can.
Sorry I couldn’t help further. If you figure something out, send it over and post a comment. I’d be more than happy to link to what you’ve got.

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

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:

<div class="thumbnail">
  <a href="#">
    <img src="thumb.gif" alt="" />
  </a>
</div>

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

<div class="container">
  <div class="thumbnail">...</div>
  <div class="thumbnail">...</div>
  <div class="thumbnail">...</div>
  ...
</div>

Some basic layout CSS

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

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

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 */
}

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

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

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.

<html>
  <head>
    ... 
  </head>
  <body>
    <div class="header">
      ...
    </div>
    <div class="content">
      ...
    </div>
  </body>
</html>

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;
}
...

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.

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?

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).

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


It’s been used for years here: http://timpelen.com/?car=jalpa

This was also done to great effect in the CSS Zen Garden:
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css

Josh asks the CSS Guy about row locking with jQuery

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!

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:

  1. When the page has finished loading the DOM…
  2. add a class of ‘odd’ to every other row in the table…
  3. then assign a hover behavior that consists of:
  4. adding a class of ‘highlight’ to the row when hovered into…
  5. and removing the class of ‘highlight’ when hovered away.
  6. When any row is clicked…
  7. remove the class of ‘selected’ from any other row that happens to have it…
  8. 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

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.

A page curling tip

Some have asked how to do the page curl effect for the figures in the article I wrote for Smashing Magazine, which included figures with page curls.

The answer is Veerle’s tutorial.

There is one extra tip I’d like to offer.

In Step 2 of Veerle’s directions, she states the following:

“Since this curl doesn’t show the back of our photo, it doesn’t really look realistic. The only way I’m aware of to achieve this effect is that we draw it ourself. Select the Pen tool from the Toolbox and draw a path on top of the picture. Follow the borders of the curl you just transformed as guidance. …”

Emphasis mine.

Tracing the curl with the Pen tool can be difficult when the contrast between the curled edge and the ‘facing’ edge of the photo is too faint. For instance, if you went through the tutorial with a blank beige square, your progress as you get to step 2 may look like this:

Stage 1: Drawing the marquee

Stage 2: Select to warp

Stage 3: Drag the corner

Stage 4: Hit enter

Uh-oh! Now what do we trace to make the curl? You can make it up if you’re so inclined, but if you want a guide to trace, do the following:

  1. Take a screen grab just before you hit enter.
  2. Press enter to commit your warp.
  3. Paste in your screen grab over your working page layer.
  4. Change the opacitiy of the screen grab layer so you can line it up with the layer underneath.
  5. Now you should have guides to draw your curl.

Once you’ve drawn your curl with the pen tool, you can trash the layer and go about the other steps in Veerle’s tutorial to finish out the effect.

Adding classes to input tags as a matter of course

I felt like sharing a practice that I’ve been doing for a while now when marking up form elements.

I always assign a class to every input that is the same to the input’s type.

<input
  type="text"
  class="text" />
 
<input
  type="checkbox"
  class="checkbox" />
 
<input
  type="radio"
  class="radio" />
 
<input
  type="button"
  class="button" />

For input types that would be similar in presentation, I double up:

<input
  type="submit"
  class="submit button" />
 
<input
  type="password"
  class="password text" />

It’s not uncommon for a project to require specified padding, width, and border colors for text inputs. I don’t want to target all input tags, as it could have some unintended consequences for elements I don’t want changed. So this practice has helped me greatly. Its html file size impact is miniscule, and it’s also easy to remember, since the type value is always the class value.

Attribute selectors vs. class names

Attribute selectors almost remove the need for me to do this, but not quite. By attribute selectors, I mean the following:

input[type="text"] { border:1px solid #000; }

… in which the value of the ‘type’ attribute is used instead of a class or id.

The main reason attribute selectors don’t do the trick is that IE6 doesn’t support them. And though I can be persuaded to let a little IE6 wonkiness slip through for some parts of web site projects, forms are where I draw the line. After all, forms are how get feedback and money from customers – why screw with that?

The secondary reason can be found from the password input example above. I want password inputs to inherit the same presentational treatment as text inputs. Using the class names defined above lets me do that.

For me, this practice has proven pretty effective. Your mileage may vary, but I’d love to hear any other tips you have in mind.

See also:


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Ace Calhoon said:
I’ve not used attribute selectors much for essentially the reason you list as primary above (no IE6 support, and a lot of people use that browser). But your secondary reason seems a bit odd.
Couldn’t you write the selector as:
input[type=”text”], input[type=”password”] { /* shared CSS */}
input[type=”password”] { /* password specific CSS */ }
?

Kotatsu – a simple html table generator

It’s been a long time since I’ve used Dreamweaver for web development. I only find myself missing it when I need to create a table, especially when I want to have all cells in a particular column have a class. (I’m well aware of <colgroup>, I just don’t subscribe.)

So I created a tool to help create a table and throw in column classes quickly. I gave it a name so I can put it out there and let others use it, too.

It’s called kotatsu.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Chris Heilmann said:
Nice, but these are not tables. Tables are data constructs and need a summary, a caption and TH elements with scope attributes to be accessible and useful. All of these are also splendid hooks for styling which I’ve proven with the CSS table gallery: http://icant.co.uk/csstablegallery/

Prasun asks the CSS Guy how to switch the “on” state of navigation links for dynamic pages

Prasun writes:

I have a list of links in an unordered list. What I want is that when I click a list item, its color should change, and when I click some other list item, the color of the item which I clicked previously should return to its original state.

Can you help me in this regard?

Yes, I can help.

More advanced readers, move along. This is JavaScript beginner territory, but this is one of those steps that is really rich in DOM scripting nutrients, so I’m very pleased to discuss it.

What Prasun is describing, just by itself, is the behavior of a set of radio buttons. You click one, and it takes on the selected state. Then you click on another one, and the new one now becomes selected, while the previous one returns to an unselected state.

But radio buttons are form elements, not navigational elements, and upon clarifying with Prasun, it’s navigation that we’re after.

This is the fundamental behavior of a site that uses ajax for navigation or tabs, where each “page” is created by loading new content into the content section of the current page.

This is a relatively easy way to get your feet wet with DOM scripting. So I’ll first show how to do it with some very basic JavaScript functions. Also, I’ll show how to do it with jQuery.

First, the HTML

Let’s start with an unordered list of links.

<ul>
  <li><a href="#">Heartbreak Hotel</a></li>
  <li><a href="#">Blue Suede Shoes</a></li>
  <li><a href="#">Hound Dog</a></li>
  <li><a href="#">Don't Be Cruel</a></li>
  <li><a href="#">Teddy Bear</a></li>
</ul>

See example 1.

Who are we kidding? Let’s see it with some basic styling – example 2.

Since we’re going to be changing around selected links, let’s establish what a selected state looks like, and mark one item as selected by default. I’m going to do this by applying class="selected" to one of the links.

<ul>
  <li><a href="#">Heartbreak Hotel</a></li>
  <li><a href="#">Blue Suede Shoes</a></li>
  <li><a href="#" class="selected">Hound Dog</a></li>
  <li><a href="#">Don't Be Cruel</a></li>
  <li><a href="#">Teddy Bear</a></li>
</ul>

See example 3.

The JavaScript

Here’s what we want to do in English. When someone clicks a link, remove class=”selected” from any of the other links, and assign it to this one.

Another way to say that is “When someone clicks a link, run a function” and later I can be more specific about what that function is. Here’s how I’ll put that statement in the html.

<ul>
  <li><a onclick="applySelectedTo(this);" href="#">Heartbreak Hotel</a></li>
  <li><a onclick="applySelectedTo(this);" href="#">Blue Suede Shoes</a></li>
  <li><a onclick="applySelectedTo(this);" href="#" class="selected">Hound Dog</a></li>
  <li><a onclick="applySelectedTo(this);" href="#">Don't Be Cruel</a></li>
  <li><a onclick="applySelectedTo(this);" href="#">Teddy Bear</a></li>
</ul>

The “this” mentioned in the parentheses refers to the link that is being clicked. I’m thinking ahead here – I know that I’ll want to do something with the link being clicked (assign it class=”selected”), so I’m going to go ahead and pass that link as a parameter to the function. The term this is great for that sort of thing.

The function will be called “applySelectedTo()”, and I’ll write it in just a second. It’s going to do exactly what it says it will do: Apply class=”selected” to whatever link is given to it. It will also live in head of the document.

Notice that in the html, I’m passing the parameter this. And when I write the function, I’m using a made up term to help tell me what this was – the word link.

<script type="text/javascript">
function applySelectedTo(link) {
  link.className = "selected";
}
</script>

Check out Example 4 to see it in action.

Oh, but we’re not done

All that JavaScript function did was add class=”selected” to the new link. It didn’t remove class=”selected” from previously selected links. We need to fix that. Also, when we click a link, it adds the hash mark (#) to our url, and if our page were really long, it would jump to the top of the page again.

We’ll tackle the second problem first. That hash mark is telling me something: it’s indicating that the link is behaving like a link is supposed to behave. That behavior normally means that it will find the id of whatever I specified after the hash mark and the browser will bring that part of the page in focus. But in this case, we would rather ignore the default behavior of the link, so I’m going to tell my links to ignore their default behavior when clicked.

<ul>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Heartbreak Hotel</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Blue Suede Shoes</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#" class="selected">Hound Dog</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Don't Be Cruel</a></li>
  <li><a onclick="applySelectedTo(this);return false;" href="#">Teddy Bear</a></li>
</ul>

Example 5

And back to the first problem – removing class=”selected” from other links when a new link is selected. How do we get the link that already has class=”selected”, and remove the class? Well, to make it easy, I’m just going to say remove class=”selected” from all links, then I’ll add class=”selected” to the one just clicked.

<script type="text/javascript">
function applySelectedTo(link) {
  var ul = document.getElementsByTagName("ul")[0];
  var allLinks = ul.getElementsByTagName("a");
  for (var i=0; i<allLinks.length; i++) { 
    allLinks[i].className = ""; 
  } 
  link.className = "selected"; 
}
</script>

And so there you have it, Example 6 – final example.

And if you’re so inclined, make it do something.

We could go much further

Ideally, you wouldn’t even have an onclick attribute in the markup. That kind of thing can be inserted dynamically using more DOM scripting. It makes your html lots more readable and reusable, as well as separating behavior from structure.

Also, for kicks, here’s one final example of doing the things mentioned in this article, but using the jQuery library instead of self-written scripts. In the instance that you are already pulling in a hefty JavaScirpt library into your web site, you might as well make use of it.

Can deprecated tags become undeprecated?

When certain tags become deprecated, they become so because they are replaced by more favorable ways of achieving their original purpose. (In the case of <blink>, being annoying helped it along the path of deprecation.) But there’s one tag that may be coming back to life.

The value of <u>

The <u>, whose sole purpose was to underline inline text, was deprecated in HTML 4.01, and was destined to remain unsupported in future versions of HTML. However, arguments have recently been made to revive it in HTML 5, warning that <u> has a specific value that no other tag has, and that we never should’ve given <u> up. Watch Tim Berners-Lee defend this proposition to the World Wide Web Consortium in a heated March 2008 discussion.