Display problem in Firefox

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shreddie
    #1

    Display problem in Firefox

    Could anyone assist with the following problem?

    I'm using JavaScript to hide/show table rows depending on the option
    selected in radio buttons. The script works fine in IE but in Firefox
    the hidden rows take up page space even though their content is not
    visible.

    I have extracted the necessary code as shown below:

    *************** *************** *************** *************** ************

    <html>
    <head>
    <title>Firefox_ Error</title>
    <script>

    function setOptionField( selected){

    if (selected ==0) {
    document.getEle mentById('optio n1').style.disp lay='block';
    document.getEle mentById('optio n2').style.disp lay='none';
    document.getEle mentById('optio n3').style.disp lay='none';
    } else if (selected ==1) {
    document.getEle mentById('optio n1').style.disp lay='none';
    document.getEle mentById('optio n2').style.disp lay='block';
    document.getEle mentById('optio n3').style.disp lay='none';
    } else {
    document.getEle mentById('optio n1').style.disp lay='none';
    document.getEle mentById('optio n2').style.disp lay='none';
    document.getEle mentById('optio n3').style.disp lay='block';
    }
    }

    </script>

    </head>
    <body>
    <table border='0'>
    <tr><td><inpu t name="rdSelect" type="radio" value="Row 1"
    onclick=setOpti onField(0) checked></td><td>Display row 1</td></tr>
    <tr><td><inpu t name="rdSelect" type="radio" value="Row 2"
    onclick=setOpti onField(1)></td><td>Display row 2</td></tr>
    <tr><td><inpu t name="rdSelect" type="radio" value="Row 3"
    onclick=setOpti onField(2)></td><td>Display row 3</td></tr>
    </table>

    <table border = "1">
    <tr id="option1" style="display: block"><td><b>R ow One
    Displayed</b></td></tr>
    <tr id="option2" style="display: none"><td><b>Ro w Two
    Displayed</b></td></tr>
    <tr id="option3" style="display: none"><td><b>Ro w Three
    Displayed</b></td></tr>
    </table>
    </body>
    </html>

    *************** *************** *************** *************** ************

    Thanks in advance.
    Tags: javascript display
    • David Dorward
      #2
      Re: Display problem in Firefox

      shreddie wrote:
      [color=blue]
      > I'm using JavaScript to hide/show table rows depending on the option
      > selected in radio buttons. The script works fine in IE but in Firefox
      > the hidden rows take up page space even though their content is not
      > visible.[/color]
      [color=blue]
      > <tr id="option1" style="display: block">[/color]

      Bug in IE. Table rows should be display: table-row, not display: block.

      Toggle between "none" and "" to cope with browsers which follow the standard
      and IE.

      --
      David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
      Home is where the ~/.bashrc is

        Comment

        • Grant Wagner
          #3
          Re: Display problem in Firefox

          shreddie wrote:
          [color=blue]
          > Could anyone assist with the following problem?
          >
          > I'm using JavaScript to hide/show table rows depending on the option
          > selected in radio buttons. The script works fine in IE but in Firefox
          > the hidden rows take up page space even though their content is not
          > visible.
          >
          > I have extracted the necessary code as shown below:
          >
          > *************** *************** *************** *************** ************
          >
          > <html>
          > <head>
          > <title>Firefox_ Error</title>
          > <script>
          >
          > function setOptionField( selected){
          >
          > if (selected ==0) {
          > document.getEle mentById('optio n1').style.disp lay='block';[/color]

          The default -display- style of a table row is not "block", it is "table-row".
          But IE does not understand "table-row", so the best choice is to set the
          display style to an empty string "", which should result in the default
          style, which should work in most user agents that support getElementById( ):

          document.getEle mentById('optio n1').style.disp lay = '';

          Below is more generic code to allow you to do what you are doing for any
          number of rows:

          <script type="text/javascript">
          function setOptionField( selected) {
          if (/Row (\d+)/.test(selected) && RegExp.$1 != '') {
          var item = RegExp.$1;
          document.getEle mentById('optio n' + item).style.dis play = '';
          var node;
          var ii = 1;
          while (node = document.getEle mentById('optio n' + ii)) {
          if (ii != item) {
          node.style.disp lay = 'none';
          }
          ++ii;
          }
          }
          }
          </script>

          And use

          <input name="rdSelect"
          type="radio" value="Row 2"
          onclick="setOpt ionField(this.v alue);">

          Please note that my first attempt at it was:

          while (node = document.getEle mentById('optio n' + ii)) {
          if (ii == item) {
          node.style.disp lay = '';
          } else {
          node.style.disp lay = 'none';
          }
          ++ii;
          }

          which did not work and resulted in the same behavior you saw. You _must_ set
          the -display- style on the visible one prior to turning off the ones that are
          not visible.

          --
          Grant Wagner <gwagner@agrico reunited.com>
          comp.lang.javas cript FAQ - http://jibbering.com/faq

            Comment

            • shreddie
              #4
              Re: Display problem in Firefox

              David / Grant

              Thankyou both very much. Problem rectified. This was my first post to
              Google groups and I'm quite taken aback by yours/others promptness and
              willing to help!!

              Thanks again, cheers Shreddie.

                Comment

                Previous template Next
                Working...