Hide a table?

[Vernier]

Hey, here's my code:

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

[jscheuer1]

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):


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

to:


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

[Vernier]

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):


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

to:


<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

[jscheuer1]

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:


<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:


<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:


<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:


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

[Vernier]

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:


<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:


<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:


<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:


<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! :D

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

[jscheuer1]

Add the highlighted to the beginning of the page:


<!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 . . .

[Vernier]

Excellent! Thanks so much, +Thanks :)

~ David

[Vernier]

Add the highlighted to the beginning of the page:


<!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

[jscheuer1]

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:


$.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 . . .

[Vernier]

Excellent! Thanks very much :)

~ David