Bedrich Rios

As I was browsing my ridiculously large and disorganized RSS feeds a few days ago, I came across a very interesting article that discusses the “benefits” of using zebra-striping on tables. The article was titled Zebra Striping: Does it Really Help? and it was published on A List Apart. In short, the author of the article discusses the use of zebra-striping, its history, and the benefits which are associated with its use. Furthermore, she describes and attempts to make sense of a small experiment carried out by herself in order to test the “benefits” linked to zebra-striping. The article concludes with the author’s assesment of zebra-striping as valuable in terms of visual appeal but with little to no influence on usability. As a concluding statement she writes, “At the end of the day, the decision about whether to use zebra striping probably comes down to a subjective assessment of likely gains versus the cost of implementation.” So, let’s make the cost of implementation minimal by using some simple jQuery and CSS. Before we begin, here is a sneak peak at the final result.

jQuery Zebra Stripes Script

There are many ways to implement a zebra-striping script using jQuery, and I will demonstrate one of them. The following approach uses a function, which takes two (optional) parameter and creates a specified CSS class for all the even rows of a given table. However, if the function is called without any parameters all even rows on tables will be given the class “even-row.” Here is what the script looks like:

Note: the above script is calling the function with no parameter and thus will reset to the default rules.

Add Some Style

Now that our script is complete and working, let’s add some color to the newly created class, “even-row.” Remember that this class name is given because we did not specify parameters when we called the function on the script above. So, here is what the “even-row” CSS for the demo looks like:

Note: the ID content is targeting a div of the same name on the example file. Thus, when implementing your own CSS rules remove it.

Use, Installation, and Download

In case you overlooked the sneak preview link at the beginning of this post, take a look at the script in “action” by clicking this demo link. This script is free for your use or modification. However, you need to download and install jQuery for the zebra-striping to work. In other words, the of your document will have to include the following files and look something like this:

In any case, enough talking (writing), download the script and enjoy!

zebra_stripes.js

As a web designer, I spend countless hours designing web pages in Photoshop. Of course, this happens only after thoughtful consideration with regards to the site’s layout and several sketch iterations, otherwise know as the framework. In any case, this process may get overly repetitive as you begin to receive a more steady work flow. So, wouldn’t it be nice to automate some of this process? If you are anything like me, you are thinking: “yes it would be.” Therefore, it is time to turn our attention to one of the greatest features in Photoshop, actions. Photoshop actions can record any given set of steps and store them for later usage. Thus, we can use actions to create a simple yet read-to-use Photoshop file for our web design purposes. This file will contain the “scaffold” for our design. In other words, this file will free us of the mundaneness that comes from setting up a Photoshop environment every time we begin a new website’s design. Note: I use Photoshop CS2. So, some of the steps demonstrated here may vary depending on your software’s version.

Creating My Photoshop Action

So, let’s open Photoshop and get to work. Here are the steps that I’ve taken to create my own action:

1. Go to Windows -> Actions.
2. Create a new set and name it Web Design Actions.
3. Now, create a new action and name it Framework. From this point on the action will begin recording your every move until you press the stop button.
4. Create a new document (I usually work with an 800×600 to begin with) by going to File -> New. Also, unlock (double clicking it will do the trick) the background layer, and name it Background.
5. Create groups for all the necessary sections of a regular site and name them appropriately.  I usually start with a group for the header, navigation, content, sidebar, and footer.
6. Now, give yourself some guides. Simply click on the left side ruler and drag to your desired position. I usually create two initial guides 25px away from the side edges of the canvas.
7. Finally, stop the action recorder. This will automatically save all the steps previously performed.

Make Your Own and Use It

Now that you know how to create a Photoshop action, make your own and use it every time a project comes your way. Soon you will realize the convinience of having a basic framework action. Furthrermore, by automatizing this routinary process you will save yourself valuable time. Enjoy!

Using coordinates to place an abolutely postioned element on a page may seem like a bit of an overkill when you can just assign the top, bottom, right, and left values in the CSS but believe me is not. I have used this effect in combination with the Text-Resize Detection script published on A List Apart to re-position an element next to another at all times (the project demanded this effect) regardless of window or text resizing. The things you can do with this nifty trick are only limited by your imagination. Look at a demo of the “trick” at work if you wish to see it before reading the tutorial. Enough rumbling, let’s begin.

Gathering Neccesary Information

There are a couple of things we are going to need to know before beginning to write the script and they are:

• The name (id or class) of the element we are trying to get the coordinates of, which I will call “static_box (id name)” during this tutorial.
• And, the name (id or class) of the element we are moving around, which I will call “moving_box (id name)” during this tutorial.

Now we can begin recreating what you saw on the demo. First, let’s start by creating the functions we will need in order to position the moving box to either the left or right of the static box. In this step we will write the commands for the main function only. In other words, we will absolutely position the moving box and give it top and left values.

function position_left()
{
	/* code will go here */
}

function position_right()
{
	/* code will go here */
}

function position(x,y)
{
	var moving_box = $("#moving_box");
	moving_box.css("position","absolute");
	moving_box.css("top",y);
	moving_box.css("left",x);
}

Now we need to record the coordinates of the static box and apply them to the moving box. However the actual X and Y coordinates will need to change a bit if we want things to line up correctly. We need to take padding and border into consideration and make them part of our equation. So with a bit of addition and subtraction involved in the equation, our empty functions should look something like this.

function position_left()
{
	var static_box = $("#static_box");
	var moving_box = $("#moving_box");
	var mb_width = moving_box.width();
	
	var coordinates = static_box.offset()
	var x = coordinates.left - mb_width;
	var y = coordinates.top;
	position(x,y);
}

function position_right()
{
	var static_box = $("#static_box");
	var sb_width = static_box.width() + ["static_box total padding + total border"];
	var coordinates = static_box.offset()
	
	var x = coordinates.left + sb_width;
	var y = coordinates.top;
	position(x,y);
}

function position(x,y)
{
	var moving_box = $("#moving_box");
	moving_box.css("position","absolute");
	moving_box.css("top",y);
	moving_box.css("left",x);
}

That is all the code you need to recreate what you saw on the demo. However, you will need to call either function position_right or position_left for things to work. In the case of the demo, the functions are being called by an “onclick” function attached to the link elements.

Download

Please feel free to play around with the code and make any tweaks to it. If you have any questions or something is not working right for you, leave a comment and I will try to answer your question(s).

Download Demo