Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Firefox and divs??

    I have a page (I've pasted a simplified version of the long page) where users click to show a certain bit of info and in IE the div shows fine - but in FF it remains hidden. Does FF need any special code to show a div?

    Thanks in advance
    Amy
    --------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <link rel="stylesheet" type="text/css" href="SSIstylesFF.css" rel="stylesheet">
    <script>
    var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;
    var isIE=document.all?true:false;
    function showhideinline(oDiv,flag){
    if(isIE)
    {
    if (flag) oDiv.style.display="inline" //if flag true - show the div
    else oDiv.style.display="none"
    }
    else if(isNS6)
    {
    if (flag) document.getElementById("oDiv").style.display="inline" //if flag true - show the div
    else document.getElementById("oDiv").style.display="none"
    }
    }
    </script>
    </HEAD>
    <style>
    .tag{background:#ffffff;width:100%;display:none}
    </style>

    <body>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td>
    <TABLE width="100%" cellSpacing="1" cellPadding="1" border="0">
    <TR>
    <TD class="NormalBold">Account Selections:</TD>
    <TD><select name="BillToGrid1:lstSelectionLists" id="BillToGrid1_lstSelectionLists">
    <option selected value="-5">Account I am logged into</option>
    <option value="-1">My Accounts</option>
    </select></TD>
    <TD class="Normal" width="160">&nbsp;&nbsp;&nbsp;<input type="checkbox" onclick="showhideinline(b,this.checked)">Show Selected Accounts</TD>
    <TD class="Normal" width="130"></TD>
    <TD class="Normal">&nbsp;</TD>
    </TR>
    </TABLE>
    </td>
    <td class="Normal" noWrap align="right" valign="middle"></td>
    </tr>
    </table>
    <div id="b" class="tag">
    <TABLE cellSpacing="0" width="100%" cellPadding="0" border="2">
    <TR>
    <TD>
    <TABLE cellSpacing="0" width="100%" cellPadding="0" border="0">
    <tr>
    <td>
    <table cellSpacing="0" width="100%" cellPadding="0" border="1" class="tableheader6">
    <tr>
    <td width="40%" align="left">Account Name</td>
    <td width="15%" align="left">Number</td>
    <td width="25%" align="left">Address</td>
    <td width="15%" align="left">City</td>
    <td width="2%" align="left">State</td>
    <td width="3%" align="left">Country</td>
    </tr>
    </table>
    </td>
    </tr>
    </TABLE>
    </TD>
    </TR>

    </TABLE>
    </div>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use this script:

    Code:
    <script>
    function showhideinline(oDiv,flag){
    if(document.all)
    {
    if (flag) document.all[oDiv].style.display="inline" //if flag true - show the div 
    else document.all[oDiv].style.display="none" 
    }
    else if(document.getElementById)
    {
    if (flag) document.getElementById(oDiv).style.display="inline" //if flag true - show the div 
    else document.getElementById(oDiv).style.display="none" 
    }
    } 
    </script>
    Call it this way:

    Code:
    <input type="checkbox" onclick="showhideinline('b',this.checked)">
    - John

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Why bother sniffing for document.all?
    How far back do you want to support IE?

    Code:
    <style type="text/css">
    
    	#b {
    		background: #fff;
    		width: 100%;
    	}
    
    	.hide {
    		display: none;
    	}
    	
    </style>
    Code:
    <script type="text/javascript">
    
    	function showhideinline(oDiv,flag){
    
    		document.getElementById(oDiv).className = (flag == true) ? '' : 'hide';
    
    	}
    
    </script>
    Code:
    ...
    
    <input type="checkbox" onclick="showhideinline('b',this.checked)">...
    
    ...
    
    <div id="b" class="hide">
    	...
    </div>
    It's increasingly seen as better practice to keep structure, presentation and behaviour separate. This means avoiding manipulating an element's style properties directly, instead using js to change the class (className) and setting how that class should be styled in the stylesheet along with the other presentational rules.
    Last edited by Bill Posters; 05-09-2006 at 05:51 PM.

  • #4
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thank you, Thank you, Thank you!!

    John - Thank you so much it worked perfectly!!!!!! Now all of my divs show and hide as like I want them to.
    Thanks again!!!
    Amy

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Am I the only one who noticed that in the else if(isNS6) version the call for the hidden elemnt is getElementById("oDiv") i.e. calling for the element that has the ID of oDiv and it's not searching for the OBJECT oDiv that is passed to the function?
    that's what coused the error I presume...

  • #6
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The Ace
    Am I the only one who noticed that in the else if(isNS6) version the call for the hidden elemnt is getElementById("oDiv") i.e. calling for the element that has the ID of oDiv and it's not searching for the OBJECT oDiv that is passed to the function?
    that's what coused the error I presume...
    I saw it too, that's part of why I advised the changes I did. Good eye, Ace!
    - John


  •  

    Posting Permissions

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