...

View Full Version : help plz in finding a script



bazz
05-05-2008, 06:55 PM
Hi,

I am looking for a script where, when you click a checkbox, a series of options appears just below so that you can check a sub category of the main items.

eg. check box for wines.

when clickin the checkbox, it gives you a listr of red, white, sparkling, champagnes each, with its own checkbox.

I looked through dynamic druive but didn't see anything close


Any help most welcome.

bazz

binaryWeapon
05-06-2008, 03:50 AM
<form name="expandible">
<input type="checkbox" name="uniquename" onLoad="this.checked=false;" onClick="toggle(this.name)";>List of Wines
<div id="uniquename" style="visibility:hidden;">
- <input type="checkbox"> Red
- <input type="checkbox"> White
- <input type="checkbox"> Sparkling
- <input type="checkbox"> Champagnes
</div>
</form>
<script>
function toggle(name)
{
toggleBox=document.getElementById(name);
if(toggleBox.style.visibility=='hidden')
{
toggleBox.style.visibility="visible";
}
else
{
toggleBox.style.visibility="hidden";
}
}
</script> Every time toggle() is called, it shows a div with the same id as the name of the checkbox. You can build upon this and even use it with completely different HTML elements. Hope it helps!

bazz
05-06-2008, 05:49 AM
Crikey, I wasn't expecting that degree of help.

that looks promising and I shall test it tomorrow.

Thank you binaryWeapon :thumbsup:

bazz

bazz
05-08-2008, 05:25 AM
Thank you binaryWeapon.

I am delighted with that script and I find the functioning of it to be very good. However, I have one slight difficulty.
not seeming to work in ie6.

Having fiddled about to make the expanding div push the lower content downwards, I can't seem to make the lowering fit the actual content. I mean some need to be pushed down 100px and others 200px. Is there a way to make it 'variable' to fit the height required?

here is the code currently I would appreciate any help.



<form name="expandible">

<input type="checkbox" name="pillows" onLoad="this.checked=false;" onClick="toggle(this.name)";>Pillows
<div id="pillows" style="visibility:hidden;height:10px;">
<table>
<tr>
<td colspan='2'>Guest 1:</td>
</tr>
<tr>
<td>
<input type="radio" name="first_pillow"> Goose Down Pillow </td><td> <input type="radio" name="second_pillow"> Goose Down Pillow
</td>

</tr>
<tr>
<td>
<input type="radio" name="first_pillow"> Hollow Fibre Pillow </td><td> <input type="radio" name="second_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>

<tr>
<td>
<input type="radio" name="first_pillow"> Non-Allergenic Pillow </td><td> <input type="radio" name="second_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>
<tr>
<td colspan='2'>Guest 2:</td>

</tr>
<tr>
<td>
<input type="radio" name="third_pillow"> Goose Down Pillow </td><td> <input type="radio" name="fourth_pillow"> Goose Down Pillow
</td>
</tr>
<tr>

<td>
<input type="radio" name="third_pillow"> Hollow Fibre Pillow </td><td> <input type="radio" name="fourth_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>
<tr>
<td>

<input type="radio" name="third_pillow"> Non-Allergenic Pillow </td><td> <input type="radio" name="fourth_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>
</table>
</div>
</form>
<script>
function toggle(name)
{
toggleBox=document.getElementById(name);
if(toggleBox.style.visibility=='hidden')
{
toggleBox.style.visibility="visible";
toggleBox.style.height="200px";
}
else
{
toggleBox.style.visibility="hidden";
toggleBox.style.height="10px";
}
}
</script>






bazz

rangana
05-08-2008, 05:52 AM
IE considers name and id as synonymous ;)

Your input name and id is the same, which confuses IE. For a fix, Change your code to:


<input type="checkbox" name="pillow" onLoad="this.checked=false;" onClick="toggle()";>


...Then, change your script to:


toggleBox=document.getElementById('pillows');


See if it helps :)

bazz
05-08-2008, 04:17 PM
Thanks, I didn't know that about ie.

I shall play about with it but I do know that I need to retain the js code as below so that more than one div can be presented if needed. ie, not just the one with the set name of 'pillows'.



toggleBox=document.getElementById(name);

not


toggleBox=document.getElementById('pillows');


bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum