0

So I'm using this jquery plugin to have turnable cards. They're made by a div with the class card which has two appending divs with the class front respectively back. Each card has a different id (card-1, card2 etc.) witch different x and y coordinates, because, they're slightly offset, so you can see the edge of the next card. So this function is to make the cards "flippable":

 $(function(){
    $(".card").flip({
        axis: "y",
        reverse: "false",
        trigger: "click",
        speed: 700,
        front: 'autostrict',
        back: 'autostrict'
    });
});

And for the loop i got this script:

     var i = 1;
     var l = 10;
     var t = -238;
     var z = 2;
//nrFragen is gotten from a db, at the moment it equals 2

 while (i <= (nrFragen)) {

        var newDiv = document.createElement('div');
        var frontDiv = document.createElement('div');
        var backDiv  = document.createElement('div');
        newDiv.className = 'card';
        newDiv.id = 'card-' + i;
        newDiv.style.left = l + "px";
        newDiv.style.top = t + "px";
        newDiv.style.zIndex = z;
        frontDiv.className = 'front';
        backDiv.className = 'back';
        newDiv.appendChild(frontDiv);
        frontDiv.innerHTML = frontDiv.innerHTML + "Front";
        newDiv.appendChild(backDiv);
        backDiv.innerHTML = backDiv.innerHTML + "Back";
        document.getElementsByTagName('body')[0].appendChild(newDiv);

        i++;
        l += 10;
        t -= 10;
        z++;
}

And this is the CSS:

.card {
    position: absolute;
    width: 400px;
    height: 248px;
 }

.front, .back {
    background-color: #F3ECE2;
    border: 5px blue solid;
    padding: 10px;
    border-radius: 25px;
}
    #card-0{
    left: 0px;
    top: 0px;
    z-index: 1;
}

There is allready a card-0 which is set with

<div class="card" id="card-0">
<div class="front">
    Kategorie 1
</div>
<div class="back">
    <a href="index.html"> Alle Kategorien</a>
</div>

If I'm running it nothing's happening, so what did I do wrong?

loelu
  • 85
  • 10
  • Does the loop run before or after your call to `.flip()`? Also, you might want to look at the jQuery methods for creating elements/assigning attributes/classes etc since you're using it already. – James Thorpe Oct 05 '15 at 16:21
  • Then [this question](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) may be a duplicate, assuming your loop works correctly - essentially you're trying to get hold of an element before it exists. – James Thorpe Oct 05 '15 at 16:23
  • 1
    Wrong order: [fiddle](http://jsfiddle.net/yqxfpjd2/) and have a look at [Node.cloneNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) – Andreas Oct 05 '15 at 16:23
  • Thanks a lot @Andreas , works perfectly :) – loelu Oct 05 '15 at 16:37
  • By the way, `document.getElementsByTagName('body')[0]` is the same as `document.body`. – Mr Lister Oct 05 '15 at 17:13

0 Answers0