[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"> Red</label><br>
<input type="radio" name="radio" id="radioTwo"
onclick="fnSwapClass('two');"><label
for="radioTwo"> 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