asked on

best way to make navigation through 52 small divs

Hi

I have a card-deck that will be shuffled on every page load. I want to load
(<? echo $numbers[0] ?> 0= card 1 , 51 = card 52)
each card in a separate div and want only one div to be visible at a time. when the div (or the card) is clicked the next card should be shown. so without the page being reloaded, otherwise the cards are shuffled again..

What would be the best / easiest way to do this?

Thanks!

dtocci

Set them up in divs and modify their z-index with javascript on the onClick event. I'm sure someone can give you an example.

peps03

ASKER

hmm good idea.
maybe this can be combined with someway of auto generating the divs and the navigation.

ASKER CERTIFIED SOLUTION

rationalboss

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

peps03

ASKER

Haha! Wow great!!

This is exactly what i was looking for!!

Thank you very much!

peps03

ASKER

rationalboss, could i ask you 1 more question concerning your script?

Now, when the whole deck is clicked trough, after card 52, and you click for the 53de time, it starts over, how can i make it only do 1 cycle?

Thanks and thanks again for the great script!

Kind regards

rationalboss

What do you mean? No card should be draw on the 53rd time?

peps03

ASKER

yes, the cards should stop showing on the 53rd click.

rationalboss

<html>
<head>
<title>Sample Cards</title>
<head>
<style type="text/css">
.none { display: none; }
.card { border: 1px solid #000; width: 100px; height: 200px; font-size: 3em; text-align: center; cursor:pointer; }
</style>
<script type="text/javascript">
function $(a) { if (document.getElementById) { return document.getElementById(a); } else { if (window[a]) { return window[a]; } } return null; }
function show_card(num) {
   if (num > 1) {
      $('card_'+(num-1)).style.display = 'none';
   }
   // THE FOLLOWING BLOCK RESETS CARD_ID TO 1
   // you can comment this out but be sure it doesn't execute the last block since
   // card_53 does not exist
   if (num == 53) {
      //num = 1;
   }
   if (num<53) $('card_'+num).style.display = 'block';
}
</script>
</head>
<body>
<?php
$cards = "A,1,2,3,4,5,6,7,8,9,10,J,Q,K";
$cards = explode(',',$cards);
$suits = "&#9824;,&#9829;,&#9830;,&#9827;";
$suits = explode(',',$suits);
foreach ($suits as $suit) {
   foreach ($cards as $num) {
      $deck[] = $num . ' ' . $suit;
   }
}

shuffle($deck);

for ($x=1;$x<=52;$x++) {
   $next = $x+1;
   echo "<div class=\"card none\" id=\"card_$x\" onclick=\"show_card($next);\">$deck[$x]</div>";
}
?>
<a href="javascript:;" onclick="show_card(1);this.style.display='none';">Load Deck</a>
</body>
</html>

Open in new window

peps03

ASKER

Great, that works! thanks!

One last thing, you accidentally also put a "1" in the deck, i removed that, but now the 52th card doesn't show, it shows as a blank card.

if you click once more, on the blank card, the deck disappears, as it should..

rationalboss

oh yeah.. :)
it's actually a problem with the for loop that started with 1 and not 0.

<html>
<head>
<title>Sample Cards</title>
<head>
<style type="text/css">
.none { display: none; }
.card { border: 1px solid #000; width: 100px; height: 200px; font-size: 3em; text-align: center; cursor:pointer; }
</style>
<script type="text/javascript">
function $(a) { if (document.getElementById) { return document.getElementById(a); } else { if (window[a]) { return window[a]; } } return null; }
function show_card(num) {
   if (num > 1) {
      $('card_'+(num-1)).style.display = 'none';
   }
   // THE FOLLOWING BLOCK RESETS CARD_ID TO 1
   // you can comment this out but be sure it doesn't execute the last block since
   // card_53 does not exist
   if (num == 53) {
      //num = 1;
   }
   if (num<53) $('card_'+num).style.display = 'block';
}
</script>
</head>
<body>
<?php
$cards = "A,2,3,4,5,6,7,8,9,10,J,Q,K";
$cards = explode(',',$cards);
$suits = "&#9824;,&#9829;,&#9830;,&#9827;";
$suits = explode(',',$suits);
foreach ($suits as $suit) {
   foreach ($cards as $num) {
      $deck[] = $num . ' ' . $suit;
   }
}

shuffle($deck);

for ($x=0;$x<52;$x++) {
   $y = $x+1;
   $next = $y+1;
   echo "<div class=\"card none\" id=\"card_$y\" onclick=\"show_card($next);\">$deck[$x] (#$y)</div>";
}
?>
<a href="javascript:;" onclick="show_card(1);this.style.display='none';">Load Deck</a>
</body>
</html>

Open in new window

peps03

ASKER

Ok it works!! Great thanks a lot!

i did change this:
onclick=\"show_card($next);\">$deck[$x] (#$y)</div>
to:
onclick=\"show_card($next);\">$deck[$x]</div>

Thanks again!