Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 9th, 2006, 07:04 AM
Authorized User
 
Join Date: Jun 2003
Location: Richmond, VA, USA.
Posts: 79
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to erobb Send a message via Yahoo to erobb
Default JavaScript, CSS, DOM - xBrowser Problem

I have a small script that loads a table with some elements visiblity = hidden and display = none. When clicking on the link it "opens" the hidden table elements. When click on the link again it "hides" the elements.

Now this works dandy in IE but in FireFox the element "opens" but when you click on it again to "hide" the text in the cell disappears but the actual element itself does not "dissappear" leaving a big blank space.

Working sample is here http://www.jhdesigninc.com/testJava.asp Its not "pretty" because I eliminated all the code I possible could to make the problem easier to understand.

Code Sample-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta Http-Equiv="Content-Type" Content="text/html; charset=iso-8859-1">
<title> blah-blah </title>
<style type="text/css">
<!--
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
-->
</style>


<script type="text/JavaScript">
function changeView(objChange){
    /*have tried sniffing browser and not using getElement
        didnt seem to help with display or visibilty
        Im missing something really basic
    */
    if (document.getElementById(objChange).style.visibili ty == 'visible'){
        document.getElementById(objChange).style.display = "none";
        document.getElementById(objChange).style.visibilit y = "hidden";
    } else {
        document.getElementById(objChange).style.display = "block";
        document.getElementById(objChange).style.visibilit y = "visible";
    }

}
</SCRIPT>
</head>
<body>

<table width="449" border="0" cellspacing="1" cellpadding="1">
  <tr valign="top">
    <td width="100%" align="left" nowrap> <span class="style1">Click on the LINK Its works in IE and Netscape but not Fox. <br>

      The window does not go to display:none and visibility:hidden<br>
    In Firefox compare IE and Firefox by clicking on the view<br>
    button multiple times in both browsers
</span><br>
<br>
<BR>

      <table width="100%" border="0" cellspacing="2" cellpadding="0" id="clickTbl">
        <tr class="tblHeader">
          <td class="tblHeader">Approver</td>
          <td class="tblHeader">Status</td>

          <td class="tblHeader">Date</td>
          <td class="tblHeader">Time</td>
          <td class="tblHeader">Notes</td>
        </tr>
        <tr>
          <td>Bill Gordon</td>
          <td>&nbsp;Awaiting Approval</td>

          <td>&nbsp;Pending</td>
          <td>&nbsp;Pending</td>
          <td>&nbsp;<a href="#" onClick="changeView('notes');">View </a></td>
        </tr>
         <tr id="notes" style="visibility:hidden; display:none;">
         <td colspan="5" bgcolor="#993399"><p>some tesa safd asfd asddfdasdf
              fasd fasfd as dfas df asdf asdf asdf as dfas df asdf asd f asdf
              asdf asd asdfasda</p>
            <p>asdasdfasdf</p>

            <p>asdf</p>
            <p>a</p>
            <p>sdf </p></td>
        </tr>
        <tr>
          <td>Brenda Hudson</td>
          <td>&nbsp;Under Review</td>

          <td>&nbsp;Pending</td>
          <td>&nbsp;Pending</td>
          <td>&nbsp;Cell Below Not Relevant</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>

</html>
End Code-------------------------------

Any help would be greatly appreciated.

Thanks,
Earl

Reply With Quote
  #2 (permalink)  
Old September 10th, 2006, 06:44 AM
Authorized User
 
Join Date: Jun 2003
Location: Richmond, VA, USA.
Posts: 79
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to erobb Send a message via Yahoo to erobb
Default

Never Mind I got it worked out.

Earl

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Difficulty writing javascript to access dom ldoyle Javascript How-To 2 February 23rd, 2007 11:25 AM
New JavaScript DOM article posted jminatel Javascript 0 August 26th, 2006 01:43 PM
Netscape Layers Using CSS+JavaScript(DOM) anshul Javascript How-To 2 May 26th, 2004 01:51 PM
XML DOM and Javascript lilu XML 3 September 25th, 2003 07:55 AM



All times are GMT -4. The time now is 12:31 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.