Solved

best way to make navigation through 52 small divs

Posted on 2011-03-01
11
245 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now