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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts

    Annoying problem with style="display:none"

    Is style="display:none" not universal HTML? My javascript is dependant on turning on and off div's with changing their style display, and it does not work right in almost all browsers!

    How else can I turn on and off divs? Not just seeing them or not, but not even leaving a space where they were.
    If I'm postin here, I NEED YOUR HELP!!

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    It should be fine. Do you have a link where we can view your code?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    To make things clear, style="display:none;" is not even HTML, it is CSS. Also I am assuming you are trying to set the display property using javascript
    Code:
    document.getElementById('elementid').style.display='none';
    Something along the lines of that should work.

  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Yes, that is exactly what I am doing.
    In IE on Mac, it works fine.
    In IE on PC, it works fine.
    In Safari, I change display to inline, that works fine, but changing it back to none leave an empty space where the div used to be.
    In FireFox on PC, the same empty area after switiching to none happens

    Do I just have to find another way of doing this that dosnt use turning on and off divs, or is there a way to make it work in those browsers?
    If I'm postin here, I NEED YOUR HELP!!

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Ultragames,

    this example works fine for me in...
    • Firefox
    • IE
    • Opera

    ...cannot speak for Safari, unfortunately.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Strict XHTML Template</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background-color:#666;
     }
    #one,#two {
         width:324px;
         height:200px;     
         margin: auto;border:1px solid #666;
     }
    #one {
         background-color:#fee;
     }
    #two {
         background-color:#eef;
     }
    #one,#two, #two a {
         font-family:verdana,arial,helvetica,sans-serif;
         font-size:16px;
         color:#000;
     }
    #one ul,#two ul {
         width:170px;
         margin:50px auto;
    }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function hideDiv() {
    if(document.getElementById("one").style.display=="none") {
       document.getElementById("one").style.display="block";
    
     }
    else {
       document.getElementById("one").style.display="none";
       }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="one">
      <ul>
        <li>this is div one</li>
        
      </ul>
    </div>
    
    <div id="two">
      <ul>
        <li>this is div two</li>
       <li><a href="#" onclick="hideDiv();return false">hide/display div one</a></li>
      </ul>
    </div>
    
    </body>
    </html>
    coothead

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by coothead
    Hi there Ultragames,

    this example works fine for me in...
    • Firefox
    • IE
    • Opera

    ...cannot speak for Safari, unfortunately.
    • Safari

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Quote Originally Posted by Bill Posters
    • Safari
    may we now infer from your post that you are the spokesman for...
    • Safari

    ...with regard to my snippet of code.

    coothead

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    I know the code is bulky, but it generated by PHP so...

    Code:
    <link href="form_editor.css" rel="stylesheet" type="text/css">
    <head>
    <script type="text/javascript">
    function checkBrowser(){
    	if( (navigator.appName == "Netscape") && (document.Errors.error.value == 'no') ){
    		alert ("The functions of this page may not display properly in this browser!");
    		alert ("Please use Microsoft Internet Explorer...");
    		document.Errors.error.value = "yes";
    		return false;
    	} else {
    		return true;
    	}
    }
    function change(showme) {
    	if( checkBrowser() == true ){
    		if (document.getElementById(showme).style.display == "none") {
    			if (navigator.appName == "Microsoft Internet Explorer") {
    				document.getElementById(showme).style.display = "inline";
    			}
    			else {
    				document.getElementById(showme).display="inline";
    			}
    		}
    		else {
    			if (navigator.appName == "Microsoft Internet Explorer") {
    				document.getElementById(showme).style.display = "none";
    			}
    			else {
    				document.getElementById(showme).display="none";
    			}
    		}
    	}
    }
    function on(input) {
    	document.getElementById(input).display="inline";
    	document.getElementById(input).style.display = "inline";
    }
    function off(input) {
    	document.getElementById(input).style.display = "none";
    	document.getElementById(input).display="none";
    }
    
    function switch_display(on, off) {
    	if (navigator.appName == "Microsoft Internet Explorer") {
    		document.getElementById(on).style.display = "inline";
    		document.getElementById(off).style.display = "none";
    	}
    	else {
    		document.getElementById(on).display="inline";
    		document.getElementById(off).display="none";
    	}
    }
    
    function expand(ID) {
    	document.changes.expanded.value = ID;
    }
    function enable(ID) {
    	document.changes.enable_disable.value = ID;
    	document.changes.enable_disable_to.value = "Y";
    	return true;
    }
    function disable(ID) {
    	document.changes.enable_disable.value = ID;
    	document.changes.enable_disable_to.value = "N";
    	return true;
    }
    </script>
    </head>
    <form action='index.php' method='post' name='changes'>
    <table cellspacing='0' cellpading='0' border='0' width='750'>
    <tr>
    <td width='500'>
    <table cellspacing='0' cellpading='0' border='0' width='500'>
    <tr><td><b><a href='./index.php'><font size='2' color='000066'>Name</font></a></b></td><td><b><a href='./index.php?sort=type'><font size='2' color='000066'>Type</font></a></b></td><td><b><a href='./index.php?sort=visible'><font size='2' color='000066'>Status</font></a></b></td><td>&nbsp;</td></tr><tr>
    	<td bgcolor='F0F6FF'>First Name</td>
    	<td bgcolor='F0F6FF'><font size='2' color='606060''>Text Box</font></td>
    	<td bgcolor='F0F6FF' width='175'><div style='display: inline' id='Enabled_Colapsed0'><a onClick=" switch_display('Enabled_Expanded0', 'Enabled_Colapsed0') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded0'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed0', 'Enabled_Expanded0'); enable('17') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed0', 'Enabled_Expanded0'); disable('17') "></div></td>
    	<td bgcolor='F0F6FF' width='18'>&nbsp;</td>
    </tr>
    <tr>
    	<td bgcolor='DCE6FD'>Last Name</td>
    	<td bgcolor='DCE6FD'><font size='2' color='606060''>Text Box</font></td>
    	<td bgcolor='DCE6FD' width='175'><div style='display: inline' id='Enabled_Colapsed1'><a onClick=" switch_display('Enabled_Expanded1', 'Enabled_Colapsed1') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded1'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed1', 'Enabled_Expanded1'); enable('3') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed1', 'Enabled_Expanded1'); disable('3') "></div></td>
    	<td bgcolor='DCE6FD' width='18'>&nbsp;</td>
    </tr>
    <tr>
    	<td bgcolor='F0F6FF'>My Button</td>
    	<td bgcolor='F0F6FF'><font size='2' color='606060''>Active Button</font></td>
    	<td bgcolor='F0F6FF' width='175'><div style='display: inline' id='Enabled_Colapsed2'><a onClick=" switch_display('Enabled_Expanded2', 'Enabled_Colapsed2') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded2'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed2', 'Enabled_Expanded2'); enable('8') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed2', 'Enabled_Expanded2'); disable('8') "></div></td>
    	<td bgcolor='F0F6FF' width='18'>&nbsp;</td>
    </tr>
    <tr>
    	<td bgcolor='DCE6FD'>Numbers</td>
    	<td bgcolor='DCE6FD'><font size='2' color='606060''>Checkbox - Group</font></td>
    	<td bgcolor='DCE6FD' width='175'><div style='display: inline' id='Enabled_Colapsed3'><a onClick=" switch_display('Enabled_Expanded3', 'Enabled_Colapsed3') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded3'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed3', 'Enabled_Expanded3'); enable('1') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed3', 'Enabled_Expanded3'); disable('1') "></div></td>
    	<td bgcolor='DCE6FD' width='18'><div align='right' style='display: inline' id='Plus3'><a onClick=" on('Enabled_Extend3'); on('Minus3'); off('Plus3') " class='block_hand'><font size='4'><b>+</b></font></a></div><div align='right' style='display: none' id='Minus3'><a onClick=" off('Enabled_Extend3'); off('Minus3'); on('Plus3') " class='block_hand'><font size='4'><b>-</b></font></a></div></td>
    </tr>
    <tr style='display: none' id='Enabled_Extend3'>
    	<td bgcolor='FFFFFF' colspan='2'>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;One<br>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Three<br>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Two<br></td>
    	<td bgcolor='FFFFFF' colspan='2'><div style='display: inline' id='Extended_Colapsed0'><a onClick=" on('Extended_Expanded0'); off('Extended_Colapsed0') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded0'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed0'); off('Extended_Expanded0'); enable('10'); expand('3') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed0'); off('Extended_Expanded0'); disable('10'); expand('3') "><br></div><div style='display: inline' id='Extended_Colapsed1'><a onClick=" on('Extended_Expanded1'); off('Extended_Colapsed1') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded1'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed1'); off('Extended_Expanded1'); enable('12'); expand('3') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed1'); off('Extended_Expanded1'); disable('12'); expand('3') "><br></div><div style='display: inline' id='Extended_Colapsed2'><a onClick=" on('Extended_Expanded2'); off('Extended_Colapsed2') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded2'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed2'); off('Extended_Expanded2'); enable('11'); expand('3') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed2'); off('Extended_Expanded2'); disable('11'); expand('3') "><br></div></td>
    	</tr>
    <tr>
    	<td bgcolor='F0F6FF'>Random</td>
    	<td bgcolor='F0F6FF'><font size='2' color='606060''>Select Menu</font></td>
    	<td bgcolor='F0F6FF' width='175'><div style='display: inline' id='Enabled_Colapsed4'><a onClick=" switch_display('Enabled_Expanded4', 'Enabled_Colapsed4') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded4'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed4', 'Enabled_Expanded4'); enable('4') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed4', 'Enabled_Expanded4'); disable('4') "></div></td>
    	<td bgcolor='F0F6FF' width='18'><div align='right' style='display: inline' id='Plus4'><a onClick=" on('Enabled_Extend4'); on('Minus4'); off('Plus4') " class='block_hand'><font size='4'><b>+</b></font></a></div><div align='right' style='display: none' id='Minus4'><a onClick=" off('Enabled_Extend4'); off('Minus4'); on('Plus4') " class='block_hand'><font size='4'><b>-</b></font></a></div></td>
    </tr>
    <tr style='display: none' id='Enabled_Extend4'>
    	<td bgcolor='FFFFFF' colspan='2'>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Brown<br>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Networking<br>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Scott Brown<br></td>
    	<td bgcolor='FFFFFF' colspan='2'><div style='display: inline' id='Extended_Colapsed0'><a onClick=" on('Extended_Expanded0'); off('Extended_Colapsed0') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded0'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed0'); off('Extended_Expanded0'); enable('6'); expand('4') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed0'); off('Extended_Expanded0'); disable('6'); expand('4') "><br></div><div style='display: inline' id='Extended_Colapsed1'><a onClick=" on('Extended_Expanded1'); off('Extended_Colapsed1') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded1'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed1'); off('Extended_Expanded1'); enable('7'); expand('4') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed1'); off('Extended_Expanded1'); disable('7'); expand('4') "><br></div><div style='display: inline' id='Extended_Colapsed2'><a onClick=" on('Extended_Expanded2'); off('Extended_Colapsed2') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded2'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed2'); off('Extended_Expanded2'); enable('5'); expand('4') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed2'); off('Extended_Expanded2'); disable('5'); expand('4') "><br></div></td>
    	</tr>
    <tr>
    	<td bgcolor='DCE6FD'>Server Programs</td>
    	<td bgcolor='DCE6FD'><font size='2' color='606060''>Radio Button - Group</font></td>
    	<td bgcolor='DCE6FD' width='175'><div style='display: inline' id='Enabled_Colapsed5'><a onClick=" switch_display('Enabled_Expanded5', 'Enabled_Colapsed5') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded5'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed5', 'Enabled_Expanded5'); enable('13') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed5', 'Enabled_Expanded5'); disable('13') "></div></td>
    	<td bgcolor='DCE6FD' width='18'><div align='right' style='display: inline' id='Plus5'><a onClick=" on('Enabled_Extend5'); on('Minus5'); off('Plus5') " class='block_hand'><font size='4'><b>+</b></font></a></div><div align='right' style='display: none' id='Minus5'><a onClick=" off('Enabled_Extend5'); off('Minus5'); on('Plus5') " class='block_hand'><font size='4'><b>-</b></font></a></div></td>
    </tr>
    <tr style='display: none' id='Enabled_Extend5'>
    	<td bgcolor='FFFFFF' colspan='2'>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Apache<br>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Cpanel<br>&nbsp;&nbsp;<b>-</b>&nbsp;&nbsp;Php<br></td>
    	<td bgcolor='FFFFFF' colspan='2'><div style='display: inline' id='Extended_Colapsed0'><a onClick=" on('Extended_Expanded0'); off('Extended_Colapsed0') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded0'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed0'); off('Extended_Expanded0'); enable('16'); expand('5') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed0'); off('Extended_Expanded0'); disable('16'); expand('5') "><br></div><div style='display: inline' id='Extended_Colapsed1'><a onClick=" on('Extended_Expanded1'); off('Extended_Colapsed1') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded1'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed1'); off('Extended_Expanded1'); enable('14'); expand('5') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed1'); off('Extended_Expanded1'); disable('14'); expand('5') "><br></div><div style='display: inline' id='Extended_Colapsed2'><a onClick=" on('Extended_Expanded2'); off('Extended_Colapsed2') " class='block_hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a><br></div><div style='display: none' id='Extended_Expanded2'><input type='submit' class='enable_button' value='Enable' onClick=" on('Extended_Colapsed2'); off('Extended_Expanded2'); enable('15'); expand('5') "> <input type='submit' class='enable_button' value='Disable' onClick=" on('Extended_Colapsed2'); off('Extended_Expanded2'); disable('15'); expand('5') "><br></div></td>
    	</tr>
    <tr>
    	<td bgcolor='F0F6FF'>Spacer</td>
    	<td bgcolor='F0F6FF'><font size='2' color='606060''></font></td>
    	<td bgcolor='F0F6FF' width='175'><div style='display: inline' id='Enabled_Colapsed6'><a onClick=" switch_display('Enabled_Expanded6', 'Enabled_Colapsed6') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded6'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed6', 'Enabled_Expanded6'); enable('18') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed6', 'Enabled_Expanded6'); disable('18') "></div></td>
    	<td bgcolor='F0F6FF' width='18'>&nbsp;</td>
    </tr>
    <tr>
    	<td bgcolor='DCE6FD'>Spacer</td>
    	<td bgcolor='DCE6FD'><font size='2' color='606060''></font></td>
    	<td bgcolor='DCE6FD' width='175'><div style='display: inline' id='Enabled_Colapsed7'><a onClick=" switch_display('Enabled_Expanded7', 'Enabled_Colapsed7') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded7'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed7', 'Enabled_Expanded7'); enable('19') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed7', 'Enabled_Expanded7'); disable('19') "></div></td>
    	<td bgcolor='DCE6FD' width='18'>&nbsp;</td>
    </tr>
    <tr>
    	<td bgcolor='F0F6FF'>Submit Button</td>
    	<td bgcolor='F0F6FF'><font size='2' color='606060''>Submit Button</font></td>
    	<td bgcolor='F0F6FF' width='175'><div style='display: inline' id='Enabled_Colapsed8'><a onClick=" switch_display('Enabled_Expanded8', 'Enabled_Colapsed8') " class='hand'><img src='edit_small.gif' border='0'> <font color='606060' size='2'>Enabled</font></a></div><div style='display: none' id='Enabled_Expanded8'><input type='submit' class='enable_button' value='Enable' onClick=" switch_display('Enabled_Colapsed8', 'Enabled_Expanded8'); enable('2') "> <input type='submit' class='enable_button' value='Disable' onClick=" switch_display('Enabled_Colapsed8', 'Enabled_Expanded8'); disable('2') "></div></td>
    	<td bgcolor='F0F6FF' width='18'>&nbsp;</td>
    </tr>
    </table>
    </td>
    <td width='250' valign='top'>
    Info here...</td>
    </tr>
    </table>
    <input type='hidden' name='expanded' value=''>
    <input type='hidden' name='enable_disable' value=''>
    <input type='hidden' name='enable_disable_to' value=''>
    <input type='hidden' name='sort' value=''>
    </form>
    If I'm postin here, I NEED YOUR HELP!!

  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    coothead

    I copied and pasted. Everything is there. The linke does nothing in IE (Mac) or Safari

    (Im at school on a Mac, nothing I can do)
    If I'm postin here, I NEED YOUR HELP!!

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Here is what I am using:
    document.getElementById(on).style.display = "block";
    // IF NOT IN I.E.
    document.getElementById(on).display="block";
    This acts very oddly in FireFox.

    Here is what coothead posted:
    document.getElementById("one").style.display="block";
    This works fine in FireFox.

    Any ideas?
    If I'm postin here, I NEED YOUR HELP!!

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    May I ask why you are using display:inline; display:block; should work for the most common day browsers. I can't vouch for safari.

  • #12
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    I switched it to block to match the previously posted code by coothead. I don't know which does what, only that it makes it visible. However, the problem in Firefox safari etc still occurse with block.
    If I'm postin here, I NEED YOUR HELP!!

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Location
    Canada, eh?
    Posts
    133
    Thanks
    2
    Thanked 3 Times in 3 Posts
    I have always had a problem using JS to switch between 'none' and 'block' for any browser but IE. It adds extra spaces (or <tr>s if you use it on a table) or doesn't display the element the way it was displayed when it first loaded.

    To bypass this (wierd) glitch in the rendering engine of what seems to be every browser, I set the element to inline, THEN none, or inline THEN block. It seems to work.

    Code:
    v = document.getElementById('the_element');
    v.style.display = "inline";
    v.style.display = "none";
    
    v.style.display = "inline";
    v.style.display = "block";

  • #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there all,

    you may find this method of controlling the extra space
    which occurs when applying display to tables of interest...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>hide or display trs</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background-color:#666;
     }
    #butts {
         width:230px;
         text-align:center;
         margin:20px auto;
     }
    #container {
         width:260px;
         margin:20px auto;
     }
    #tbl {
         font-family:verdana,arial,helvetica,sans-serif;
         font-size:20px;
         background-color:#fff;
         border:inset 6px #666;
     }
    #tbl td {
         width:82px;
         height:50px;
         border:solid 1px #000;
         text-align:center;
         line-height:50px;
     }
    #tr0,#tr1,#tr2,#tr3 {
         display:block;
     }
    #tr0 td {
         background-color:#f00;
     }
    #tr1 td {
         background-color:#0f0;
     }
    #tr2 td {
         background-color:#00f;
     }
    #tr3 td {
         background-color:#ff0;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function hideShow(id) {
    
    if(document.getElementById(id).style.display=="none") {
       document.getElementById(id).style.display="block";
       document.getElementById('tbl').style.display="";
     }
    else {
       document.getElementById(id).style.display="none";
     
    if((document.getElementById('tr0').style.display=="none")&&
       (document.getElementById('tr1').style.display=="none")&&
       (document.getElementById('tr2').style.display=="none")&&
       (document.getElementById('tr3').style.display=="none")) {
    
        document.getElementById('tbl').style.display="none"
    
       }
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="butts">
       <button onclick="hideShow('tr0')">row 0</button>
       <button onclick="hideShow('tr1')">row 1</button>
       <button onclick="hideShow('tr2')">row 2</button>
       <button onclick="hideShow('tr3')">row 3</button>
    </div>
    
    <div id="container">
      <table id="tbl">
      <tr id="tr0">
         <td>row0</td>
         <td>row0</td>
         <td>row0</td>
      </tr>
      <tr id="tr1">
         <td>row1</td>
         <td>row1</td>
         <td>row1</td>
     </tr>
      <tr id="tr2">
         <td>row2</td>
         <td>row2</td>
         <td>row2</td>
      </tr>
      <tr id="tr3">
         <td>row3</td>
         <td>row3</td>
         <td>row3</td>
      </tr>
    </table>
    </div>
    
    </body>
    </html>
    
    coothead

  • #15
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    I will try setting it to inline and then none. Or block and then none.

    Browser issues can be really annoying. Like IE on Mac dosnt show the 'code:' frames on codingforums, but it does show the 'php:' ones

    Anyways, Ill try that when i get home.
    If I'm postin here, I NEED YOUR HELP!!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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