...

View Full Version : onclick show one hide the rest



kirkh34
11-12-2010, 02:01 PM
hello.... i am needing help writing a function that when onclick it shows a specific element id and hides all the rest of the the ids

i have php code that shows a list of colored boxes and when you click one it changes the color of a div... this works fine as i have used a changecss function... i have these colors in a database with their values and specific color names... what i am trying to do is when a color is clicked it will change the div and also print the color name....

i have made a php loop to print all the color names and i have the display as none... how can i add to the onclick function that changes the color to also put the display of the certain color name to "block" and then if you select another color it hides that one and shows the new color... any help is appreciated! i'm sorry if this is confusing

kirkh34
11-12-2010, 02:28 PM
foreach($colors as $color){

$sql2 = mysql_query("SELECT * FROM blanks WHERE id='$color' ")
or die(mysql_error());

$row = mysql_fetch_array($sql2);
$value = $row['color_value'];
$color_name = $row['color_name'];






echo "<ul class='colors'>";

echo "<li>";
echo "<a href='#' class='color_links' onclick=\"changecss('.template_fill','background-color','#" . $value . "');changecss('.magnifyarea','background-color','#" . $value . "');\"><img style='background-color:#" . $value . ";'/></a><br />";
echo "</li>";


} //end foreach

echo "</ul>";

foreach($colors as $color){

$sql2 = mysql_query("SELECT * FROM blanks WHERE id='$color' ")
or die(mysql_error());

$row = mysql_fetch_array($sql2);
$value = $row['color_value'];
$color_name = $row['color_name'];


echo "<p id='a" . $value . "' style='display:none' >";
echo $color_name;
echo "</p>";

}

Old Pedant
11-12-2010, 08:30 PM
Show us the HTML of the page, not the PHP, if you want a JS answer, please. Not all of us use PHP.

Bring up the page in your browser, click on the VIEW menu, click on the SOURCE (or PAGE SOURCE) menu item. Find the *relevant* HTML in that source and copy/paste it here.

DrDOS
11-12-2010, 10:25 PM
Probably the simplest way is to write a function with a loop that hides all the divs, then after the loop have a statement that unhides the div you want.

kirkh34
11-13-2010, 01:30 AM
i was thinking a loop maybe... but i'm not sure how to write it...


<?php
include("includes/db_connect.php");




?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>





<script type="text/javascript" src="js/change_css.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css" />





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="js/featuredimagezoomer.js">

/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){


$('#image1').addimagezoom({
zoomrange: [3, 3],
magnifiersize: [300, 300]

})

})




</script>




<style type="text/css">



.footer{
width: 960px;
background-color:#fff;
position: relative;
margin: -150px auto 0 auto; /* negative value of footer height */
height: 150px;
clear:both;

}

.wrapper {
min-height: 100%;

}


.main{

width: 650px;
height: auto;
margin: auto;
background-color: pink;

}

.shirt_left{
width: 350px;
margin:auto;
min-height: 300px;
background-color: green;
float: left;

}

.shirt_right{
width: 300px;
margin:auto;
min-height: 400px;
background-color: red;
float: left;

}

.shirts{
padding: 10px 0px 0px 10px;
border: none;
width: 336px;
height: 420px;
z-index: 2;
position: absolute;

}

.template_fill{
width: 336px;
height: 420px;

border: 1px solid black;
position: relative;

}

.color_links {
text-decoration:none;
width: 0px;
height: 0px;
border:none;
display: inline;
outline: none;
padding: 0px;
margin: 0px;
}


.color_container{
width: 165px;
height: auto;
overflow: ;
background-color: orange;
float: right;
margin: ;
padding: 0px;
display: inline;
}

.colors{
display: inline;
padding: 0px;
margin: 0px;
list-style-type: none;
float: ;

}

.colors li{
float: left;
display: inline;
padding: 0px 3px 3px 0px;
margin: 0px;
}

.colors li a{
padding: 0px;
margin: 0px;
}

.colors li img{
width: 30px;
height: 30px;
float: left;
display:block;
border:none;
text-decoration:none;
border-radius: 5px;
-moz-border-radius: 5px;

}


.button{
width: 70px;
height: 35px;
background-color:black;
color: white;
display:block;
border:none;
text-decoration:none;
border-radius: 5px;
-moz-border-radius: 5px;

}

.shirt_name{
float: right;
width: 290px;
height: 40px;
border-radius: 10px;
-moz-border-radius: 10px;
background-color: blue;
margin-bottom: 10px;
padding: 0px;
text-align: center;
}

.shirt_name h1{
display: inline;
font-family: tahoma;
margin: auto;

}

.picker{

display:none;

}

</style>


<?php
$shirt_id = $_GET['shirt_id'];
$sql = mysql_query("SELECT * FROM shirts WHERE id='$shirt_id'")
or die(mysql_error());
while($row = mysql_fetch_array($sql)){

$default_color = $row['default_color'];

$sql3 = mysql_query("SELECT * FROM blanks WHERE id='$default_color' ")
or die(mysql_error());
$row3 = mysql_fetch_array($sql3);
$default_color = $row3['color_value'];
$default_name = $row3['color_name'];




echo "<style type='text/css'>";


$sql9 = mysql_query("SELECT * FROM blanks")
or die(mysql_error());
while($row9 = mysql_fetch_array($sql9)){

$value = $row9['color_value'];
$color_name = $row9['color_name'];

echo "#a" . $value . "{

display:none;

}";

}


echo ".template_fill{";
echo "background-color:#" . $default_color . ";";
echo "}";


echo ".magnifyarea{
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background-color:#" . $default_color . ";

}
";

echo "</style>";



?>


<script type="text/javascript">

$(function() {
$(".jqzoom").jqzoom();
});
</script>


</head>

<body>



<div class="wrapper">
<div class="header">



</div> <!-- End header -->

<div class="main">




<div class="shirt_left">




<?php




$shirt_name = $row['name'];
$shirt_price = $row['price'];
$shirt_desc = $row['description'];
$img_file = $row['img_file'];


echo " <div class='template_fill'>
<img src='images/template_under.png' border: none; width='336' height='420' alt='" . $name . "' style='z-index:1;position:absolute;' onContextMenu='return false;'/>
<img id='image1' class ='shirts' src='images/shirts/" . $shirt_id . "/" . $img_file . "' alt='" . $name . "' onContextMenu='return false;'/>
<img src='images/template_shadow.png' border: none; width='336' height='420' alt='" . $name . "' style='z-index:0;position:absolute;' onContextMenu='return false;'/>
</div>
";




///color container


echo "<div class='color_container'>";

$colors = $row['colors'];
$colors = explode(", ", $colors);

foreach($colors as $color){

$sql2 = mysql_query("SELECT * FROM blanks WHERE id='$color' ")
or die(mysql_error());

$row = mysql_fetch_array($sql2);
$value = $row['color_value'];
$color_name = $row['color_name'];






echo "<ul class='colors'>";

echo "<li>";
echo "<a href='#' class='color_links' onclick=\"changecss('.template_fill','background-color','#" . $value . "');changecss('.magnifyarea','background-color','#" . $value . "');hide();toggle('a".$value."');toggle_visiility('a".$value."');\"><img style='background-color:#" . $value . ";'/></a><br />";
echo "</li>";


} //end foreach


echo "</ul>";


echo "<p id='' style='display:block;'>" . $defaul_name . "</p>";


foreach($colors as $color){

$sql2 = mysql_query("SELECT * FROM blanks WHERE id='$color' ")
or die(mysql_error());

$row = mysql_fetch_array($sql2);
$value = $row['color_value'];
$color_name = $row['color_name'];


echo "<p id='a" . $value . "' >";
echo $color_name;
echo "</p>";

}






echo "</div> <!-- End Color Container -->";



?>


</div> <!-- End shirt_left-->





<div class="shirt_right">


<div class="shirt_name">
<h1><?php echo $shirt_name;?></h1>

</div>




<?php


echo "<table border='1' width='200px'>";
echo "<tr>";
echo "<td>Price:</td><td>$ " . $shirt_price . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Size:</td><td>S M L XL 2XL 3XL 4XL</td>";
echo "</tr>";

echo "<tr>";
echo "<td></td><td>";

////color boxes




echo "</td>";
echo "</tr>";

?>

<?php

echo "<tr>";
echo "<td>Color:</td>";
echo "<td><input type='text' value='" . $default_name . "' disabled/></td>";
echo "</tr>";


echo "<tr><td>Quantity</td>";
echo "<td><input type='text' value='1' size='3' />";
echo "</td></tr>";


echo "<tr><td></td><td>";
echo "<button class='button'>Add to Cart</button>";
echo "</td></tr>";
//echo "<tr><td>";
//echo "<br />";

//echo "<script src=\"http://connect.facebook.net/en_US/all.js#xfbml=1\"></script><fb:like href=\"http://swellshirt.com/view_shirt.php?id=" . $shirt_id . "\" font=\"lucida grande\"></fb:like>";

//echo "</td></tr>";
echo "</table>";

} //end while

?>



</div> <!-- End shirt_right-->

<br />
<br />
<br />
<br />
<a href="index.php">Home</a>
<br />
<a href="admin/admin.php">Admin</a>
<br />





</div> <!-- End Main -->






</div> <!-- end wrapper-->

<div class="footer">
footer
</div> <!-- end footer-->


</body>
</html>

Old Pedant
11-13-2010, 02:02 AM
I'll help you, but only if you do as I asked. Don't show us PHP code. Show us the generated HTML. And, please, only the *RELEVANT* parts of the HTML. There was no reason to show 80% of that PHP code, as most is unrelated to your question.

glenngv
11-13-2010, 07:36 AM
You don't need to loop. Just have a global variable to store the reference to the previously shown element. Then onclick check first this variable, if not null/undefined, hide it. Then show the clicked element and then store the clicked element to that variable. So everytime an element is clicked, the previous one is hidden.


var prev;
function clickElement(el){
if (prev) prev.style.display='none';
el.style.display = 'block';
prev = el;
}

kirkh34
11-15-2010, 10:30 AM
glenn...thank you! that works perfect! just had to add
var el = document.getElementById(el);

very simple and awesome thanks again!

glenngv
11-15-2010, 10:45 AM
Glad to be of help, kirkh34. Sometimes we complicate things when the solution is just simple. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum