Handling DIVs for own effects

Handling DIVs for own effects

hi,

now i've a question too, but i think it could be a little discussion.

i have a litte function which takes the original dom element and "split" it to many stripes or boxes like:
clone element, wrap element with div, place div absolute with smaller width and height to create a raster and then put a clone of the orginal element relative with negative top and left css rules so it should look as the original but splitted in stripes or boxes

but when i animate those peaces there are spaces between the divs from time to time, so not every time appending to the number of rows/cols i create

simple example:
original image width 200px, 10 stripes vertical means 20px width each ... thats no problem
but
when i habe a width of 225px and i want 10 stripes that meas 22,5px width each, whats not really possible

browsers are rendering differently, some with space between some divs, some without those spaces


one solution could be the manual rounding down (Math.floor) the width, and put the "rest" to the last col (for example)

width 225px -> col 1-9 (22px), col 10 (225 - 22 * 9 = 27px)
so you see, thats a problem
when i use more than 10 peaces the last col could be much bigger than the others

maybe someone knows more about that problem ^^

here ist my function:

  1. // create stripes or boxes
  2. function boxing(playground, elem, rows, cols) {
  3.    var w = playground.width() / cols,
  4.         h = playground.height() / rows,
  5.         r = 0,
  6.         c = 0,
  7.         i;
  8.     for (i = 0; i < rows * cols; i++) {
  9.         $(elem).clone().appendTo(playground).css({
  10.             'position': 'absolute',
  11.             'top': h * r * (-1),
  12.             'left': w * c * (-1)
  13.         }).wrap('<div />').parent().css({
  14.             'position': 'absolute',
  15.             'top': h * r,
  16.             'left': w * c,
  17.             'overflow': 'hidden',
  18.             'width': w,
  19.             'height': h
  20.         });
  21.         c++;
  22.         if (c == cols) {
  23.             c = 0;
  24.             r++;
  25.         }
  26.     }
  27. }
playground is a div which replaces the original element (same height, width, margin, .....)
elem is the original jQuery element $(...)
cols and rows are numbers which i set as paramter like, 1 row and 10 cols (for vertical stripes) or 8 rows and 6 cols (for boxes), ....