Biocomputing II

Showing / Hiding Content

e.g. drop-downs, form elements, etc.

Manipulating CSS

We can manipulate CSS from JavaScript as well as the HTML / DOM

Code 

// JavaScript
function setBackgroundColour(colour)
{
   document.body.style.background = colour;
}
   
function setElementBackgroundColour(element, colour)
{
   document.getElementById(element).style.background = colour;
}

<!-- The HTML -->
<div id='bg' style='border: 1pt solid black; padding: 2em; margin: 0 0 2em 0;'>
<button onclick="setBackgroundColour('#CCCCCC')">Grey body</button>
<button onclick="setBackgroundColour('#FFFFFF')">White body</button>
<button onclick="setElementBackgroundColour('bg','#FF0000')">Red div</button>
<button onclick="setElementBackgroundColour('bg','#FFFFFF')">White div</button>
</div>

[Download]

Showing/Hiding a div

We can use the same approach to hide or show a div:

Code 

// JavaScript
function showElement(element)
{
   document.getElementById(element).style.display = 'block';
}
function hideElement(element)
{
   document.getElementById(element).style.display = 'none';
}
function toggleElement(element)
{
   if(document.getElementById(element).style.display == 'none')
   {
      showElement(element);
   }
   else
   {
      hideElement(element);
   }
}

<!-- The HTML -->
<button onclick="toggleElement('showHide');">Toggle</button>
<div id='showHide' style='background: red; padding: 2em; margin: 2em; display: none'>
Some content!
</div>

[Download]

Manipulating a form

We can also use this approach to 'grey out' elements in a form:

Sequence analysis

Enter your name and the sequence to be analyzed, then select the sequence type and the types of analysis to be performed.

Enter your data...

Name:

Sequence:

Sequence Type: Protein   DNA

Analysis types:
Hydrophobicity
Accessibility
Secondary Structure Prediction

Code 

// JavaScript
function deactivateElement(element)
{
    document.getElementById(element).disabled = true;
}

function activateElement(element)
{
    document.getElementById(element).disabled = false;
}


<!-- The HTML -->
<form action='#' method='get'>
<h3>Sequence analysis</h3>
<p>Enter your name and the sequence to be analyzed, then select the
  sequence type and the types of analysis to be performed.</p>

<h4>Enter your data...</h4>
<p>Name:<br />
<input type='text' name='username' size='30' /></p>

<p>Sequence: <br />
<textarea name='seq' cols='60' rows='5'></textarea></p>

<p>Sequence Type: <input type='radio' name='dnaprot' value='protein' checked='checked' 
          onclick='activateElement("ss");'/> Protein&nbsp;&nbsp;
   <input type='radio' name='dnaprot' value='dna' 
          onclick='deactivateElement("ss");'> DNA</p>

<p>Analysis types:<br />
   <input type='checkbox' name='ss'/> 
       Hydrophobicity<br />
   <input type='checkbox' name='access'/> 
       Accessibility<br />
   <input type='checkbox' name='ss' id='ss' /> 
       Secondary Structure Prediction<br />
</p>
<p><input type='submit' value='Submit'/>
   <input type='reset' value='Clear form'/>
</p>
</form>

[Download]

Continue