Tuesday, May 19, 2009

4 Javascript functions - Post 1 


<html>
  <head>
    <title>Javascript examples</title>
    <style>
.c1 {} .c2{} .c3 {} .c4{} .c5 {} .c6{} .c7 {} .c8{} .c9 {} .c10{}
.LockOff { display: none; visibility: hidden; }
.LockOn
{
  display: block;
  visibility: visible;
  position: absolute;
  z-index: 998;
  top: 0px;
  left: 0px;
  width: 105%;
  height: 105%;
  font-size: 4em;
  background-color: #ccc;
  text-align: center;
  padding-top: 20%;
  padding-bottom: 40%;
  filter: alpha(opacity=55);
  opacity: 0.55;
}
    </style> 
    <script>
var previousRow;
var previousRowColor;
function highlightRow(row, newColor)
{
  if(previousRow != null) previousRow.style.backgroundColor = previousRowColor;
  if(previousRow != row)
  {
    previousRow = row;
    previousRowColor = row.style.backgroundColor;
    row.style.backgroundColor = newColor;
  }
  else previousRow = null;
}

function getRadioValue(radioObj)
{
    if (!radioObj) return "";
    if(radioObj.checked) return radioObj.value;
    for (var i = 0; i < radioObj.length; i++) { if (radioObj[i].checked) return radioObj[i].value; }
    return "";
}

function hideClass(className)
{
  for(i=0; i<document.styleSheets.length; i++)
  {
    rules = document.styleSheets[i].rules;
    if(rules == null) rules = document.styleSheets[i].cssRules;
    
    for(j=0; j<rules.length; j++)
    {
     if(rules[j].selectorText == '.'+className) rules[j].style.display='none';
    }
  }
}

function w()
{
  var lock = document.getElementById('pleaseWaitPane');
  if(lock) lock.className = 'LockOn';
}

function no_w()
{
  var lock = document.getElementById('pleaseWaitPane');
  if(lock) lock.className = 'LockOff';
}
    </script>
  </head>
  <body>
    <h2>Here are examples of 4 useful javascript functions</h2>
    <div id="pleaseWaitPane" class="LockOff">
   Please Wait   
   <button onclick="no_w(); document.execCommand('stop');">Cancel</button>
 </div>
 
 <a href="https://webapp1.tamc.amedd.army.mil/phonelist/slowLoading.jsp" onclick="w();">Wait example link</a>
 
    <form method="get" action="https://webapp1.tamc.amedd.army.mil/phonelist/slowLoading.jsp" onsubmit="w();">
      <input type="submit" value="Wait example form"/>
 </form>

 <input type="radio" name="radio1" value="value1"/>value1
 <input type="radio" name="radio1" value="value2"/>value2
 <input type="radio" name="radio1" value="value3"/>value3
 <input type="radio" name="radio1" value="value4"/>value4
    
 <button onclick="var str=getRadioValue(radio1); if(str == '') alert('Please choose a value'); else alert('You choose '+str); ">
   getRadioValue example
 </button><br/><br/>
 
 <b>HideColumn example</b>: click an x to temporarily hide a column.<br/>
 <b>HighlightRow example</b>: click a row to see it highlighted.<br/>
    <table border="1">
      <tr>
     <th class="c1">col1 <a href="#" onclick="hideClass('c1');">x</a></th>
     <th class="c2">col2 <a href="#" onclick="hideClass('c2');">x</a></th>
     <th class="c3">col3 <a href="#" onclick="hideClass('c3');">x</a></th>
     <th class="c4">col4 <a href="#" onclick="hideClass('c4');">x</a></th>
     <th class="c5">col5 <a href="#" onclick="hideClass('c5');">x</a></th>
     <th class="c6">col6 <a href="#" onclick="hideClass('c6');">x</a></th>
   </tr>
      <tr onclick="highlightRow(this,'pink');"><td class="c1">test1</td><td class="c2">test2</td><td class="c3">test3</td><td class="c4">test4</td><td class="c5">test5</td><td class="c6">test6</td></tr>
      <tr onclick="highlightRow(this,'pink');"><td class="c1">test1</td><td class="c2">test2</td><td class="c3">test3</td><td class="c4">test4</td><td class="c5">test5</td><td class="c6">test6</td></tr>
      <tr onclick="highlightRow(this,'pink');"><td class="c1">test1</td><td class="c2">test2</td><td class="c3">test3</td><td class="c4">test4</td><td class="c5">test5</td><td class="c6">test6</td></tr>
      <tr onclick="highlightRow(this,'pink');"><td class="c1">test1</td><td class="c2">test2</td><td class="c3">test3</td><td class="c4">test4</td><td class="c5">test5</td><td class="c6">test6</td></tr>
      <tr onclick="highlightRow(this,'pink');"><td class="c1">test1</td><td class="c2">test2</td><td class="c3">test3</td><td class="c4">test4</td><td class="c5">test5</td><td class="c6">test6</td></tr>
      <tr onclick="highlightRow(this,'pink');"><td class="c1">test1</td><td class="c2">test2</td><td class="c3">test3</td><td class="c4">test4</td><td class="c5">test5</td><td class="c6">test6</td></tr>
    </table>
 
  </body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)