okay its not working so far, dreamweaver doesnt have the position or hidden/visible attribute :O..

And the w3schools site didnt give me any info on using those attributes either I tried this


I wasnt sure whether div was for inside or outside the table so i tried both and neither worked, but I'm presuming its inside the <td> tag

Use this:

<script type="text/&#106avascript">

function setLyr(lyr)
{
var x = document.getElementById(lyr);
x.style.visibility = 'visible';
}

function hide(lyr)
{
var x = document.getElementById(lyr);
x.style.visibility = 'hidden';
}

</script>

<form name="testForm">
<input type="radio" name="language" onfocus="setLyr('Layer1')" onblur="hide('Layer1')"/>C<br />
<input type="radio" name="language" onfocus="setLyr('Layer2')" onblur="hide('Layer2')"/>C++<br />
</form>

<table width="215" height="75" border="1">
<tr>
<td>
<div id='Layer1' style="visibility: hidden">C Code should go here
<div id='Layer2' style="visibility: hidden">C++ Code should go here
</td>
</tr>
</table>

You will notice that the text for the code does not keep itself in one spot. To resolve this, you will need to assign a position to each div. Google search for div position to see what sort of options you have.

Perfect, thank you so much for that, its exactly what I wanted :D rating++
Edit: There is one thing I noticed if you try to select the code it hides it, am I able to hide the other code from within the onclick method as well, instead of on blur?

If you use visibility:hidden, the elements will still occupy space on the page. Is that what you want?

To answer your last question: you could remove the onblur hook. If you set it up for onclick, you would just need to make sure you hide anything previously shown.

I would do it this way:

<form name="languageForm">	<input type="radio" name="language" value="C" onclick="showCodeSample(this.value);" />C<br />	<input type="radio" name="language" value="Cplusplus" onclick="showCodeSample(this.value);" />C++<br />	<input type="radio" name="language" value="Csharp" onclick="showCodeSample(this.value);" />C#<br />	<input type="radio" name="language" value="Delphi" onclick="showCodeSample(this.value);" />Delphi<br />	<input type="radio" name="language" value="Java" onclick="showCodeSample(this.value);" />Java<br />	<input type="radio" name="language" value="VB" onclick="showCodeSample(this.value);" />Visual Basic<br />	<div id="CODE-SAMPLE">

</form>

<script type="text/&#106avascript">
var codeSampleStrings = new Object();
codeSampleStrings["C"] = "C code sample";
codeSampleStrings["Cplusplus"] = "C++ code sample";
codeSampleStrings["Csharp"] = "C# code sample";
codeSampleStrings["Delphi"] = "Delphi code sample";
codeSampleStrings["Java"] = "Java code sample";
codeSampleStrings["VB"] = "VB code sample";

function showCodeSample(strLang) {
changeCodeSample(codeSampleStrings[strLang]);
}

function changeCodeSample(strCodeSample) {
if(document.getElementById) {
var sampleContainer = document.getElementById("CODE-SAMPLE");
sampleContainer.innerHTML = strCodeSample;
}
}
</script>If you need more robust code samples, then I would create them on the page (instead of in code) and display them in a pre tag so the formatting sticks.

[Edited by - Maxamor on February 21, 2008 12:13:56 AM]

I fixed it up now I just need to get formatting and the position to show.