var mover = ie? '<span class="mover ie">.</span>'
Lines 1 - 8 put the mover into each header cell. Nothing special there.
Line 10 attaches the jQuery UI
draggable to each of the movers constraining
the movement of the mover to the x-axis. The
stop helper function on line 12
reattaches and styles the mover helper to show the height of the grid.
The real meat exists in the
stop function starting on line 19.
Line 20 gets the actual header cell whose width we’ll modify.
Line 21 calculates the horizontal padding for the header so we can subtract it from the overall width of the cell.
Line 23 determines the change in position that the mover went through.
Line 24 gets the index of the header cell.
Line 25 gets the
col tag associated with the column.
Lines 26 - 28 calculate the new column width, ensuring that it does not get thinner than a couple of minimum widths that ensure that IE continues to work correctly.
Line 29 sets the
width property to the newly calculated width.
Line 30 calculates the width of the header cell with respect to the padding of the cell.
Line 31 sets that new width.
Lines 32 and 33 calculate the new table width ensuring that it, too, does not get thinner than a specific minimum width.
Lines 34 and 35 set the width of the table both in the
width property of the
table and the “width” entry in the table’s
style attribute. I have to do
this because the
width property ensures that the table maintains its width
for values larger than its container. The “width” entry in the table’s
attribute ensures that the table maintains its width for values smaller than
Up next in tomorrow’s blog, I’ll discuss how I got focusing to work on the grid and navigate the cells with the keyboard.