Hello:
I am trying to get an “Advanced Search” form going and it just isn’t working. I have search google to death and find more about text field searchs and now struggle with this. The idea is to click a command button and the bottom portion of the form opens up and displays the options. I have the javascript in place ( hide/show ) but I just can’t get my tables into the area. Currently I have 3 tables across at 30% each ( I might make 2 at 45% ) that go to 100% when the screen size is 480px. I can figure out the php for that part the fields. Whether 1, 2 or 3, the tables should be centered to make it look better. I know I need another media query but don’t care just yet. Also, for some reason a box appears in the advanced area that I do not know where it came from. The advanced search options could have many rows of these tables so flexibility would be great. Here is my link to see what it looks like and also included is the source. Please help.
http://www.pepelepew1962.x10.mx/search.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="viewport"
content="width=device-width; initial-scale=1.0"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
<style type="text/css">
table { border: 1px solid white; width: 100%; }
#tabler1
{
border: 1px solid cyan;
width: 30%;
float: left;
}
#tabler2
{
border: 1px solid yellow;
width: 30%;
float: left;
}
#tabler3
{
border: 1px solid blue;
width: 30%;
float: left;
}
@media (max-width:480px)
{
#tabler1
{
border: 1px solid cyan;
width: 100%;
float: left;
}
#tabler2
{
border: 1px solid yellow;
width: 100%;
float: left;
}
#tabler3
{
border: 1px solid blue;
width: 100%;
float: left;
}
}
</style>
<title>
Test Page
</title>
</head><body>
<div id="headerSandbag"></div>
<div id="pageWrapper">
<h1>
Web <span>Intersect<span><!-- image replacement --></span></span>
</h1>
<div id="messages">
This is a message area!
<!-- #messages --></div>
<ul id="mainMenu">
<li><a href="/" class="current">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Log In</a></li>
</ul>
<div id="eMailNotice">
<a href="#mails" class="hasMail">
EMAILS ( 44 )
</a>
<!-- #eMailNotice --></div>
<hr />
<img src="728x090_uap.gif" width="728" height="90" class="advert"/>
<h2>Home</h2>
<div id="contentWrapper"><div id="content">
<form method="POST" action="--WEBBOT-SELF--">
<div class="subSection">
<hr/>
<br>
<br>
<table width="100%" border="1" bordercolor="#FF0000" cellpadding="2">
<tr>
<td> <input type="text" name="firstName"/>
<p> <input type="text" name="lastName"/></p>
<p> <input type="checkbox" name="option1" value="Milk"> Milk</p>
<p> <input type="checkbox" name="option1" value="Butter">
Butter</p>
<p> <input type="checkbox" name="option1" value="Cheese"> Cheese</p>
<p><br/></td>
</tr>
</table>
<input type="submit"/>
<br>
<br>
<br>
<table border="1" width="100%" bordercolor="#008000" id="table1">
<tr>
<td>
<input type=button OnClick="toggle_it('pr1')" VALUE="ADVANCED SEARCH">
</td>
</tr>
<tr >
<td colspan="2">
<!--
This is the table we will be showing, or hiding. Note it's id.
If you are producing a series of table rows from a database,
you can give each row a dynamic id, perhaps the key for the row from the database, and use the show hide property for extended information, streamlining your page's presentation, but still giving the availability of all the information without additional page loads.
-->
<table width="100%" id="pr1" name="police_response1" style="display:none;">
<tr>
<td align="right">Replace with the 3 tables:
<p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
<p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<div id="tabler1">
<table>
<tr>
<th colspan="2">Table1</th>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</div>
<div id="tabler2">
<table>
<tr>
<th colspan="2">Table2</th>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</div>
<div id="tabler3">
<table>
<tr>
<th colspan="2">Table3</th>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td> FIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
<br>
<input type="submit"/>
<br>
<br>
</div><!-- .subSection -->
</form>
<!-- #content, #contentWrapper --></div></div>
<div id="extras">
<div class="subSection">
<!-- should probably be a h2 here --><hr />
<p>
Morbi lacinia orci sed mauris facilisis, sed dignissim dolor tempus. Cras malesuada consequat purus a semper. Donec eu lectus nec turpis elementum rutrum. Nunc ultricies eros sit amet ultrices semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut sapien sit amet felis egestas tincidunt. Duis adipiscing eu leo et porttitor. Cras ut congue felis. Quisque ut tristique erat, et lobortis urna. Aliquam dictum, ante sit amet scelerisque semper, erat tellus pellentesque massa, vitae mollis diam leo et diam. Praesent lorem eros, tempor ut consectetur a, vehicula vel purus. Proin eleifend velit orci, blandit faucibus lectus venenatis non.
</p>
<!-- .subSection --></div>
<!-- #extras --></div>
<hr />
<div id="footer">
Footer
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
