Preventing a Click Action

General PHP Help
#1

Here is the page that I am needing help with: http://gameageddon.com/elitetrainer/pokecenter.php

This page used to be super long and you had to scroll for each of the prizes, so I wanted to make it much simpler. I know it can be done also with AJAX/Javascript, but I was having trouble getting the coding to work so I found a php alternative.
I have it so the players in my tcg can click on each box and the prizes will appear. I got that working, however, the players need to be able to save the images that appear in the box and also highlight the prize underneath. The problem is that any click will instantly close what was in the box.

How can I make it so that they can at least click inside of the box and it does not revert the box back to it’s default view?

Here is a sample of the code from the page:
[php]

#button1:focus~#content #def, #button2:focus~#content #def, #button3:focus~#content #def, #button4:focus~#content #def {display:none;} #button1:focus~#content div:nth-child(2), #button2:focus~#content div:nth-child(3), #button3:focus~#content div:nth-child(4), #button4:focus~#content div:nth-child(5) {display:block;} #content { border:1px dashed black; color:white; font-size:10px; text-align:center; } #pokemon,#other,#elite, #champ {display:none;} 
            <center><h2>Deck Mastery Rewards</h2></center>
            <center>Pokemon (Non Legendary/Mega/Primal) - Please make sure you also have the appropriate pokeball.<br>
                    Other - Trainers, Gym Leaders, and Other Decks (For Trainers, please make sure to take 100 pokedollars for each mastery.)<br>
                    Elite - Elite 4 Decks<br>
                    Champion/Lendary - For Champions and also Legendary, Mega, and Primal Pokemon (Make sure you have master balls for these.)<br>
                    You will need to refresh for multiple masteries of the same type.<br><br></center>

Reward cards will appear in this box.


<?php $card1= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)]; $card2= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)]; $card3= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

echo “\n”;
echo “\n”;
echo “
\n”;

$term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);
$term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);
$term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);
echo "(deckname) Captured: " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];
?>


<?php $card1= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)]; $card2= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)]; $card3= $medium[array_rand($medium,1)] . $digits[array_rand($digits,1)];

echo “\n”;
echo “\n”;
echo “
\n”;

$term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);
$term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);
$term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);
echo "(deckname) Defeated/Mastered: " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];
?>


<?php $card1= $medium[array_rand($medium,1)] . $digits[array_rand($digits,1)]; $card2= $medium[array_rand($medium,1)] . $digits[array_rand($digits,1)]; $card3= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

echo “\n”;
echo “\n”;
echo “
\n”;

$term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);
$term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);
$term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);
echo "(deckname) Defeated: " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];
?>


<?php $card1= $special[array_rand($special,1)] . $digits[array_rand($digits,1)]; $card2= $special[array_rand($special,1)] . $digits[array_rand($digits,1)]; $card3= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

echo “\n”;
echo “\n”;
echo “
\n”;

$term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);
$term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);
$term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);
echo "(deckname) Defeated/Captured: " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];
?>

[/php]
#2

Hi Nejana,
Well first of all, this page is really malformed. Basically it is doing exactly what you are requesting it to do. One way to do this is to move the tag into its own

and then onclick change the hidden div to block.

Take a look at these examples:

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

#3

I finally got to this as I’ve been super busy at work. I used the code that you had on the codepen site as it felt easier to understand. My test page is http://gameageddon.com/elitetrainer/safari.php

My question is now: How do I get it to start off as hidden and only show when it is clicked on?

#4

Check out this CodePen: https://codepen.io/jessicabrown1028/pen/gxBLPP?editors=1111

Also keep in mind that I put this together in 5 minutes since I have to get ready for work… If you don’t understand it, let me know, if I get time today I will try to clean it up

#5

Your code was very easy to read. Thank you for it. I made a test page here: http://gameageddon.com/elitetrainer/safari2.php Where I have started to implement the new code. Thank you very much for helping me with this!!

#6

I would recommend that you place your tags inside your or place it without the tags inside your style.css file and the tag just above your tag.

Finally I would also start your code with

So it would be like this:

<!DOCTYPE html>
<head>
<title>Elite Trainer - A Pokemon TCG</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
#myDIV-1 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-2 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-3 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-4 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-5 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-6 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-7 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-8 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-9 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-10 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}

#myDIV-11 {
  width: 75%;
  padding: 5px 0;
  border:1px dashed #E75273;
  text-align: center;
  display: none;
  background-color: #296339;
}
</style>
</head>
<body>

... {ALL YOUR HTML}

<script language="javascript">
function myFunction(y) {
   if (y === undefined) {
      y = 1;
   }
   var x = document.getElementById('myDIV-'+y);
   if (x.style.display === 'block') {
     x.style.display = 'none';
   } else {
     x.style.display = 'block';
   }
}
</script>
</body>
#7

All of the pages on my site share the same header and footer so I use the php include tags. I didn’t want to put the style inside the head part because it is only being used on certain pages.

My site also used to have to start with but it was messing up some of the formatting and putting spaces between lines of images that I did not want.

#8

The first one is totally incorrect that is the reason for CSS is to be able to style a page. You must be doing something wrong for I use header and footer php include files. Here’s my include files:

header.inc.php
[php]

<?php if (filter_input(INPUT_SERVER, 'SERVER_NAME', FILTER_SANITIZE_URL) == "localhost") { echo ''; } else { echo ''; } 
    $title = ['Index' => 'A Slice of Technology - Learning from Technology', 'About' => 'About John Pepp - Owner - Slice of Tecnology', 'Blog' => 'Online Blog Everyone', 'Calendar' => 'Calendar - Blog', 'Contact' => 'Contact - John Pepp', 'Login' => 'Login - Registration - a Slice of Technogy', 'Members_page' => 'Member Only Page', 'Daily' => "Daily Blog"];
    ?>

    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta name="description" content="A Slice of Technology - Learning from Technology" />
    <meta name="keywords" content="tech, cms, tech news, calendar, social, technology, web development, web design, php, monthly calendar, blog, blog sites, social network, raspberry pi, social media, images photos, social sities" />
    <title><?= $title[$pageName]; ?></title>
    <link rel="stylesheet" href="assets/css/stylesheet.css">
    <link rel="shortcut icon" href="favicon.ico" >
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>

<body>
    <header class="container header-banner">
        <h2 class="logo"><span>A Slice of Technology</span> <a href="index"></a></h2>
        <h1 class="website-name">A Slice of Technology</h1>
        <div class="socialMediaStyle">
            <ul class="socialIcons">
                <li><a href="http://www.facebook.com/PepstersPlace" target="_blank"><img src="assets/images/img-facebook-logo-25x25.png" alt="A Slice of Technology FB Page" ></a></li>
                <li><a href="http://twitter.com/#!/Strider64" target="_blank"><img src="assets/images/img-twitter-logo-25x25.png" alt="Pepster's Twitter Profile" ></a></li>
                <li><a href="http://www.linkedin.com/in/johnpepp" target="_blank"><img src="assets/images/img-linkedin-logo-25x25.png" alt="John Pepp's LinkedIn Profile" ></a></li>
                <li><a href="http://www.flickr.com/people/pepster/" target="_blank"><img src="assets/images/img-flickr-logo-100x25.png" alt="John Pepp's Flickr Profile" ></a></li>
            </ul>
        </div>
    </header>
    <div class="container">
        <div class="mobileNav">
            <nav id="slider" class="slider"> <span class="slider-tab">&Congruent;</span>
                <ul class="slider-margin">
                    <li><a href="index">home</a></li>
                    <li><a href="about">about</a></li>                        
                    <li><a href="calendar"><span>calendar</span></a>
                    <li><a href="blog">blog</a></li>
                    <li><a href="members_page.php"><?php echo(is_logged_in()) ? "Members" : "Login"; ?></a></li>
                    <li><a href="contact">contact</a></li>
                    <?php echo (is_logged_in()) ? '<li><a href="logout.php">logout</a></li>' . "\n" : NULL; ?>
                </ul>
            </nav>
            <!-- END OF NAVIGATIONAL LINKS-->
            <div id="mobile-header">
                <p class="header-style">A Spice of Technology</p>
            </div>
            <!-- END OF MOBILE HEADER --> 
        </div>

        <div id="sticky" class="row navigational-wrapper">
            <nav class="slider"> <span class="slider-tab">&Congruent;</span>
                <ul class="slider-margin">
                    <li><a href="index">home</a></li>
                    <li><a href="about">about</a></li>                        
                    <li class="menu-trigger"><a class="mobile-menu" href="calendar"><span>calendar</span></a>
                        <ul class="drop">
                            <li><a href="blog" class="current">blog</a></li>
                            <li><a href="members_page.php">members</a></li>
                        </ul>
                    </li>
                    <li><a href="order">order</a></li>
                    <li><a href="contact">contact</a></li>
                </ul>
                <?php
                echo (!is_logged_in()) ? '<a class="login" href="login">login</a>' . "\n" : NULL;

                if (is_logged_in()) {
                    echo '<div class="logout">' . "\n";
                    echo '<span>Welcome, ' . $_SESSION['user']->username . '! <a href="logout.php">logout</a></span>' . "\n";
                    echo "</div>\n";
                }
                ?>
            </nav>
            <!-- END OF NAVIGATIONAL LINKS-->

        </div>
    </div>[/php]

footer.inc.php
[php]

©<?php echo date("Y"); ?> John R. Pepp

[/php]

as for messing up your “Formatting and spacing” that can easily be fix by initializing (resetting) you css. Do a google search on it and you find many initializing/resetting CSS scripts.

Here’s mine
reset.css (though you could put this at the top of your stylesheet if you just want to have one)

[code]/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, textarea, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;

}[/code]

You can have individual pages style differently (main section) and if you want a total different look just have a separate header and footer file or override the existing header/footer styles. That is why I say it’s always important to have a firm grasp of HTML/CSS and Javascript before tackling a backend language such a PHP.

Myself preference is to have my website(s) all the same look all throughout the site, by that I mean having the basic overall look, color theme and only using 2 or 3 different kind of fonts (usually one serif and one sans-serif font). That way a visitor isn’t scratching his or her head wondering if they are still on the same website.

Sponsor our Newsletter | Privacy Policy | Terms of Service