Javascript Arranging Images as Pile of Cards

Question

Im new to javascript so im sure there is a lot i am missing in its understanding. What i am trying to do it create a layer of images so that it looks like a pile of cards.

have seen similar codes and have tried to follow their idea but i just cant get the images to position properly. All 10 or so images are place in the exact same location.

Can any help to see why they not positioning? Also what is "em". I cant find any literature on it but assume it is the measurement em like px ?? Why is it in "" ?

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
var img = document.createElement("IMG");
img.src = "wendell7_back.png";
el = document.getElementById('deck');
el.appendChild(img);
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top  = top + "em";
    el.appendChild(cardNode);
    left += 0.1;
    top  += 0.1;
}

   }

Answer 1

"em" is the width of an "M" in whichever font is being used (or browser's default font if nothing overrides it).

There are at least two things wrong in your code: left and top have no meaning unless the element to which they are applied also has position:absolute or position:relative (or position:fixed I think). Your safest approach is to apply position:relative (but no left: or top:) to the container and position:absolute to each of the cards. There's only one img. For multiple cards, you need multiple imgs otherwise the same img gets repositioned over and over. A more economical approach is probably to show a separate "stack" image for multiple cards and single card images for a single cards.

An even more economical approach is only to show single card images with a "tooltip" to indicate the number of cards in a stack. I have successfully employed this technique in an implementation of a game of patients.

Of course, these alternative techniques don't work if you want to show multiple cards as a "fanned out" stack of upturned cards. Create a class and modify the position of that for the deck. Here is the working code:

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
el = document.getElementById('deck');
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.className = "card2";
    var img = document.createElement("IMG");
    img.src = "wendell7_back.png";
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em";
    el.appendChild(cardNode);
    left += .1;
    top  -= 6.2;
}

}

Hope this will help.

Answer 2

There are a couple of problems with that code.

1. You're only using one img, and then you're appending it to each div you create. When you append an element to another element, if it's already in the DOM tree, you end up moving it. What you need is to create a separate img element for each card.

2. You haven't shown us your CSS, but unless you're using CSS to make all div elements under the #deck element absolutely or relatively positioned, the left and top style attributes will be ignored, as the div will be subject to normal flow.

Also what is "em". I cant find any literature on it but assume it is the measurement em like px ??

Yes, it's a term from typography. An "em" is the width of a capital letter M.

Why is it in "" ?

Because it's a string. You'd also have to have "px" in quotes. What you're doing with this code:

cardNode.style.left = left + "em";

...is using JavaScript to set a style property. Style properties are always strings, in this case you're creating strings like "0.1em" and "0.2em", etc.

Some reading:

• DOM2 Core specification
• DOM2 HTML specification
• DOM3 Core specification
• HTML5 specification
• Various CSS specifications
• A good book on JavaScript, I quite liked JavaScript: The Definitive Guide by David Flanagan
• A good book on CSS and HTML authoring

Answer 3

My guess is that your offset is too small: if you replace the "em" with "px" for test's sake, and increase the left and top variables by 10 instead of 0.1, I bet you'll see some results.

To explain the em: 1em is equal to the current font-size of the element. If you haven't set the font size it uses the browser default. If you set the font-size to be e.g. 20px on the body tag, then 1em will equal 20px.

Answer 4

Make sure that your 'cards' have the css property 'position' set - either to 'absolute' or 'relative'.