Question

My problem is this. I have a DIV which replicates an image using CSS3. This Div needs to be repeated at a set interval down one side of the page. I.e. every 200px. Is there a way to for this to be automated. Normally I would use a repeating bgimage but in this case no images are allowed. I also could repeat the div each time but it’s a large page that will be updated frequently with more content.

Any ideas would be very much appreciated.

Answer 1

I would do it like this:

document height / element height + 200px = x
place the element X times in to you document.

That’s it.

Spoken in jQuery this looks like that:

try it out here: http://jsfiddle.net/aF68z/

var repeatMe = function ( $o, space ){
  var oHeight,dHeight, multiplicator, res, html, $parent;

  dHeight = $(document).height(); //height of you document
  oHeight = $o.height(); //height of the element that shoud repeat 
  multiplicator = Math.floor(dHeight / (oHeight + space)); //how many time the element can repeat (including the margin)
  $parent = $o.parent(); //gets the parent that finally will hold all repeating items
  html = $parent.html(); //gets the HTML code of the element that repeats

  /* appending and cloning are very CPU heavy and it makes no sense to do so only for a visual matter, "string" + "string" etc... is very slow if the string becomes long, this is a simple trick how to avoid this: */
  res = [];  
  for (var i = 0; i < multiplicator; ++ i) {
    res.push(html);
  }
  html = res.join("");


  $parent.html(html); //appending the HTML of the all the repeated elements to the parent again.
};

repeatMe( $("div.deco div:eq(0)"),200 );

PS: At least try something on your own next time.