Auto Rounding Width

Summary

An experiment in rounding up list item (<li>) widths to the next grid line. Made for Flash Experiments portal, where I made the list items round up their widths to the end of the frame like in Flash.

The entire thing is accessible so that if JavaScript is turned off, the preset CSS widths will be displayed. Otherwise the JavaScript will replace them if JS is turned on.

This experiment precedes another experiment that adds up the widths of these list items and determine the minimum page width so the list items will not stack upon page shrinking.

Things learned:

  1. element.style.width only sets the width and can't return the value; element.offsetWidth does that.
  2. Remember to add px when setting a style measurement via JS; it works just like in CSS.
  3. When running through an array, the typical end value in the for loop should be "less than" (<) and not "less than or equal to" (<=). It caused me grief when my Firebug kept saying the item has no properties. That's because I made the loop run past the number of arrays, resulting in a request for nothing.

Example

Date Created

25 Feb 2008.

Help

  1. w3schools.com
  2. http://www.thescripts.com/forum/thread460556.html for where I discovered the JavaScript properties offsetWidth, among other offsetWhatever properties, which returns (as opposed to "setting") the current value of the element property.
  3. http://www.litfuel.net/plush/?postid=101 for reminding me the pickiness of programming accuracy. Make sure you include "px" when defining style measurements via JS.
  4. http://www.jslint.com/ for fun. It's a tool to help write JS the most accurate way possible. Not sure how valid and necessary the rules are. But fun to be accurate and problem-free sometimes.

Process

Lots of display-only steps to make sure I'm doing it right. Made/fixed some mistakes along the way.

  1. Make a list. Add a gridded background
  2. Display the number of list items (Experiment only).
  3. Display widths of the list items of the first row(Experiment only).
  4. Display widths of rest of the list items (Experiment only).
  5. Preset list item widths in CSS as backup.
  6. Use JS to remove CSS styling of widths.
  7. Round up the offsetWidth to the next multiple of 8.
  8. Set the new values to fit within the context of the list items (e.g. accomodating to border widths.)
  9. Debug for Opera 9 so that the it can read the CSS removal via JS.
  10. Remove display only variables (Experiment only).
  11. Refine the rounding formula. Fixed for loop condition. (Optional)

The Code

Here’s the code. Please link back here if you’re using it.

Place this CSS in the head tag.

ul#list1 li{
list-style-type:none;
float:left;
border-left:1px solid #000;
padding:0 16px 0 8px;
width:303px; /* a multiple of 8 minus 1 for the left border */
}

Place this JavaScript in the head tag.

//Redefine the width so Opera won't be confused later when width="auto" renders to 100%
//This also makes all the browsers with JS enabled to read it as auto

document.write("<style type='text/css' >ul#list1 li{width:auto;}</style>");

Place this HTML in the body tag.

<ul id='list1' >
<li class='listItem' >Put list item content here. Repeat <li class="listItem">'s as needed.</li>
</ul>

Place this JavaScript at the end of the body tag.

function doIt() {

var listItem = document.getElementById("list1").getElementsByTagName("li");
for (var i = 0;i < listItem.length;i += 1) {
//Make the math works so your list items line up with the grid.
listItem[i].style.width = 8-((listItem[i].offsetWidth-1)%8) + listItem[i].offsetWidth -26 + "px";
}

}

onload = doIt;

Return to top