SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does my show/hide script shift the entire table?

    I'm using the following Javascript to display a new table row with additional form options based on what is chosen in a select menu. I cannot figure it out but when the new table row appears if shifts the select box way over to the right instead of the select menu staying where it is and the word "textbox" in the row that appears beneath it appearing directly under it.

    Can someone look at my code and tell me why it is shifting? I'm not using any CSS, just raw HTML.

    Code:
    var DisplayAry=new Array(3);
    DisplayAry['Green']='options';
    DisplayAry['Blue']='options';
    
    function toggle(obj) {
    	show=obj.options[obj.selectedIndex].value; 
    
    	if (!gEBId(DisplayAry[show])){ return; }
    
    	for (i=1;i<obj.options.length;i++) {
    		if (gEBId(DisplayAry[obj.options[i].value])) {
    			gEBId(DisplayAry[obj.options[i].value]).style.display='none';
    		}
    	} 
    
    	if (gEBId(DisplayAry[show])) {
      		gEBId(DisplayAry[show]).style.display='block'; 
    	} 
    } 
    
    function gEBId(id){ 
    	return document.getElementById(id); 
    } 
    
    function gEBId(id){
            return document.getElementById(id);
    }
    
    function colorStatus(selected) {
    	var val = selected.value.toLowerCase();
    	var el = getObjRef('options');
    
    	if((val == 'green') || (val == 'blue')) {
    		el.style.display='block';
    	} else {
    		el.style.display='none';
    	}
    }
    
    <tr>
      <td>Color</td>
      <td>
        <select name="color" id="color" onchange="colorStatus(this.options[this.selectedIndex])">
          <option value="">Please select</option>
          <option value="Green">Green</option>
          <option value="Black">Black</option>
          <option value="Red">Red</option>
          <option value="Blue">Blue</option>
        </select>
      </td>
    </tr>
    <tr id="options">
      <td>Option</td>
      <td>Textbox</td>
    </tr>
    John Saunders

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi John, try this:
    Code:
    function colorStatus(selected) {
      var val = selected.value.toLowerCase();
      var el = gEBId('options');
    
      if((val == 'green') || (val == 'blue')) {
        try {
          el.style.display='table-row';
          window.status = 'CSS-Compliant';
        }
        catch(e) {
          el.style.display='block';
          window.status = 'Not CSS-Compliant (IE6)';
        }
      } else {
        el.style.display='none';
      }
    }


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
  •