twilitegxa Posted September 11, 2009 Share Posted September 11, 2009 I have the following page, and I want to make it to where, if the user clicks a character from the list, that it will display their stats in the div tag on the right. I want the div tag to be hidden until a user clicks one of the characters, and then when they click it, it then displays the stats. Right now, I don't have it initially hidden. How can I make it hidden until they click the character? How can I make a link that will display the stats when the user clicks the character? I need to base the results on which identity the user chooses. Here is my page so far: <?php session_start(); if(!isset($_SESSION['loggedIn'])) { header("Location: login.php"); } ?> <?php include("connect_db.php"); ?> <html> <head> <title>Choose Character</title> <style type="text/css" media="screen"> /*<![CDATA[*/ @import url(global.css); /*]]>*/ </style> </head> <body> <!-- HEADER --> <h1 class="logo">Sailor Moon RPG</h1> <!-- /HEADER --> <?php include("topnav.php"); ?> <div id="main"> <?php include("includes/log.php"); ?> <?php include("mainnav.php"); ?> <h3>Which character would you like to play?</h3> <?php echo "<table><tr><td valign=top>"; //verify Scouts exist in category and list if applicable $verify_category = "select id, identity, username from scouts where username = '".$_SESSION['userName']."'"; $verify_category_res = mysql_query($verify_category, $conn) or die(mysql_error()); if (mysql_num_rows($verify_category_res) < 1) { echo "<i>You have no Scouts created.</i> <a href=creationform.php>Create one</a>?<br>"; } else { echo "<b>Scouts:</b>"; while ($list_scouts = mysql_fetch_array($verify_category_res)) { $identity = ucwords($list_scouts['identity']); $scout_id = $list_scouts['id']; echo "<ul class=choose> <li>$identity</li> </ul>"; } } echo "<br>"; //verify Knights exist in category and list if applicable $verify_category = "select id, identity, username from knights where username = '".$_SESSION['userName']."'"; $verify_category_res = mysql_query($verify_category, $conn) or die(mysql_error()); if (mysql_num_rows($verify_category_res) < 1) { echo "<i>You have no Knights created.</i> <a href=creationform.php>Create one</a>?<br>"; } else { echo "<b>Knights:</b>"; while ($list_knights = mysql_fetch_array($verify_category_res)) { $identity = ucwords($list_knights['identity']); $scout_id = $list_knights['id']; echo "<ul class=choose> <li>$identity</li> </ul>"; } } echo "<br>"; //verify Female Dark Warriors exist in category and list if applicable $verify_category = "select id, identity, username from fdark_warrior where username = '".$_SESSION['userName']."'"; $verify_category_res = mysql_query($verify_category, $conn) or die(mysql_error()); if (mysql_num_rows($verify_category_res) < 1) { echo "<i>You have no Female Dark Warriors created.</i> <a href=creationform.php>Create one</a>?<br>"; } else { echo "<b>Female Dark Warriors:</b>"; while ($list_fdark_warriors = mysql_fetch_array($verify_category_res)) { $identity = ucwords($list_fdark_warriors['identity']); $scout_id = $list_fdark_warriors['id']; echo "<ul class=choose> <li>$identity</li> </ul>"; } } echo "<br>"; //verify Male Dark Warriors exist in category and list if applicable $verify_category = "select id, identity, username from mdark_warrior where username = '".$_SESSION['userName']."'"; $verify_category_res = mysql_query($verify_category, $conn) or die(mysql_error()); if (mysql_num_rows($verify_category_res) < 1) { echo "<i>You have no Male Dark Warriors created.</i> <a href=creationform.php>Create one</a>?<br>"; } else { echo "<b>Male Dark Warriors:</b>"; while ($list_mdark_warriors = mysql_fetch_array($verify_category_res)) { $identity = ucwords($list_mdark_warriors['identity']); $scout_id = $list_mdark_warriors['id']; echo "<ul class=choose> <li>$identity</li> </ul>"; } } echo "<br></td>"; $get_stats = "select * from stats where identity = '$identity'"; $get_stats_res = mysql_query($get_stats, $conn) or die(mysql_error()); while ($stats_info = mysql_fetch_array($get_stats_res)) { $body = $stats_info['body']; $mind = $stats_info['mind']; $soul = $stats_info['soul']; echo "<td valign=top> <div id=chosen> Body: $body<br> Mind: $mind<br> Soul: $soul<br><br>"; //insert derived values statement echo " Health Points:<br> Energy Points:<br> Attack Combat Value:<br> Defense Combat Value:<br>"; } echo "</div><br> <input type=button value=Choose></td></tr></table>"; ?> </div> <?php include("bottomnav.php"); ?> <!-- FOOTER --> <div id="footer_wrapper"> <div id="footer"> <p>Sailor Moon and all characters are<br> trademarks of Naoko Takeuchi.</p> <p>Copyright © 2009 Liz Kula. All rights reserved.<br> A product of <a href="#" target="_blank">Web Designs By Liz</a> systems.</p> <div id="foot-nav"><!-- <ul> <li><a href="http://validator.w3.org/check?uri=http://webdesignsbyliz.com/digital/index.php" target="_blank"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></li> <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://webdesignsbyliz.com/digital/global.css" target="_blank"><img class="c2" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a></li> </ul> --></div> </div> </div> <!-- /FOOTER --> </body> </html> </body> </html> Is this a JavaScript thing? Or would I need to use JQuery? Can someone help? Quote Link to comment Share on other sites More sharing options...
kratsg Posted September 11, 2009 Share Posted September 11, 2009 jQuery IS javascript... just a framework to work with. Use the following style tag for initially hiding it on page load: #chosen {display:none;} When a link is clicked, you can do the following: <script type="text/javascript"> var x = document.getElementsByTagName('a'); for(i=0;i<x.length;i++){ x.onclick = function(e){ document.getElementById('chosen').style.display = 'inline'; return false; } } </script> again, because you didn't give your links a class name or an identifier of any sort, this is why I've done a getElementsByTagName method. Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted September 11, 2009 Author Share Posted September 11, 2009 The hidden part works, but when I click the links, the div doesn't display. Also, how would I get the chosen character's information to display in the div? I don't know how to do that part either :-( Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted September 11, 2009 Share Posted September 11, 2009 A few things: 1. Remember that an ID is supposed to be unique. The while-loop that you use creates several divs with an id attribute of 'chosen'. This is logically wrong. You'll either need to create a unique id for each, or give them all the same class name. 2. The easiest way for this to work would be to give each unordered list (ul tag) its own id. That would greatly simplify the JavaScript, as it would make it easier to find which elements should trigger the display when clicked. Tying it to all hyperlinks is a bad idea. 3. The basics of kratsg's approach will work, but you should change the display to block rather than inline. Divs are block elements. A final solution depends on what you do in steps 1 and 2. Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted September 12, 2009 Author Share Posted September 12, 2009 How can I create a unique id for each div in the way the loop is being run? I will give each ul a unique id while await your response. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted September 12, 2009 Share Posted September 12, 2009 How can I create a unique id for each div in the way the loop is being run? I will give each ul a unique id while await your response. Add a counter to the id name. $count = 0; while (/* your db condition */) { . . . echo "<div id='chosen" . $count . "'>"; ++$count; . . . } Obviously this is just a sketch, but you initialize a counter outside this loop, add the counter to the id name, and finally increment the counter for the next iteration. Starting with the counter at 0 smooths things for the JavaScript, based on the way that script will be constructed. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.