#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    London
    Posts
    2
    Rep Power
    0

    How to comply with all...css help needed


    Hi All,

    I have a problem to solve.

    I have a table whose rows can be either in edit or view mode. For that I need to toggle the visibility and the display of both of them. I had all of this working in MSIE 5.5...but I thought it would be a lot better if I could make it work in Opera. And I made it work...it took some code refining, adjusting firmly to w3 standards but...I end up with a solution that was working in Opera 7 but not working in IE 5.5. And from what I have seen in forums, the solotion for Opera 7 its not supported by MSIE...

    This is a mockup of my code in Opera:
    <table>
    <tr style="visibility: visible; display: table-row">
    <td> Some data</td>
    </tr>
    </table>

    whereas in MSIE I would use display: inline...

    I inmediately thought of browser sniffing...but that means keeping two sets of code for the javascript file ...and then I have to take care too of the embedded styles in the html pages. This puts me off a bit. I would also like to achieve the ideal of one code works for both...

    I have been playing with the idea of not using a table and using divs instead of rows...but I would like to keep it in that way...
    Has anyone got any idea of how can I do it keep the rows, and make it work both in Opera and MSIE? That would be very useful? Has anyone solved this problem before?

    Thanks in advance for your help!

    Belen
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    How about this. It uses the behavior that IE will throw an error when trying to set the display property to 'table-row'. The script instead sets the property to 'inline' in case an error would have been reported... It works in IE5.5, Opera7 and Mozilla.
    Code:
    function showHideRow(id) {
    	var myElem = document.getElementById(id)
    	if (myElem.style.display == 'none') {
    		try {
    			myElem.style.display = 'table-row'
    		}
    		catch(e) {
    			myElem.style.display = 'inline'
    		}
    	}
    	else {
    		myElem.style.display = 'none'
    	}
    }
    </script>
    </head>
    <body>
    <div onclick="showHideRow('mytablerow')">show/hide</div>
    <table>
    <tr id="mytablerow">
    <td> Some data</td>
    </tr>
    </table>
    Hope this helps,
    Jeroen
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    London
    Posts
    2
    Rep Power
    0
    Thanks a lot for your help! I'll try right now.
  6. #4
  7. No Profile Picture
    The New User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    109
    Rep Power
    12
    Devshed just had an article on error catching but, correct me if i'm wrong, it only works with IE6 and NS6+. Thus it might not work on IE5.5, like you have. Hope that helps.

    http://www.devshed.com/Client_Side/J...ion/page1.html <-- link to the article

    --Neil
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    The script I proposed works in IE5.5, Opera7 and Mozilla. (I tested it on my machines...)

    According to Microsoft: "In Internet Explorer 5 and later, you can use the try...catch...finally statement to implement error handling in JScript." [http://support.microsoft.com/default...b;en-us;183616]

    Jeroen
  10. #6
  11. No Profile Picture
    The New User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    109
    Rep Power
    12
    Oh ok, thats good... might wanna tell the Devshed writer that then

    --Neil

IMN logo majestic logo threadwatch logo seochat tools logo