rashmi_k28 Posted August 13, 2008 Share Posted August 13, 2008 Hi, I tried this code make it both Internet and mozilla compactibility but no luck. This code works in IE and not in Firefox. How to make it both compactible. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript Content Viewer</title> <style type="text/css"> body {font-size:14px;line-height:18px;} h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;} div.block {margin-left:30px;} li {margin-top:2px;font-family:Trebuchet MS;} </style> </head> <body> <script type="text/javascript"> function openFull(el){ el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none' } </script> <h2 onclick="openFull(this)">Click here</h2> <div class="block"> <h3>Supported browsers</h3> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 13, 2008 Share Posted August 13, 2008 Firefox doesn't like properties that reference objects so you will have to use something other than nextSibling. Obviously this works, but it isn't too friendly for extending it: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript Content Viewer</title> <style type="text/css"> body {font-size:14px;line-height:18px;} h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;} div.block {margin-left:30px;} li {margin-top:2px;font-family:Trebuchet MS;} </style> </head> <body> <script type="text/javascript"> function openFull(){ test.style.display=='none'?test.style.display='block':test.style.display='none' } </script> <h2 onclick="openFull()">Click here</h2> <div class="block"> <h3 id="test">Supported browsers</h3> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
rashmi_k28 Posted August 19, 2008 Author Share Posted August 19, 2008 hi, I have used this code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript Content Viewer</title> <style type="text/css"> body {font-size:14px;line-height:18px;} h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;} div.block {margin-left:30px;} li {margin-top:2px;font-family:Trebuchet MS;} </style> </head> <body> <script type="text/javascript"> function openFull(el){ el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none' } </script> <div> <h2 onclick="openFull(this)">Click here</h2><div class="block"> <h3>Supported browsers</h3> </div> </div> </body> </html> When the page is opened <h3>Supported browsers</h3> should not be seen. on clicking the 'Click here' the suppported browser should be seen Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 19, 2008 Share Posted August 19, 2008 Oh, I see. Firefox found the whitespace as a text object and returned it as the "nextSibling." Your code should work fine without the witespace, but you have to set the display style as a property since that is what you are checking in the conditional statement. <div class="block" style="display:none"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.