Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

How to Shuffle the Deck With Java Script

By Stephen Bucaro

An element on a webpage can be overlapping or on top of another element. If you specify several elements positions such that they overlap or are on top of each other, by default they are stacked from bottom to top in the order that their code appears in the webpage document. The relative position of an element in the stack is indicated by a number called its z-index. The lower the z-index, the closer the element will be to the bottom of the stack. An element's z-index can be a negative number.

In this article, I demonstrate how to get and set a webpage element's z-index. In this example I display a small deck of playing cards. When you click on a card, it moves to the top of the stack. When you double-click on a card, it moves to the bottom of the stack. You can probably think of many interesting applications for the principles demonstrated in this article. Below is a working example of the code that I will provide.

The code to achieve this effect is amazingly simple. Each playing card image is contained within a div element. Each div is given an id attribute and a style attribute. The id attribute is used to refer to each specific card to get and set its z-index. The style attribute sets the location and initial z-index of each playing card image. The code for this is shown below.

<div id="card1" style="position:absolute; left:0px; top:0px; z-index:0;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_a.png"></div>
<div id="card2" style="position:absolute; left:30px; top:30px; z-index:1;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_2.png"></div>
<div id="card3" style="position:absolute; left:60px; top:60px; z-index:2;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_3.png"></div>
<div id="card4" style="position:absolute; left:90px; top:90px; z-index:3;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_4.png"></div>
<div id="card5" style="position:absolute; left:120px; top:120px; z-index:4;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_5.png"></div>

In the code above, note that the position property is set to absolute. The left and top properties set the upper-left corner of each playing card image to its desired position on the webpage. The z-index property sets the stacking order of the cards. If you would like to try this example on your own webpage, right-click on each card and in the popup menu that appears, select "save Picture As...". Then in the "Save Picture" dialog box that appears navigate to a folder where you want to save the image file.

In the code, each div defines two events, onclick and ondblclick. When you click on a playing card, the onclick event calls a Java Script funtion named movetoFront, passing a reference to the div element to the function. When you double-click on a playing card, the ondblclick event calls a Java Script function named movetoBack, passing a reference to the div element to the function. Shown below is the code for the movetoFront function.

function movetoFront(card)
{
  for (var i = 1; i <= 5; i++)
  {
    var id = "card" + i;
    if(card.id == id) document.getElementById(id).style.zIndex = 4;
    else
    {
       var index = document.getElementById(id).style.zIndex;
       if(index > 0) document.getElementById(id).style.zIndex = index - 1;
    }
  }
}