SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does this script work fine in IE but not Firefox/Safari?

    I'm using the following script to show/hide table rows. The table row displays properly in IE but in Safari/Firefox the table column on the right appears directly to the right of the content in the left box, instead of all in a row with all the other columns. Can someone tell me how to fix it?

    Code:
    function showThis(selected) {
    	var val = selected.value.toLowerCase();
    
    	var el = getObjRef('showthisdiv');
    
    	if(val == 'option 1') {
    		el.style.display='block';
    	} else {
    		el.style.display='none';
    	}
    }
    John Saunders

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    re: Firefox/Safari

    Try

    Code:
    function showThis(selected) {
    	var val = selected.value.toLowerCase();
    
    	var el = getObjRef('showthisdiv');
    
    	if(val == 'option 1') {
    		el.style.display=' ';
    	} else {
    		el.style.display='none';
    	}
    }

  3. #3
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Besides a Java (not JavaScript) method, what is getObjRef? Anyway, IE 6 and earlier (I don't know about 7) doesn't support the display:table-row; style, whereas FF and Konqueror (and, presumably, Safari) do. Perhaps that is the crux of the problem. Dwees technique, which would allow a modified item to return to its original state may work, if the element was previously displayed. Otherwise, you may need to branch your code based on browser support of table-row.

    The following page will allow you to test browsers for their support of display:table-row;

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    </style>
    <script type="text/javascript">
    window.onload=function(){
      document.getElementById('trOne').currentStyle? tell=document.getElementById('trOne').currentStyle.display : tell=document.defaultView.getComputedStyle(document.getElementById('trOne'),'').getPropertyValue('display');
      alert(tell);
    }
    </script>
    </head>
    <body>
    <table><tr id="trOne"><td></td></tr></table>
    </body>
    </html>
    Last edited by JVLB; Jan 2, 2007 at 21:49.

  4. #4
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code from getObjRef. Is this needed?

    Code:
    function getObjRef(id) {
    	if(document.getElementById)
    		return document.getElementById(id);
    	if(document.all)
    		return document.all[id];
    }
    John Saunders

  5. #5
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't appear that getObjRef has any bearing on your problem. I'd still look into the table element display properties that IE (at least historically) has failed to implement.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •