CODEWITHSUNDEEP
javascriptcssrepeat
user1869575
user1869575

Reputation: 31

Dynamically repeat/tile div and child(s)?

I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.

Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.

The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.

Here is the css:

#fadediv {
    background-image:url(images/buttonback.png);
    transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
}

#fadediv:hover {
    background-image:url(images/buttonback2.jpg);
}

.fadedivtext {
    display:block;
    width:320px;
    height:138px;
    float:left;
    font-size:30px;
    color:#FFF;
    text-align:center;
    line-height:138px;
}

And the HTML snippet:

<div id="fadediv" class="fadedivtext">about me</div>

EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.

Upvotes: 3

Views: 1817

Answers (1)

McGarnagle
McGarnagle

Reputation: 102763

I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).

Here's a basic example using JQuery's clone: 

var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
    var newEl = el.clone();
    $("#container").append(newEl);
}​

http://jsfiddle.net/9P7bY/2/

Edit

This is a comment left by aug:

Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else

newE1.attr("id", newId);

Upvotes: 2

Related Questions