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?