[thelist] Simple JavaScript not working in Mozilla

Jeff Howden jeff at jeffhowden.com
Thu Sep 4 19:13:19 CDT 2003


andy,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Andy Warwick
>
> I'm trying to set up a really simple rollover reveal of
> a div, using the following code:
>
> <div id="caption" class="hidden">
> 	<p>Lorem ipsum dolor sit amet, consectetur
>        adipisicing elitt.</p>
> </div>
>
> <p id="caption-reveal"
>    onmouseover="classChange(caption, 'visible')"
>    onmouseout="classChange(caption, 'hidden')"
> >Rollover</p>
>
> <script type="text/javascript">
> 	function classChange( element, newclass )
> 	{
> 		element.className = newclass ;
> 	}
> </script>
>
> <style type="text/css">
> 	.hidden { visibility: hidden;  }
> 	.visible { visibility: visible; }
> </style>
>
> Works fine in IE (Mac and PC), Safari, but fails in
> Mozilla and related browsers.
>
> I must be missing something *really* obvious, but I
> can't see what...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

mozilla doesn't automatically create top level variables for each id found
in the document, like ie and other browsers do.  so, change the first
argument in your classChange function calls to strings, and use the
document.getElementById() method to access the object you wish to change.

<p id="caption-reveal"
   onmouseover="classChange('caption', 'visible')"
   onmouseout="classChange('caption', 'hidden')"
>Rollover</p>

<script type="text/javascript">
  function classChange( id, newclass )
  {
    element = document.getElementById(id);
    if(element)
      element.className = newclass ;
  }
</script>

.jeff

------------------------------------------------------
Jeff Howden - Web Application Specialist
Resume - http://jeffhowden.com/about/resume/
Code Library - http://evolt.jeffhowden.com/jeff/code/




More information about the thelist mailing list