SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to hide and show html elements efficiently

    hi,

    I want to display an user interface with dynamic elements.

    That is, if the user clicks a particular radio button i show certain select and text boxes. The shown boxes depends on the radio button selected.

    I got elements of all the boxes and set the style property to 'block' or 'none'

    for ex.,

    Code:
    	d.style.display='block';
            w.style.display='none';
    etc.

    But, when i switch over all available radio buttons the area used by the elements get larger and they are not aligned.

    In IE it works fine. But in FireFox it has the problem i have mentioned above.

    How to rectify it.

    Thanks

  2. #2
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may try to set 'block' to 'inline'

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still not working

    I tried replacing block with inline. Still it is not working

  4. #4
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post the code so we can play with it.

    Or...if I uderstand well, you jave problem the textboxes are higher than your radios? This could be solved by adding some padding-top to the radios.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    	<input type=radio name=sel value="school" onClick="show(this)"> school
    			<input type=radio name=sel value="college" onClick="show(this)" checked> College
    			<input type=radio name=sel value="working" onClick="show(this)"> Working
    
    ....
    ....
      		
      <tr id=school class=disnone>
      <td colspan=2>Every <input type=text name=syear size=3 class=rjust value=1 > year</td>
      </tr>
     
       
      <tr id=college class=disnone>
      <td colspan=4>
      <table border=0>
      <tr><td colspan=4>Every <input type=text name=cyear size=3  value=1 > year</td>
      <td colspan=2><select name=day>
      <option value=0 selected>Sunday</option>
      <option value=1>Monday</option>
      <option value=2>Tuesday</option>
      <option value=3>Wednesday</option>
      <option value=4>Thursday</option>
      <option value=5>Friday</option>
      <option value=6>Saturday</option>
      </select>
    		    </td></tr>
    ....
    ....
    disnone is used not to show them using style.display='none'.

    in js,

    Code:
    	
    function show(obj)
    {
      var d=document.getElementById("school");
      var w=document.getElementById("College");
      var m=document.getElementById("working");
    ....
    ....
      
      
      
      if(obj.value=='school')
      {
    	s.style.display='inline';
    	c.style.display='none';
    	w.style.display='none';
    	
      }
      if(obj.value=='College')
      {
    	s.style.display='none';
    	c.style.display='inline';
    	w.style.display='none';
      }
    ...
    ...

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use instead of "block" an empty string "".

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried with "". But not working

  8. #8
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem is you are hiding parts of a table. Make it hide only the text field, not whole row.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From your code the table structure is not clear, so it's hard to find an error. But checkout this example which is based on your code and it's working:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function show(which) {
    	var s = document.getElementById("school");
    	var c = document.getElementById("college");
    	var w = document.getElementById("working");
    	if(which.value == "school") {
    		s.style.display='';
    		c.style.display='none';
    		w.style.display='none';
    		}
    	if(which.value == "college") {
    		s.style.display='none';
    		c.style.display='';
    		w.style.display='none';
    		}
    	if(which.value == "working") {
    		s.style.display='none';
    		c.style.display='none';
    		w.style.display='';
    		}
    }
    </script>
    </head>
    <body onload="document.forms[0].elements[1].onclick()">
    <table border="1">
    <tr id='school'>
    	<td>1</td>
    	<td>2</td>
    </tr>
    <tr id='college'>
    	<td>3</td>
    	<td>4</td>
    </tr>
    <tr id='working'>
    	<td>5</td>
    	<td>6</td>
    </tr>
    </table>
    <form name="mf" id="mf">
    <input type='radio' name='sel' value="school" onClick="show(this)"> school
    <input type='radio' name='sel' value="college" onClick="show(this)" checked> College
    <input type='radio' name='sel' value="working" onClick="show(this)"> Working
    </form>
    </body>
    </html>

    Hope it helps...


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
  •