SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hide/show advanced search form

    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


    Code:
    <!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>&nbsp;<input type="text" name="firstName"/>
                            <p>&nbsp;<input type="text" name="lastName"/></p>
                            <p>&nbsp;<input type="checkbox" name="option1" value="Milk"> Milk</p>
                            <p>&nbsp;<input type="checkbox" name="option1" value="Butter"> 
                            Butter</p>
                            <p>&nbsp;<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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>&nbspFIELD 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>
    Last edited by Pullo; Jul 28, 2013 at 23:40. Reason: Added code tags

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,582
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    pepe_lepew1962,

    This does not sound like a CSS issue. It sounds like a JavaScript issue. I will request that this thread be moved into the JavaScript forum.

    In addition, I would like to ask you to read the thread about forum posting basics:
    http://www.sitepoint.com/forums/show...Posting-Basics

    In particular, when including code in a post, please take advantage of the "#" icon which provides a pair of [CODE][/CODE] within which you can paste your code. CODE tags preserve the formatting and save a lot of vertical space in the post.

    Ideally, we would prefer that you post a working copy of the code that demonstrates the problem without including extraneous code. This helps us focus on the problem.

    If you are unable to post code that focuses specifically on the problem, then a link to your site will be OK. There is usually no need to post both.

    Thank you.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for reading and replying, but my question is moving to javascript? The javascript works, it is the css/html within that code that I can't get to work. Just trying to figure where to post in the future is all.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,582
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Since I posted my message about an hour and a half ago, maybe the advisor on duty decided to leave it here.

    With that possibility in mind, let's take it in small chunks and let me ask you to post a simplified working example of the problem(s).

    The small box that is being generated is the result of the table being {display:inline}. An inline table should be {display:inline-block;}. That will upset the overall contents of that box, but maybe that's a step in the right direction. Dunno.

    Your turn.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Also, for some reason a box appears in the advanced area that I do not know where it came from
    The white box is the white border on the table which as you have set it to display:inline can no longer contain its contents (because it isn't a table anymore). If you want tables next to each other then use display:inline-table (not supported in IE7 and under) or float the tables instead.

    In the html you have posted you have a different structure with 3 divs floated at 30%. You didn't actually need the divs as you could just float the tables but if you want them centred hen you can either wrap a div around the three tables and give it a 90% width and then use auto margins to center it. The tables would then need to be 33% wide to fill the parent div of course.

    Or more simply you could just give a margin to the middle table wrapper in your existing html to spread them out a bit more.

    e.g.
    Code:
    #tabler2 {
    	border: 1px solid yellow;
    	width: 30%;
    	float: left;
    	margin:0 4%;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello:

    Ok, I kind of have something working now. If you click the "ADVANCE SEARCH" button the table opens up and now has 3 boxes. Each box has a mini description of what I would like. So the first box says that this area/content should be replaced with the much lower Table1. The next box to be replaced with Table2 and finally box 3 is to be replaced with Table3. I have 10px as right margins on the divs only to show a separation visually. I know tables are NOT to be used for forms, but the exact form code will also be used to display mysql data on a later page.

    http://www.pepelepew1962.x10.mx/search.html

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,582
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    What's the next step?


    BTW - have you run your code through the validator? or do you believe in it? Usually, most errors are minor, but sometimes there will be one or two that matter.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next step? I am trying to swap each table with the portion within the show/hide box. Validator??? And who said anything about an error. If I sound arrogant, or a *****, I am just frustrated. I have a table called "table1" and that table, as is, I want in the show/hide part of the table. Is my explanation not simple? Seriously, if not, I will make a .jpg of what I want for better clarity.


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
  •