jQuery probably isn't as dangerous the dynamic grids of the Cube movies

Styling Dynamic Content With jQuery

The TerraCycle website has an index of collection programs that users can join. The programs on the index page are list items formatted to display in a grid layout. That’s easy when you know how many list items there are going to be, but that isn’t the case here. I had to work out a styling solution that would work equally well with varying numbers of results. Styling dynamic content with jQuery gave me the solution I needed.

The two problems to address

The page has a list laid out in a grid, with four items on each row. I can use CSS to assign standard layout and appearance for individual list items, but there are some special requirements that need a more complex solution. I want to assign some different styling to the first item on each row, and I also want to do the same for all the items on the bottom row.

The simpler of two problems

All of the list items by default have left padding of 20 pixels. That’s great, except that I want to remove that padding for the first item on each row. I’m gonna do this by applying one of my standard classes, “no-left-p” (no left padding), to the first and every subsequent fourth item.

$j('li:nth-child(4n+1)') .addClass('no-left-p');

’4n+1′ pretty much means to add 1 (to 0) and then assign the class every four items. So in this case we’re assigning the class to the first, fifth, ninth, etc item on the list.

…and the more complex one

All of the list items have a bottom border, but I want to remove this border for the bottom row of the grid. The problem here is that I don’t know how many items there are going to be on the last row. There could be one, two, three or four, dependent on how many current Brigades there are, or how many items are in a user’s search results.

The jQuery solution to his requires some calculation.

I want to check how many items there are in the list when the page loads.

var listItems = $j('li').length;

Now I need to check if that variable is divisible by four. If it is, then the solution is simple, I just need to add another standard class, “no-bottom-b” (no bottom border) to the last four items.

if(listItems % 4 != 0)
{
  // Stuff to come here
}
else
{
  $j('li:last-child') .addClass('no-bottom-b');
  $j('li:last-child') .prev() .addClass('no-bottom-b');
  $j('li:last-child') .prev().prev() .addClass('no-bottom-b');
  $j('li:last-child') .prev().prev().prev() .addClass('no-bottom-b');
}

This just adds that class to the last item, and the three items before that.

If the variable ‘listItems‘ is not divisible by four, the we’ve either got one, two or three items in the bottom row, and we need to work out how many. I’m going to use some simple mathematical calculations to do this.

Working out the math

var listItemsDiv = listItems/4;
String.prototype.reverse = function()
{
  splitext = this.split("");
  revertext = splitext.reverse();
  reversed = revertext.join("");
  return reversed;
}

x = new String(listItemsDiv);
var listItemsRev = x.reverse();
var listItemsFinal = listItemsRev.substr(0,2);

I’m going to divide the variable by four. This is going to give me a result such as 6.25. I’m then going to reverse that string, and then pick out the first two numbers. In this case, 6.25 would provide a final result for “listItemsFinal” of 52 (6.25 > 52.6 > 52).

Huh? How does that help us?

I know that if the number of list items is not divisible by four, dividing it by four is going to give me a fraction that finishes by .25, .5, or .75. Reversing the strings for our ‘listItemsFinal‘ result is going to give me 52, 57 or 5x as a result. If it’s 57 then I know there are three items in the last row, if it’s 52 then I know there’s only one item, and if it’s 5x then it’s two items.

if (listItemsFinal == 57)
{
  $j('li-parent:last-child') .addClass('no-bottom-b');
  $j('li:last-child') .prev() .addClass('no-bottom-b');
  $j('li:last-child') .prev().prev() .addClass('no-bottom-b');
}
else
{
  if (listItemsFinal == 52)
  {
    $j('li:last-child') .addClass('no-bottom-b');
  }
  else
  {
    $j('li:last-child') .addClass('no-bottom-b');
    $j('li:last-child') .prev() .addClass('no-bottom-b');
  }
}

Relatively simple now. If ‘listItemsFinal‘ is 57, remove the bottom border from the last three items in the list. If it’s 52, then remove the bottom border just from the last item, otherwise the result must be two items, so remove the bottom border from them.

Download the code.

jQuery’s flexibility and scalability

That might seem like a very complex solution simply to remove the bottom border from some list items! The advantage is that I never have to do it again; no matter how many list items there are, however we expand the search function, jQuery will always correctly style the last row of the list. Obviously we could also use similar methods to assign some more complex behaviors.

CSS is great, but it’s not so much for resolving problems where page content might vary. Combining jQuery with CSS gives us far greater flexibility to assign powerful styling options to variable and dynamic page content.

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?

Tagged as: ,