Javascript Prototype .visible() method not working in Internet Explorer

Question

I'm using the Prototype (and script.aculo.us) javascript library - since it's what comes with Rails "as standard" - and having a problem with the following snippet:

function show_hide_selects()
{
  chkbox = document.getElementById('game_random_select')
  seldiv = document.getElementById('card_selects')

  if (chkbox.checked && seldiv.visible())
  {
    Effect.BlindUp('card_selects', {duration: 0.5})
    Effect.BlindDown('random_options', {duration: 0.5})
  }
  else if (!chkbox.checked && !seldiv.visible())
  {
    Effect.BlindUp('random_options', {duration: 0.5})
    Effect.BlindDown('card_selects', {duration: 0.75})
  }
}

This snippet is fired onClick for the 'game_random_select' checkbox which controls whether the user wants to specify a list of card-names, or leave the server to make a random choice. It should hide the irrelevant set of form elements, and show the relevant set.

This works fine in FireFox, but doesn't work in Internet Explorer (tested IE 8). It throws an error "Object doesn't support this property or method" on one of the if-test lines; using the JS debugger indicates that it's seldiv.visible() that doesn't work.

How can I detect the visibility of the element in IE - surely Prototype should be completely compatible with IE? Or am I never going to be able to manage it with Prototype, and should switch to jQuery - which would obviously be Effort, since I'll need to get Rails to comply as well.

Answer 1

You can try getStyle http://www.prototypejs.org/api/element/getStyle, it will return null if the element has a display property of none.

Answer 2

Huh. Sorted this myself, thanks to reading the API documentation and spotting something I wasn't doing.

seldiv.visible() doesn't work, but $('card_selects').visible() does.