SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Toggle View between Visible and Invisible

    I am trying to make certain areas invinsible by selecting a choice from the the drop down menu, but I am not having much luck at it.
    Code:
    <script>
    function showHide(elemID)	{		
    	var elem = document.getElementById(elemID);
    	if(elem.style.display == "none")	{
    		elem.style.display = "";
    		
    	}else{
    		elem.style.display = "none";
    	}
    }
    </script>
    <form name="MyForm">
    <table>
      <tr>
        <td>
          <select name="WorkType" onChange="showHide(this.MyForm.WorkType)">
            <option value="Graphics">Graphics
            <option value="ScreenPrint">Screen Print
          </select>
        </td>
      </tr>
      <div id="Graphics" style="display:none;">
        <tr>
          <td>Some Content</td>
        </tr>
      </div>
      <div id="ScreenPrint" style="display:none;">
        <tr>
          <td>Some Content</td>
        </tr>
      </div>
    </table>
    </form>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I see what is wrong...and have a cool optimization for you to boot. First, the problem
    Code:
    onChange="showHide(this.MyForm.WorkType)"
    This reference is bogus. The this keyword points to the object that it is attached to, which in this case has no sub-object 'MyForm'. To properly reference a form element's form this way, you use the generic form reference, this.form. However, even if you had this right, you then point back to the select object itself, which is wholly identical to just putting onChange="showHide(this)" which would pass the object causing your script to error since it is expecting a string. So, to fix it all, you need to properly send the value that is currently selected.
    Code:
    onChange="showHide(this.value)"
    This reference, I've found, doesn't always work, so if it doesn't for you, use the longer, but more accurate:
    Code:
    onChange="showHide(this.options[this.selectedIndex].value)"
    Now, for the optimization I mentioned...it is called a ternary operation, and it goes something like this...
    Code:
    function showHide(elemID)	{		
    	var elem = document.getElementById(elemID);
    	elem.style.display = (elem.style.display == "none") ? "" : "none";
    	}
    In generic terms, the ternary operation looks like this (well, for variable assignment anyway)
    Code:
    assignment = (condition) ? valueIfTrue : valueIfFalse;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, for the help, again

    I ended up needing some other features so only on element was visible at a time and be able to go back to all of them turned off.

    It's probably the long way around, but I am not a javascript guru like you

    Code:
    <script>
    function showHide(switchVal)	{
    	var graph = document.getElementById("Graphics");
    	var large = document.getElementById("LargeFormat");
    	var custom = document.getElementById("CustomVinyl");
    	var screen = document.getElementById("ScreenPrinting");
    	switch(switchVal)	{
    		case "Graphics":
    			graph.style.display = "";
    			large.style.display = "none";
    			custom.style.display = "none";
    			screen.style.display = "none";
    			break;
    		case "LargeFormat":
    			graph.style.display = "none";
    			large.style.display = "";
    			custom.style.display = "none";
    			screen.style.display = "none";
    			break;
    		case "CustomVinyl":
    			graph.style.display = "none";
    			large.style.display = "none";
    			custom.style.display = "";
    			screen.style.display = "none";
    			break;
    		case "ScreenPrinting":
    			graph.style.display = "none";
    			large.style.display = "none";
    			custom.style.display = "none";
    			screen.style.display = "";
    			break;
    		default :
    			graph.style.display = "none";
    			large.style.display = "none";
    			custom.style.display = "none";
    			screen.style.display = "none";
    			break;
    	}
    }
    </script>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com


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
  •