Display In Div Tag When Link Is Clicked?

twilitegxa · 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?

kratsg · 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.

twilitegxa · 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 :-(

KevinM1 · 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.

twilitegxa · 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.

KevinM1 · 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.

Sign In

Display In Div Tag When Link Is Clicked?

Recommended Posts

twilitegxa

Link to comment

Share on other sites

kratsg

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information