Jump to content

Display In Div Tag When Link Is Clicked?


twilitegxa

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.