hiding text!

[dhpotter]

hey ppl
I have got a page with six categories on it. The six categories with each have 2 options with radio buttons.ie
Light and Delicate
-delicate summer
-delicate spring

Strong and deep
-strong winter
-strong autumn

etc etc..

now what i need to do is hide all options from the user till they have clicked on the relevant category. I have found a javascript that does that, but doesnt dynamically reformat the text, so while the text is hidden, there are huge gaps bewteen the category headings.


The other method is to use a drop down box to display the categories, though I am not sure how to display the correct option when the relevant category is chosen.
It all gets rather tricky as I need to record their choice(radio button) and send it off as an email.

I am sure this is probably very confusing, it might help if u have a look at http://www.a-newu.co.uk/questionnaire.html and see the "Light and Delicate" option so far.

Any help would be appreciated!!
Thanks
David

[Jona]

Try this:


<script type=text/javascript>
var isNS = navigator.appName.indexOf("Netscape") != -1
var isIE = navigator.appName.indexOf("Microsoft") != -1
function show() {
if (isNS) document.layers["d1"].visibility = "show";
if (isIE){document.all.d1.style.visibility = "visible;";
document.all.d1.stlyle.position="relative;";
}
function hide() {
if (isNS) document.layers["d1"].visibility = "hide";
if (isIE){document.all.d1.style.visibility = "hidden;";
document.all.d1.style.position="absolute;";
}
</script>


Jona

[dhpotter]

ok, i got that in, i'm still new to this though. what would that enable me to do now?
What do i need to check/ do next?
I have uploaded the new code. Seems to bring up and error or so..
I am completely in your hands.

I take it I need to adjust the properties of the headings?
Any advice is good.
Thanks

[Jona]

I made a typo. :o


<script type=text/javascript>
var isNS = navigator.appName.indexOf("Netscape") != -1
var isIE = navigator.appName.indexOf("Microsoft") != -1
function show() {
if (isNS) document.layers["d1"].visibility = "show";
if (isIE){ document.all.d1.style.visibility = "visible;";
document.all.d1.style.position="relative;";
}
}
function hide() {
if (isNS) document.layers["d1"].visibility = "hide";
if (isIE)[b]{
document.all.d1.style.visibility = "hidden;";
document.all.d1.style.position="absolute;";
}
}
</script>


Jona

[dhpotter]

right Jona, fixed the typo..
When i click on the category link to display the options, I get error. line:16 char:12 error:could not get the visibility property. Invalid argument.

What have i done wrong..

[Jona]

OK, try this:


<script type=text/javascript>
var isNS = navigator.appName.indexOf("Netscape") != -1
var isIE = navigator.appName.indexOf("Microsoft") != -1
function show() {
if (isNS) document.layers["d1"].visibility = "show";
if (isIE){ document.all.d1.style.visibility = "visible";
document.all.d1.style.position="relative";
}
}
function hide() {
if (isNS) document.layers["d1"].visibility = "hide";
if (isIE){
document.all.d1.style.visibility = "hidden";
document.all.d1.style.position="absolute";
}
}
</script>


Jona

[dhpotter]

ok brilliant.!!! things are looking much better

when the page loads up for the first time, there is still some space, if one clicks the heading to show the options it looks good. when one hides the options, the spacing issue is solved, though if one shows it again, the radio buttons dissapear. I have uploaded the new page. Any ideas?

[dhpotter]

ok, i got the radio button thing sorted out..
Next on page load, i need to get rid of the spaces? is that possible. and if one clicks on the next category, ie strong and deep, it needs to hide all the other categories, how do i adjust things.
Thanks very much for your help here.! I appreciate!

[Jona]

Add style="position:absolute;" to your DIV tag.

Jona

[dhpotter]

sheesh, I am impressed. thank you.
before i get you completely bored...lets say i had to do this for each of the six categories. i have tried to rename the div consecutively, though it only acts on one category. in other words how do i get it to work on all six categories? i have posted the new page up.

[Jona]

Repeat the the above. Set its position to absolute, and use the above code for each function--renaming the DIV each time... Or, come to think of it, you should try this:


<script type=text/javascript>
var isNS = navigator.appName.indexOf("Netscape") != -1
var isIE = navigator.appName.indexOf("Microsoft") != -1
function show(divNum){
if (isNS) eval("document.layers['d"+divNum+"'].visibility = 'show'");
if (isIE){ eval("document.all.d"+divNum+".style.visibility = 'visible'");
eval("document.all.d"+divNum+".style.position='relative'");
}
}
function hide(divNum) {
if (isNS) eval("document.layers['d"+divNum+"'].visibility = 'hide'");
if (isIE){
eval("document.all.d"+divNum+".style.visibility = 'hidden'");
eval("document.all.d"+divNum+".style.position='absolute'");
}
}
</script>


Of course, that means you'd have to call the functions in a different way. For example, to show the first DIV you would use: onClick="show(1);" And to hide the first DIV you would use: onClick="hide(1);" Of course, this means that you have to name each of your DIVs like this:


<div id="d1">HTML with radio buttons</div>
<div id="d2">HTML with radio buttons</div>
<div id="d3">HTML with radio buttons</div>


Etcetera... Until you get to the sixth one. I think you get the idea. ;)

Jona

[dhpotter]

Things are looking very good!

Last question then. What is the most elegant way to get rid of the hide button, if they click on a different category, could it be set up to hide all others?

[Jona]

Yes, it is possible. You would use this:


function hideAll(){
for(i=0;i<6;i++){
if(isNS){eval("document.layers['d"+i+"'].visibility = 'hide'");}
if(isIE){eval("document.all.id"+i+".style.visibility = 'hidden'");
eval("document.all.id"+i+".style.position='absolute'");}
} }


Jona