• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 320
  • Last Modified:

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!
0
peps03
Asked:
peps03
  • 6
  • 4
1 Solution
 
dtocciCommented:
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.
0
 
peps03Author Commented:
hmm good idea.
maybe this can be combined with someway of auto generating the divs and the navigation.
0
 
rationalbossCommented:
<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';
   }
   if (num == 53) {
      num = 1;
   }
   $('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

0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
peps03Author Commented:
Haha! Wow great!!

This is exactly what i was looking for!!

Thank you very much!
0
 
peps03Author Commented:
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
0
 
rationalbossCommented:
What do you mean? No card should be draw on the 53rd time?
0
 
peps03Author Commented:
yes, the cards should stop showing on the 53rd click.
0
 
rationalbossCommented:

<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

0
 
peps03Author Commented:
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..

0
 
rationalbossCommented:
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

0
 
peps03Author Commented:
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!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now