Alternating column colors with jQuery

By Tim Priebe on January 4, 2010 at 7:04 pm in Design, Technical, css, html

jquery-tablesWe recently had one of our designers create a table design for a client with alternating column colors. Instead of laughing at her and not coding it, we instead decided to use a little jQuery goodness to get it taken care of.

We included the following code in our document’s head, using the Google jQuery implementation:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
$("table tr td:nth-child(even)").addClass("even-column");
$("table tr th:nth-child(even)").addClass("even-column");
});
</script>

So that’s the code that gives every other table cell, including header cells, the class of even-column. Now we can style those cells however we’d like.

In our case, a little CSS transformed the table pictured below on the left into the table on the right.

screen-shot-2010-01-04-at-64457-pm screen-shot-2010-01-04-at-64510-pm

Of course, putting the following in our google.setOnLoadCallback function will do something similar for rows.

$("table tr:nth-child(even) td").addClass("even-column");

This would result in the following:

screen-shot-2010-01-04-at-64554-pm

While this could have been solved by actually hard-coding the table’s cells with the even-column class, we are using Wordpress on this site. This means the client could add their own table on down the line, having no idea what a class is, much less to add a specific one to every other cell in every row of the table. Plus, that would be a lot of work.

Looking for 40/hr week programmer student worker during summer

By Tim Priebe on April 13, 2009 at 5:11 pm in General

We’re looking to hire on a full-time programmer student worker for this summer, with the possibility of continuing on into the school year. We are looking for someone who learns quickly. Experience in the following is a plus, but IS NOT absolutely necessary:

  • PHP
  • MySQL
  • XHTML / CSS
  • Javascript (jQuery experience would be nice)
  • General IT support
  • Social Networking
  • Wordpress
  • Adobe suite (Photoshop, Fireworks, Dreamweaver, etc.)

Again, experience in those areas is not necessary, but would be a plus. We’re looking for someone to start immediately after the semester ends, the very next week.

Email us your resume, any code samples, and URL to any online work you’ve done. Also indicate the date you would be available to begin, and when your summer break ends. If you look like you might be a good fit, we will call or email you to schedule an interview.

  • Location: Edmond, Oklahoma
  • Compensation: $10/hr
  • This is an internship job

Align Shadows on Repeating Backgrounds

By Nick Little on December 16, 2008 at 6:30 am in css

One thing web designers do a lot is add fancy shadows and rounded corners to content boxes. This would all be great, except for the fact that they like to use repeating backgrounds as well. As a web programmer, one might end up trying to write HTML and CSS code for a design that looks very similar to the image on the right. You may ask, “How is the image used for the background of the footer going to be aligned properly with the background used for the content section?” Here is a nifty javascript routine that can be used in this situation:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);

This routine will adjust the height of an element (In the example above, ‘divPreFooter’) so that a different element (’divWrapper’) will have a height that is a multiple of a number (divisibleBy). This will align the repeating background on the content section with the background image behind the footer. The corresponding HTML and some sample inline CSS that work with the above routine is listed below.

<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <!-- Footer Content goes here -->
</div>

It works not only with shadows on repeating backgrounds, but also rounded corners or any type of alpha transparency on repeating backgrounds. It is much easier than trying to use images with alpha transparency in IE6, and it doesn’t use very many DIVs. This has been tested in the following browsers:

  • IE6
  • IE7
  • Firefox
  • Opera
  • Safari

EDIT (12/22/2008): I have added a complete example that is listed below. I have also tweaked some of the above code, so that it matches the specific example below.

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);</script>
</head>
<body>
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <p style="color: #FFF; padding-left: 50px;">Here is the content.</p>
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <p style="color: #FFF; padding: 30px 50px 0px;">Here is the footer.</p>
  <!-- Footer Content goes here -->
</div>
</body>
</html>

A zip file of the above sample code with the background images can be downloaded here.

Encoding HTML Entities with Javascript

By Nick Little on June 18, 2008 at 6:23 pm in Technical

Today I needed to use a bit of javascript to modify the contents of a web page. However, the section of the page I was changing was being updated with user entered content. I wanted the content on the page to show exactly what the user typed, meaning that I had to make sure that if the user entered any valid xhtml code it was encoded correctly. I searched around on google and found next to nothing on the topic, so I decided to create my own.

I used the php function “htmlspecialchars” as the basis for my function. I looked up the replacements that this functions uses. It turns out that only four characters need to be replaced to properly encode the contents: &, <, >, and “. Here is the function:

function htmlEncode(str) {
  return str.replace(/&/g, '&amp;').replace(/"/g, '&qout;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

The only thing I had to watch was that the ampersand character was encoded before the others, since it is used for encoding the others.