Hide Div Problem

[Brent]

This is sorta my first little javascript, and I'm not having any success
getting it to work:

=====================
function switchdiv()
{

ShowHide('display');
ShowHide('edit');
}
function ShowHide(divId)
{
var id = document.getElementById(divId);
if (id.style.display == "none")
{
eval("id.style.display = 'block';");
}
else
{
eval("id.style.display = 'none';");
}
}
====================

When I call switchdiv, the script succeeds at hiding 'display' but
doesn't seem to show 'edit'. However, if I run switchdiv like this:

===================

function switchdiv()
{

ShowHide('edit');
}

==================

....it shows 'edit' just fine. I must be missing something obvious!

Thanks for any help!

--Brent

[RobG]

Brent wrote:

This is sorta my first little javascript, and I'm not having any success
getting it to work:

=====================
function switchdiv()
{

ShowHide('display');
ShowHide('edit');
}
function ShowHide(divId)
{
var id = document.getElementById(divId);
if (id.style.display == "none")
{
eval("id.style.display = 'block';");
}
else
{
eval("id.style.display = 'none';");
}
There is almost never a need for eval - just don't use it.

You should toggle the display between 'none' and ''. The empty string
'' will let the element return to its default. Replace the function
above with:

function ShowHide(divId)
{
var id = document.getElementById(divId);
id.style.display = ('none' == id.style.display)? '':'none';
}
====================

[...]
--
Rob

[Brent]

Thanks for your help, Rob. I can see that this code is more efficient.
I've implemented it into my page. But it has the same behavior as the
old bit, so I'm not sure at all where the problem is. Maybe it's a
z-index issue, such that the hidden div goes about hiding the shown div?
Then again, nothing on the page is absolutely positioned. Confusing!
RobG wrote:

Brent wrote:

This is sorta my first little javascript, and I'm not having any
success getting it to work:

=====================
function switchdiv()
{

ShowHide('display');
ShowHide('edit'); }
function ShowHide(divId)
{
var id = document.getElementById(divId);
if (id.style.display == "none")
{
eval("id.style.display = 'block';");
}
else
{
eval("id.style.display = 'none';");
}

There is almost never a need for eval - just don't use it.

You should toggle the display between 'none' and ''. The empty string
'' will let the element return to its default. Replace the function
above with:

function ShowHide(divId)
{
var id = document.getElementById(divId);
id.style.display = ('none' == id.style.display)? '':'none';

}
====================

[...]

[RobG]

Brent wrote:

Thanks for your help, Rob. I can see that this code is more efficient.
I've implemented it into my page. But it has the same behavior as the
old bit, so I'm not sure at all where the problem is. Maybe it's a
z-index issue, such that the hidden div goes about hiding the shown div?
Then again, nothing on the page is absolutely positioned. Confusing!

Please don't top-post - reply directly below a trimmed quote from the
previous post. You seem to be using Thunderbird, it should
automatically put the cursor below the quoted message you are replying to.

Setting display to 'none' effectively removes the element from the page.
I can't tell what your issue is, you need to show a bit of the HTML
that you are using and your modified code.

Here is a working snippet that may provide a clue:

<script type="text/javascript">
function switchdiv()
{
ShowHide('display');
ShowHide('edit');
}

function ShowHide(elId)
{
var el = document.getElementById(elId);
el.style.display = ('none' == el.style.display)? '':'none';
}
</script>

<input type="button" value="Switch divs" onclick="switchdiv();">

<div id="display">This is the display div</div>
<div id="edit" style="display: none;">And this is the edit div</div>
[...]

--
Rob

[Brent]

RobG wrote:

Brent wrote: Here is a working snippet that may provide a clue:
[...]

I used your example to redo to my page, and...it works! Thanks for your
help!

--Brent

[Geoff Cox]

On Sun, 25 Sep 2005 23:15:00 GMT, RobG <rg***@iinet.net.au> wrote:

function ShowHide(elId)
{
var el = document.getElementById(elId);
el.style.display = ('none' == el.style.display)? '':'none';
}
Rob,

Is your line
el.style.display = ('none' == el.style.display)? '':'none';

a short version of an if () elsif () ?

The longer version would be helpful for me!

Thanks

Geoff

[ASM]

Geoff Cox a écrit :

Rob,

Is your line

el.style.display = ('none' == el.style.display)? '':'none';

a short version of an if () elsif () ?

again shorter ?

function ShowHide(elId) {
var el = document.getElementById(elId).style;
el.display = 'none'==el.display? '':'none';
}

The longer version would be helpful for me!

function ShowHide(elId)
{
var el = document.getElementById(elId).style;
if( 'none' == el.display )
{
el.display = '';
}
else
{
el.display = 'none';
}
}
function ShowHide(elId)
{
if( 'none' == document.getElementById(elId).style.display )
{
document.getElementById(elId).style.display = '';
}
else
{
document.getElementById(elId).style.display = 'none';
}
}
for browser understanting shortest version is the best

--
Stephane Moriaux et son [moins] vieux Mac