Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2009
    Location
    Indianapolis
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

    onclick show one hide the rest

    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

  • #2
    New Coder
    Join Date
    Dec 2009
    Location
    Indianapolis
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    PHP Code:
    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>";



  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.

  • #5
    New Coder
    Join Date
    Dec 2009
    Location
    Indianapolis
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i was thinking a loop maybe... but i'm not sure how to write it...

    PHP Code:
    <?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>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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.

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

  • Users who have thanked glenngv for this post:

    kirkh34 (11-15-2010)

  • #8
    New Coder
    Join Date
    Dec 2009
    Location
    Indianapolis
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    glenn...thank you! that works perfect! just had to add
    Code:
    var el = document.getElementById(el);
    very simple and awesome thanks again!

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Glad to be of help, kirkh34. Sometimes we complicate things when the solution is just simple.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •