|
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.
| 
Free Downloads
RSS Feed