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('displ ay');
ShowHide('edit' );


}
function ShowHide(divId)
{
var id = document.getEle mentById(divId) ;
if (id.style.displ ay == "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]

Re: Hide Div Problem

Brent wrote:[color=blue]
> This is sorta my first little javascript, and I'm not having any success
> getting it to work:
>
> =============== ======
> function switchdiv()
> {
>
> ShowHide('displ ay');
> ShowHide('edit' );
>
>
> }
> function ShowHide(divId)
> {
> var id = document.getEle mentById(divId) ;
> if (id.style.displ ay == "none")
> {
> eval("id.style. display = 'block';");
> }
> else
> {
> eval("id.style. display = 'none';");
> }[/color]

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.getEle mentById(divId) ;
id.style.displa y = ('none' == id.style.displa y)? '':'none';
[color=blue]
> }
> =============== =====[/color]
[...]
--
Rob

[Brent]

Re: Hide Div Problem

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:[color=blue]
> Brent wrote:
>[color=green]
>> This is sorta my first little javascript, and I'm not having any
>> success getting it to work:
>>
>> =============== ======
>> function switchdiv()
>> {
>>
>> ShowHide('displ ay');
>> ShowHide('edit' ); }
>> function ShowHide(divId)
>> {
>> var id = document.getEle mentById(divId) ;
>> if (id.style.displ ay == "none")
>> {
>> eval("id.style. display = 'block';");
>> }
>> else
>> {
>> eval("id.style. display = 'none';");
>> }[/color]
>
>
> 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.getEle mentById(divId) ;
> id.style.displa y = ('none' == id.style.displa y)? '':'none';
>[color=green]
>> }
>> =============== =====[/color]
>
> [...][/color]

[RobG]

Re: Hide Div Problem

Brent wrote:[color=blue]
> 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![/color]

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('displ ay');
ShowHide('edit' );
}

function ShowHide(elId)
{
var el = document.getEle mentById(elId);
el.style.displa y = ('none' == el.style.displa y)? '':'none';
}
</script>

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

<div id="display">Th is is the display div</div>
<div id="edit" style="display: none;">And this is the edit div</div>


[...]

--
Rob

[Brent]

Re: Hide Div Problem

RobG wrote:[color=blue]
> Brent wrote:[/color]
[color=blue]
> Here is a working snippet that may provide a clue:
>[/color]
[color=blue]
> [...]
>[/color]

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

--Brent

[Geoff Cox]

Re: Hide Div Problem

On Sun, 25 Sep 2005 23:15:00 GMT, RobG <rgqld@iinet.ne t.au> wrote:
[color=blue]
> function ShowHide(elId)
> {
> var el = document.getEle mentById(elId);
> el.style.displa y = ('none' == el.style.displa y)? '':'none';
> }[/color]

Rob,

Is your line
[color=blue]
> el.style.displa y = ('none' == el.style.displa y)? '':'none';[/color]

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

The longer version would be helpful for me!

Thanks

Geoff

[ASM]

Re: Hide Div Problem

Geoff Cox a écrit :[color=blue]
>
> Rob,
>
> Is your line
>
>[color=green]
>> el.style.displa y = ('none' == el.style.displa y)? '':'none';[/color]
>
>
> a short version of an if () elsif () ?[/color]

again shorter ?

function ShowHide(elId) {
var el = document.getEle mentById(elId). style;
el.display = 'none'==el.disp lay? '':'none';
}

[color=blue]
> The longer version would be helpful for me![/color]

function ShowHide(elId)
{
var el = document.getEle mentById(elId). style;
if( 'none' == el.display )
{
el.display = '';
}
else
{
el.display = 'none';
}
}


function ShowHide(elId)
{
if( 'none' == document.getEle mentById(elId). style.display )
{
document.getEle mentById(elId). style.display = '';
}
else
{
document.getEle mentById(elId). style.display = 'none';
}
}


for browser understanting shortest version is the best

--
Stephane Moriaux et son [moins] vieux Mac