By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

Hide Div Problem

P: n/a
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
Sep 25 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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
Sep 25 '05 #2

P: n/a
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';
}
====================


[...]

Sep 25 '05 #3

P: n/a
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
Sep 25 '05 #4

P: n/a
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
Sep 26 '05 #5

P: n/a
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

Sep 27 '05 #6

P: n/a
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
Sep 27 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.