[thelist] Javascript and hidden layers - odd onclick behaviour

.jeff jeff at members.evolt.org
Fri Feb 21 19:34:01 CST 2003


joel,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Joel Canfield
>
> I'm playing with invisible layers. I have a link which
> toggles the 'glcodes' layer's visibility, and within
> that layer, another link, which toggles the 'engproj'
> layer's visibility.
>
> What's happening is that the first click displays the
> 'glcodes' layer, but I have to click that link twice
> to display the 'engproj' layer. Then, when I toggle the
> 'engproj' layer off, I have to click my original link
> twice to toggle the 'glcodes' layer off.
>
> Waddupwiddat?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

ooooh, logic games.  my favorite.

after looking at the code, here's the values that the variable 'state' is
set to for each of the actions you describe above.

click glcodes: state = 'hidden' -> set to 'visible';
  set glcodes: 'visible';
click engproj: state = 'visible' -> set to 'hidden';
  set engproj: 'hidden';
click engproj: state = 'hidden' -> set to 'visible';
  set engproj: 'visible';
click engproj: state = 'visible' -> set to 'hidden';
  set engproj: 'hidden';
click glcodes: state = 'hidden' -> set to 'visible';
  set glcodes: 'visible';
click glcodes: state = 'visible' -> set to 'hidden';
  set glcodes: 'hidden';

clear as mud?

what's causing this is the storage of the state in a single variable.  one
word -- don't.  check the state of the object itself before deciding what to
do.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> function showhide(layer_ref)
> {
> 	if (state == 'visible')
> 	{
> 		state = 'hidden';
> 	} else
> 	{
> 		state = 'visible';
> 	}
>     eval( "document.all." + layer_ref + ".style.visibility = state");
> }
> </script>
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

ewwww boy.  more eval() fun.  ;p

function showhide(layerID)
{
  if(documet.getElementById)
    layerObj = document.getElementById(layerID);
  else if(document.all)
    layerObj = document.all[layerID];
  else
    layerObj = null;
  if(layerObj)
  {
    visibility = layerObj.style.visibility;
    layerObj.style.visibility = (!visibility || visibility == 'visibile') ?
'hidden' : 'visible';
  }
}

see if that doesn't clear things up for ya.

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/




More information about the thelist mailing list