?
Solved

best way to make navigation through 52 small divs

Posted on 2011-03-01
11
Medium Priority
?
260 Views
Last Modified: 2012-05-11
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
Comment
Question by:peps03
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
11 Comments
 
LVL 3

Expert Comment

by:dtocci
ID: 35012465
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
 

Author Comment

by:peps03
ID: 35012514
hmm good idea.
maybe this can be combined with someway of auto generating the divs and the navigation.
0
 
LVL 8

Accepted Solution

by:
rationalboss earned 2000 total points
ID: 35013260
<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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Closing Comment

by:peps03
ID: 35015273
Haha! Wow great!!

This is exactly what i was looking for!!

Thank you very much!
0
 

Author Comment

by:peps03
ID: 35023312
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
 
LVL 8

Expert Comment

by:rationalboss
ID: 35023417
What do you mean? No card should be draw on the 53rd time?
0
 

Author Comment

by:peps03
ID: 35023441
yes, the cards should stop showing on the 53rd click.
0
 
LVL 8

Expert Comment

by:rationalboss
ID: 35023573

<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
 

Author Comment

by:peps03
ID: 35023640
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
 
LVL 8

Expert Comment

by:rationalboss
ID: 35023662
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
 

Author Comment

by:peps03
ID: 35023691
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

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question