...

View Full Version : Drop Down Customization Script



MitaDC
07-07-2005, 07:41 PM
Hey guys, I need a script that would be similar to Dell's customization:
http://www1.us.dell.com/content/products/features.aspx/featured_dp_desktop1_1?c=us&cs=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

nikkiH
07-07-2005, 07:44 PM
Starting simply...


<!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>

MitaDC
07-07-2005, 07:58 PM
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

nikkiH
07-07-2005, 08:03 PM
<!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>

MitaDC
07-07-2005, 08:28 PM
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

nikkiH
07-07-2005, 09:58 PM
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. :thumbsup:



<!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>

MitaDC
07-07-2005, 10:32 PM
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

nikkiH
07-08-2005, 03:02 PM
Okay, glad to help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum