Javascript: Dynamically setting width and height properties for scrollbars of fluid pages

It is usually pretty straight-forward to set a div to handle horizontal and vertical scrolling for fixed-width elements.

You will just need to set the following CSS properties for your div:

• width
• height
• overflow

You may also just use the overflow-x property to display the horizontal scrollbars or clip just the left/right edges of the content inside the div element.

You may also just use the overflow-y property to display the vertical scrollbars or clip the top/bottom edges of the content inside the div element.

Here's the link for values that you may use for these overflow properties.

But how do you handle a fluid page that adjusts to screen sizes and the width of the div is not fixed?

Javascript: Commented out HTML markup and DOM traversal

Here's the use case and different behaviors I observed in IE, Chrome and Firefox browsers today.

I have the markup snippet below in my jspf.

<table>
    <tr>
      <td>
          <input type="checkbox" id="someId" class="inputClass">
      </td>
      <td>
          <!-- <label  for="someId" >Your Label Here</label>  -->
          <label  for="someId" class="labelClass">Your Label Here</label>
      </td>
    </tr>
</table>

I wanted to get the first element node found inside the second <td>. 
When traversing this particular snippet using the nextElement method, IE is returning the commented out <label> tag as the first element node. Chrome and Firefox is smart enough to return the uncommented <label> tag.

I thought of trying jsp comment tags in place of the html comment tags to see if I would get a different result. I just didn't have enough time.

Javascript: Getting the next element node with cross-browser compatibility

Getting the next element node in IE is a pain. IE does not support the nextElementSibling method of the DOM Element object and using the nextSibling method also returns text nodes.

So I wrote the javascript function below which will only return an element node (node type of 1).

function getNextElement(srcElement) {
      var nextElement = srcElement.nextSibling;
      while (nextElement.nodeType != 1) {
            nextElement = nextElement.nextSibling;
      }
      return nextElement;
}