Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
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
Old September 9th, 2006, 07:04 AM
Authorized User
Join Date: Jun 2003
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"
<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;

<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";


<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

      <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>
          <td>Bill Gordon</td>
          <td>&nbsp;Awaiting Approval</td>

          <td>&nbsp;<a href="#" onClick="changeView('notes');">View </a></td>
         <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>sdf </p></td>
          <td>Brenda Hudson</td>
          <td>&nbsp;Under Review</td>

          <td>&nbsp;Cell Below Not Relevant</td>

End Code-------------------------------

Any help would be greatly appreciated.


Old September 10th, 2006, 06:44 AM
Authorized User
Join Date: Jun 2003
Posts: 79
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to erobb Send a message via Yahoo to erobb

Never Mind I got it worked out.


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

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