...

View Full Version : Annoying problem with style="display:none"



Ultragames
05-23-2005, 08:01 PM
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.

Bill Posters
05-23-2005, 08:35 PM
It should be fine. Do you have a link where we can view your code?

_Aerospace_Eng_
05-23-2005, 08:40 PM
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

document.getElementById('elementid').style.display='none';
Something along the lines of that should work.

Ultragames
05-23-2005, 08:47 PM
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?

coothead
05-23-2005, 09:18 PM
Hi there Ultragames,

this example works fine for me in...

Firefox
IE
Opera

...cannot speak for Safari, unfortunately. :o

<!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

Bill Posters
05-23-2005, 10:39 PM
Hi there Ultragames,

this example works fine for me in...

Firefox
IE
Opera

...cannot speak for Safari, unfortunately.
Safari

coothead
05-23-2005, 10:51 PM
Safari

may we now infer from your post that you are the spokesman for...

Safari

...with regard to my snippet of code. :D

coothead

Ultragames
05-23-2005, 10:53 PM
I know the code is bulky, but it generated by PHP so...


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

Ultragames
05-23-2005, 11:01 PM
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)

Ultragames
05-24-2005, 03:09 AM
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?

_Aerospace_Eng_
05-24-2005, 03:15 AM
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.

Ultragames
05-24-2005, 03:22 AM
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.

Eternity Angel
05-24-2005, 09:12 PM
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.



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

v.style.display = "inline";
v.style.display = "block";

coothead
05-24-2005, 10:07 PM
Hi there all,

you may find this method of controlling the extra space
which occurs when applying display to tables of interest...


<!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

Ultragames
05-24-2005, 10:44 PM
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.

Harry Armadillo
05-24-2005, 11:54 PM
you may find this method of controlling the extra space
which occurs when applying display to tables of interest...Why mutate a perfectly functional tr into a block-element? Wouldn't it make more sense (and be more semantically correct) to use the correct display value of "table-row" for your table rows?
Nevermind. I sometimes forget how crappy IE's css support is. :rolleyes:

Ultragames
05-25-2005, 08:09 PM
Here is the code I am using to turn off my divs and trs:
function off( input ) {
if( (navigator.appName == "Netscape") || (navigator.appName == "Microsoft Internet Explorer") ){
document.getElementById("" + input).style.display = "none";
} else {
document.getElementById("" + input).display = "none";
}
}

Here is the code that someone posted, that works great in Firefox and Netscape, (though not in Safari or Mac-IE):
function hideDiv() {
if(document.getElementById("one").style.display=="none") {
** document.getElementById("one").style.display="block";

*}
else {
** document.getElementById("one").style.display="none";
** }
*}

What is it about my code that is making these problems?

glenngv
05-26-2005, 05:58 AM
Here is the code I am using to turn off my divs and trs:
else {
document.getElementById("" + input).display = "none";
}
}

What's that for? There should be the style object in there. And also you don't need to do browser detection but object detection.

function off( input ) {
if (document.getElementById){
document.getElementById(input).style.display = "none";
}
}
That should work in all modern browsers.

Beeker
06-14-2005, 04:00 PM
I had this same problem, everything worked on IE, it worked on IE4 in 95 but not in mozilla or firefox.

The problem is how you call the function, not the function itself.

onClick="hideShow(q1)" works on IE

onClick="hideShow('q1')" works on IE and firezilla

jommie
05-09-2008, 09:09 PM
For better or for worse IE6,IE7 and Firefox all support the style.display=block and none. But each browser displays the style differently. To make something Show or Hide the easiest way that works in both IE and Firefox is style.display = 'none' for Hide and style.display = '' for Show. Using style.display ='block' works great in IE but creates another "block" of space in Firefox so it's better to set style.display to nothing.

Bill Posters
05-09-2008, 10:15 PM
Good advice, but a bit slow off the mark…


06-14-2005, 03:00 PM

;)


Btw, welcome to codingforums.

USFbobFL
10-29-2008, 11:17 AM
What I mean is that when you define the DIV tag in the body of your html, give it a default display style. For example:

< div id="myDiv" style="display:block;">

For some reason, if you fail to give the DOM object a default display style, you can't alter it using script. I don't know why, I just know that it works if you DO give it a default style.

I hope this little tip resolves your issue.

USFbobFL
10-29-2008, 11:57 AM
<html>
<head>
<title>testing</title>
</head>
<script language="JavaScript" type="text/javascript">
function toggleRowDisp(ctrlRef, trIDname){
var objRef = document.getElementById(trIDname);
if (objRef.style.display=="none"){
objRef.style.display="block";
ctrlRef.style.backgroundColor = "green";
} else {
objRef.style.display="none";
ctrlRef.style.backgroundColor = "silver";
}
}
</script>
<body>
<span id="cRow1" style="cursor:hand;background-color:green;color:white;" onclick="toggleRowDisp(this, 'tr1');">1</span>
<span id="cRow2" style="cursor:hand;background-color:green;color:white;" onclick="toggleRowDisp(this, 'tr2');">2</span>
<span id="cRow3" style="cursor:hand;background-color:green;color:white;" onclick="toggleRowDisp(this, 'tr3');">3</span>
<span id="cRow4" style="cursor:hand;background-color:green;color:white;" onclick="toggleRowDisp(this, 'tr4');">4</span>
<table>
<tr id=tr1 style="display:block;">
<td>ROW 1</td>
</tr>
<tr id=tr2 style="display:block;">
<td>ROW 2</td>
</tr>
<tr id=tr3 style="display:block;">
<td>ROW 3</td>
</tr>
<tr id=tr4 style="display:block;">
<td>ROW 4</td>
</tr>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum