Solved

best way to make navigation through 52 small divs

Posted on 2011-03-01
11
249 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
  • 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 500 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Detect which div element is visible? ***Javascript Only solution*** 4 21
jQuery Toggle & Anchor Links 5 43
100% tall div not scrollable on iPhone 3 20
Ahax pagination 9 33
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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 the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

829 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