Advanced Search

Results 1 to 10 of 10

Thread: Hide a table?

  1. #1
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Hide a table?

    Hey, here's my code:

    Code:
    PHP Code:
    <?php
    # PODpanel - "view_rares.php" file - Written by Blinger, Modified by lDaFreshKid.
    # Do not edit anything in this file, it could possibly lead to PODpanel not working properly.

        
    include("staff/_inc/config.php");
        include(
    "staff/_inc/functions.php");
        
    $siteinfo mysql_query("SELECT * FROM info");
            
    $siteinfo mysql_fetch_array($siteinfo);
            
    $info mysql_query("SELECT * from `info`"); 
            
    $info mysql_fetch_array($info);
         
    ?>

                
             <title><?php echo $info[sitename]; ?> :: Rare Values</title>        
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p");").toggle();
      });
    });
    </script>
                 <script type="text/javascript" language="javascript" src="staff/_frontend/_js/tooltip.js"></script>  
                 <script type="text/javascript" src="staff/_frontend/_js/jquery-1.3.2.min.js"></script>
                 <script type="text/javascript" src="staff/_frontend/_js/jquery-ui-1.7.1.custom.min.js"></script>

                 <script type="text/javascript">
                      function showResult(str)
    {
    if (str.length==0)
      { 
      document.getElementById("livesearch").innerHTML="";
      document.getElementById("livesearch").style.border="0px";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
        document.getElementById("livesearch").style.border="1px solid #A5ACB2";
        }
      }
    xmlhttp.open("GET","staff/_frontend/livesearch.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
                 
    <script type="text/javascript">

    $(document).ready(function(){ 

                               

        $(function() {

            $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {

                var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 

                $.post("updateDB.php", order, function(theResponse){

                    $("#contentRight").html(theResponse);

                });                                                              

            }                                  

            });

        });


    });    

    </script>

            <style type="text/css"> 
            
            body {
            background: #60bfe7;
        padding-bottom: 0;
        margin-bottom: 0;

            }

            body, a, td, tr, select {       
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            font-size:12px;
            color:#666666;
            text-decoration: none; 
         
            }

            .container {                
        width: 600px;
        margin: auto;
        padding: 0px;
        margin-top: 15px;

        }

            .warning {
            background-color:#ffcfcf;
            border:solid 1px #e5a3a3;
            border-bottom:solid 2px #e5a3a3;
            color:#801b1b;
            text-align:left;
            font-weight: none;
            width: 100%px;
            padding:5px;

            }

            .safe {
            background-color:#D9FFCF;;
            border:solid 1px #ADE5A3;
            border-bottom:solid 2px #ADE5A3;
            color:#1B801B;
            text-align:left;
            font-weight: none;
            padding:5px;

            } 
        
            .box {
            width: 600px;
        background: #9ECAEE;              
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        padding: 5px;
        margin-bottom: 10px; 
                   
            }

            .head {
        padding: 4px;               
        background: #60bfe7;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
        font-size: 18px;
        font-weight: bold;
        color: #e4e7e7;
            text-color: white;

        }

            .hotspot{
            cursor:default;

            }

            #tt{
            position:absolute;
            display:block;
            
            }
     
            #tttop{
            display:block;
            height:5px;
            margin-left:5px;               
            overflow:hidden;

            }
     
            #ttcont{
            display:block;
            padding:2px 12px 3px 7px;
            margin-left:5px;
            background-color: black; opacity: 0.7;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 3px;
            color:#fff;
            -webkit-box-shadow:0 0 18px rgba(0,0,0,0.9);
            -moz-box-shadow:0 0 18px rgba(0,0,0,0.9);
            box-shadow:0 0 18px rgba(0,0,0,0.9);

            }

            #ttbot{
            display:block;
            height:5px;
            margin-left:5px;          
            overflow:hidden;

            }
        
            input, textarea, select {
            color: #747474;
        font: 12px "Trebuchet MS", "Lucida Grande", Arial, Tahoma, sans-serif;
        background: white url("../images/textbg.png") 0 -480px repeat-x;
            width: auto;
            border: 1px solid #C1C1C1;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .16);
            -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .16);
            box-shadow: inset 0 1px 4px rgba(0, 0, 0, .16);
            position: relative;
            padding: 5px;
                    
            }    

            input[type=submit], input.button {
        color: #888;
        border-color: #ddd;
        background: #f0f0f0;
        cursor: pointer;
        padding: 3px;

            }

            input[type=button], input.button {
        color: #888;
        border-color: #ddd;
        background: #f0f0f0;
        cursor: pointer;
        padding: 3px;

            }

            input[type=submit]:hover, input.button:hover {
        background-color: #e6e6e6;
        border-color: #d6d6d6;

            } 

            input[type=button]:hover, input.button:hover {
        background-color: #e6e6e6;
        border-color: #d6d6d6;

            }

            input[type=submit].green, input.button.green {
        background-color: #d9ffcf;
        border-color: #ade5a3;
        color: #1b801b;    
            
            }

            input[type=submit].red, input.button.red {
        background-color: #ffcfcf;
        border-color: #e5a3a3;
        color: #801b1b;
        
            }
    </style> 
                                                                                   
    </head>

    <div class="container">

                <div class="box">
                   <div class="head">
                  <strong><?php echo $info[sitename]; ?> Rare Values</strong>
            </div>           
    <p>
                                            
    Can't find that certain rare? Tired of looking everywhere for it? Look no more, simply use the search tool function below and find what you're looking for in an instance! <p>

                          <center><form>
                          <input type="text" size="50" onkeyup="showResult(this.value)" />
                            <div id="livesearch"></div>
                            </form></center>
    </div>       </div>             
                       


    <?php
         $color1 
    $info[stripe1]; 
         
    $color2 $info[stripe2];
         
    $header_colour 1;
                              
         
    $get_cats mysql_query("SELECT * FROM `categories` ORDER BY `displayorder`") or die(mysql_error());
         while(
    $cats mysql_fetch_array($get_cats)) {
             if(
    $header_colour == 5){
                 
    $header_colour 1;
             }
              echo(
    "
                  <div class=\"container\">
                  <div class=\"box\">
                   <div class=\"head\">
                  <strong>"
    .$cats['name']."</strong>
            </div>   
        
                  
                   "
    );
              
    $header_colour++;
              
    $row_count 0;
              
    $tablecount 0;
              echo(
    "<table border=\"0\" width=\"100%\"><tr>");

              
    $get_rares mysql_query("SELECT * FROM `rares` WHERE `catid`='".$cats['id']."'") or die(mysql_error());
              while(
    $rare mysql_fetch_array($get_rares)) {
                  if(
    $tablecount == 4){
                      echo(
    "</tr><tr>");
                      
    $tablecount 0;
                  }
                  
    $row_color = ($row_count 2) ? $color1 $color2;
                   
                  echo(
    "<p><td width=\"25%\" style=\"text-align:center;background-color:#cccccc\">
                        <span class=\"hotspot\" onmouseover=\"tooltip.show('<img align=\'right\' width=\'40\' height=\'40\' src=\'
    {$info['imagedir']}{$rare['image']}\'><b><u>Rare Information:</b></u><br>{$rare['info']}<br><br> <b><u>Value:</b></u> {$rare['value']}c');\" onmouseout=\"tooltip.hide();\">
                        <img alt=\"
    {$rare['name']}\" src=\"{$info['imagedir']}{$rare['image']}\"></span><br>
                        
    {$rare['name']} <br> {$rare['value']}c</td></p>");
                  
    $row_count++;
                  
    $tablecount++;
              }     
              echo(
    "</table><p align=\"left\"></p></div></div> ");
                              
        echo(
    "</table>");
    }
    ?>
    </div>
    </body>
    </html>
    I want a button like so: http://habfab.com/rares.php

    I want it so that when they click "hide" it hides that category only and changes to "show" when they click hide. Please help

    Thanks guys

    ~ David
    Last edited by jscheuer1; 02-19-2012 at 04:13 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,702
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    If that's your page (habfab.com/rares.php), it's code is different than that in your post. It can be fixed up by changing (at the end of the page):

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("table");").toggle();
      });
    });
    </script>
    to:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $(this).parent('div').next('table').toggle();
        this.value = this.value === 'Show'? 'Hide' : 'Show';
      });
    });
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Vernier (02-20-2012)

  4. #3
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    If that's your page (habfab.com/rares.php), it's code is different than that in your post. It can be fixed up by changing (at the end of the page):

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("table");").toggle();
      });
    });
    </script>
    to:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $(this).parent('div').next('table').toggle();
        this.value = this.value === 'Show'? 'Hide' : 'Show';
      });
    });
    </script>
    Wow that worked! Thanks!

    Also how can I get it to change from "hide" to "show"?

    Also How can I have it so All the category's are closed when a user opens the page?

    Thanks so much

    ~ David

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,702
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    The code I gave you did change from Hide to Show in IE. Darn I see it's not doing so in others. That's because it's a button and not an input type=button, so technically it has no value.

    If we change the code to:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $(this).parent('div').next('table').toggle();
        this.innerHTML = this.innerHTML === 'Show'? 'Hide' : 'Show';
      });
    });
    </script>
    it should then work in all browsers.

    One way to get them to all be closed would be to add:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $(this).parent('div').next('table').toggle();
        this.innerHTML = this.innerHTML === 'Show'? 'Hide' : 'Show';
      }).click();
    });
    </script>
    Or you could set the display property of all of the tables to none. But then non-javascript users would never see anything.

    A good way to do it would be to change our function to:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").html('Show').click(function(){
        $(this).parent('div').next('table').toggle();
        this.innerHTML = this.innerHTML === 'Hide'? 'Show' : 'Hide';
      });
    });
    </script>
    Then in the head of the page, after the external tag for jQuery put:

    Code:
    <script type="text/javascript">
    $('head').append('<style type="text/css">table { display: none; } <\/style>');
    </script>
    Leave the button tags as they are. Non-javascript folks will see the buttons as 'Hide', but they won't do anything if clicked and all the content will be visible. Javascript users will see them as 'Show', with all of the content initially hidden.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Vernier (02-20-2012)

  7. #5
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    The code I gave you did change from Hide to Show in IE. Darn I see it's not doing so in others. That's because it's a button and not an input type=button, so technically it has no value.

    If we change the code to:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $(this).parent('div').next('table').toggle();
        this.innerHTML = this.innerHTML === 'Show'? 'Hide' : 'Show';
      });
    });
    </script>
    it should then work in all browsers.

    One way to get them to all be closed would be to add:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $(this).parent('div').next('table').toggle();
        this.innerHTML = this.innerHTML === 'Show'? 'Hide' : 'Show';
      }).click();
    });
    </script>
    Or you could set the display property of all of the tables to none. But then non-javascript users would never see anything.

    A good way to do it would be to change our function to:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").html('Show').click(function(){
        $(this).parent('div').next('table').toggle();
        this.innerHTML = this.innerHTML === 'Hide'? 'Show' : 'Hide';
      });
    });
    </script>
    Then in the head of the page, after the external tag for jQuery put:

    Code:
    <script type="text/javascript">
    $('head').append('<style type="text/css">table { display: none; } <\/style>');
    </script>
    Leave the button tags as they are. Non-javascript folks will see the buttons as 'Hide', but they won't do anything if clicked and all the content will be visible. Javascript users will see them as 'Show', with all of the content initially hidden.
    Excellent thanks!

    Also one last question, the tooltip (hover over an item in the table) shows correctly in google chrome and Firefox, but not in internet explorer.

    Thanks

    ~ David

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,702
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Add the highlighted to the beginning of the page:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
            	
    	     <title>HabFab :: Rare Values</title>	
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $('head').append('<style type="t . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Vernier (02-20-2012)

  10. #7
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Excellent! Thanks so much, +Thanks

    ~ David

  11. #8
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Add the highlighted to the beginning of the page:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
            	
    	     <title>HabFab :: Rare Values</title>	
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $('head').append('<style type="t . . .
    Hey also one other question, whenever I search for something in the search box, the background goes white :S

    Cheers

    ~ David

  12. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,702
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    The script that does the search appears to be adding styles to the page. You should be able to prevent it from having an effect on the body's background (which appears to be the main problem) by adding the !important keyword here in your style section on the page:

    Code:
    			$.post("updateDB.php", order, function(theResponse){
    
    				$("#contentRight").html(theResponse);
    
    			}); 															 
    
    		}								  
    
    		});
    
    	});
    
    
    });	
    </script>
    
            <style type="text/css"> 
            body {
            background: #60bfe7 !important;
    	padding-bottom: 0;
    	margin-bottom: 0;
    	text-align:center;
            }
    
            body, a, td, tr, select {       
    	font-family:"Trebuchet MS", Arial, He . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Vernier (02-20-2012)

  14. #10
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Excellent! Thanks very much

    ~ David

Bookmarks

Posting Permissions

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