Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down Customization Script

    Hey guys, I need a script that would be similar to Dell's customization:
    http://www1.us.dell.com/content/prod...=19&l=en&s=dhs
    where you press the little plus button and more options show up. If there is a premade script of somebody can whip something up, that would be very much appreciated. Thanks

    Mita

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Starting simply...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript">
    function showHide(id)
       {
    	if (document.getElementById)
    	   {
    		if (document.getElementById(id).style.visibility == "visible"
    		    || document.getElementById(id).style.visibility == "")
    		   {
    			// hide it
    			document.getElementById(id).style.visibility = "hidden";
    			document.getElementById(id).style.display = "none";
    			}
    		else
    		   {
    			// show it
    			document.getElementById(id).style.visibility = "visible";
    			document.getElementById(id).style.display = "";
    			}			
    		}
    	}
    </script>
    </head>
    
    <body>
    <p>This is a test. Click on high-level LI to hide sub-LI. Click again to show.</p>
    <ul>
       <li><a onClick="showHide('tier1')";>one</a></li>
    	   <ul id="tier1">
    		<li>aaa</li>
    		<li>bbb</li>
    		<li>ccc</li>
    		</ul>
       <li><a onClick="showHide('tier2')";>two</a></li>
    		<ul id="tier2">
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    		</ul>
       <li><a onClick="showHide('tier3')";>three</a></li>
    			<ul id="tier3">
    		<li>ggg</li>
    		<li>hhh</li>
    		<li>iii</li>
    		</ul>
    </ul>
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok that works thanks! just one more thing if you could :s have it so that the option I select (say the default processor is a 3.0GHz in the config and u want a 3.2GHz) will show up above the hidden area (see dell site, don't know how to explain it.


    Thanks

    Mita

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript">
    function showHide(id)
       {
    	if (document.getElementById)
    	   {
    		if (document.getElementById(id).style.visibility == "visible"
    		    || document.getElementById(id).style.visibility == "")
    		   {
    			// hide it
    			document.getElementById(id).style.visibility = "hidden";
    			document.getElementById(id).style.display = "none";
    			}
    		else
    		   {
    			// show it
    			document.getElementById(id).style.visibility = "visible";
    			document.getElementById(id).style.display = "";
    			}			
    		}
    	}
    </script>
    </head>
    
    <body>
    <p>This is a test. Click on high-level LI to hide sub-LI. Click again to show.</p>
    <ul>
       <li><a onClick="showHide('tier1')";>one</a><br>
       Whatever</li>
    	   <ul id="tier1">
    		<li>aaa</li>
    		<li>bbb</li>
    		<li>ccc</li>
    		</ul>
       <li><a onClick="showHide('tier2')";>two</a><br>
       Whatever</li>
    		<ul id="tier2">
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    		</ul>
       <li><a onClick="showHide('tier3')";>three</a><br>
       Whatever</li>
    			<ul id="tier3">
    		<li>ggg</li>
    		<li>hhh</li>
    		<li>iii</li>
    		</ul>
    </ul>
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what the page is shaping up to look like, what I need is when you click on an option ("this is just a test") it will updated the words ("selected component") to say This is just a test.

    Thanks

    Mita

    BTW I really appreciate your help, I tried learning JS but forgot about it because I didn't have the time


    EDIT: Also I set the option div to be hidden so that your script would show when you clicked the button instead of hiding but I can't seem to get it. . . updating page for example

    www.a-lantech.com/systems/home/test2.html
    Last edited by MitaDC; 07-07-2005 at 07:42 PM.

  • #6
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    It seems there should be an easier way to do this, but I couldn't get Firefox and IE to agree on DOM things like which elements were parentNode and childNodes[0] and what the innerHTML was for things, so I did it the long way.
    It works, anyways.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript">
    function showHide(id)
       {
    	if (document.getElementById)
    	   {
          var node = document.getElementById(id);
    		if (node.className == "subcomponent_contents_hidden")
    		   {
    			// show it
    			node.className = "subcomponent_contents_visible";
    			}
    		else
    		   {
    			// hide it
    			node.className = "subcomponent_contents_hidden";
    			}			
    		}
    	}
    
    function changeText(id, value)
       {
    	if (document.getElementById)
          {
          nodeToChange = document.getElementById(id);
          nodeToChange.innerHTML = "You chose: "+value;
          }
       }
    </script>
    <style type="text/css">
    .subcomponent_contents_hidden {
    visibility: hidden;
    display: none;
    }
    .subcomponent_contents_visible {
    visibility: visible;
    display: block;
    }
    
    </style>
    </head>
    
    <body>
    <p>This is an expanding/contracting choice menu of sorts.</p>
    <form>
    <div id="container">
    <div id="component1" onClick="showHide('subComponent1_contents')">
    Component 1 options:
    </div>
    <div id="subComponent1_top">
       <span id="subComponent1_text">Nothing chosen.</span>
          <div id="subComponent1_contents" class="subcomponent_contents_hidden">
          Choice Zero: <input type="radio" name="choice1" value="0" onClick="changeText('subComponent1_text', this.value)"><br>
          Choice One: <input type="radio" name="choice1" value="1" onClick="changeText('subComponent1_text', this.value)"><br>
          Choice Two: <input type="radio" name="choice1" value="2" onClick="changeText('subComponent1_text', this.value)">
          </div>
    </div>
    <br>
    <div id="component2"  onClick="showHide('subComponent2_contents')">
    Component 2 options:
    </div>
    <div id="subComponent2_top">
       <span id="subComponent2_text">Nothing chosen.</span>
          <div id="subComponent2_contents" class="subcomponent_contents_hidden">
          Choice A: <input type="radio" name="choice2" value="A" onClick="changeText('subComponent2_text', this.value)"><br>
          Choice B: <input type="radio" name="choice2" value="B" onClick="changeText('subComponent2_text', this.value)"><br>
          Choice C: <input type="radio" name="choice2" value="C" onClick="changeText('subComponent2_text', this.value)">
          </div>
    </div>
    <br>
    <div id="component3"  onClick="showHide('subComponent3_contents')">
    Component 3 options:
    </div>
       <div id="subComponent3_top">
       <span id="subComponent3_text">Nothing chosen.</span>
          <div id="subComponent3_contents" class="subcomponent_contents_hidden">
          Choice X: <input type="radio" name="choice3" value="X" onClick="changeText('subComponent3_text', this.value)"><br>
          Choice Y: <input type="radio" name="choice3" value="Y" onClick="changeText('subComponent3_text', this.value)"><br>
          Choice Z: <input type="radio" name="choice3" value="Z" onClick="changeText('subComponent3_text', this.value)">
          </div>
       </div>
    </div>
    </form>
    
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #7
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nikki you have been a humungous help (sp?) but I just need one last thing if you could, make it so that instead of saying none selected on refresh or page load it displays the value of the radio button marked "checked".

    Thanks!

    Mita

    EDIT: All working GREAT! Thanks
    Last edited by MitaDC; 07-07-2005 at 10:35 PM.

  • #8
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Okay, glad to help!

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •