[thelist] Formatting On The Fly

Aylard JA (James) jaylard at equilon.com
Thu Mar 8 14:21:01 CST 2001


Salvatore,

> Is it possible to apply text formatting on the fly, based on 
> a user's mouse
> click?

	Yes, very possible in IE 4+ and Netscape 6. Through some trickery,
you could probably mimic this in Netscape 4.x, but I'll avoid that messy
option for now. One suggestion that I would make that might differ from that
of others is to swap classNames in script, rather than iterate through a
series of style-property changes. Here are snippets of simplified code:

	In the head:

<style type="text/css">
  .one {
  	background-color: #ff0000 ; // red
  	color: #ffffff ; // white
  }
  .two {
  	background-color: #ffff00 ; // yellow
  	color: #000000 ; // black
  }
</style>
<script type="text/javascript">
  <!--
  	function fnSwapClass(vClass) {
    	if (document.getElementById) { // for N 6 and IE 5/5.5
      	document.getElementById("divText").className = vClass ;
      }
    	else {
      	if (document.all) { // for IE 4
        	document.all.divText.className = vClass ;
        }
      }
    }
  // -->
</script>

	And in the body:

<div id="divText" class="one">This is some text</div>
<form>
  <input type="radio" name="radio" id="radioOne" checked="checked"
    onclick="fnSwapClass('one');"><label 
      for="radioOne">&nbsp;Red</label><br>
  <input type="radio" name="radio" id="radioTwo"
    onclick="fnSwapClass('two');"><label 
      for="radioTwo">&nbsp;Yellow</label><br>
</form>

	The benefit of swapping classes is that it makes your script much
simpler, and it allows you to use the classes elsewhere throughout your
document if you'd like. Generally, a cleaner approach.

James Aylard




More information about the thelist mailing list