my hide/display function fails when element begins display:none

[libsfan01]

function switch_display( switchme) {
var el = document.getEle mentById(switch me);
el.style.displa y = (el.style.displ ay == 'none')? '' : 'none';
}

im using this function to switch the display on and off of a given
element. BUT if the element is set to 'none' to begin with then it wont
display it.

please help...

[Evertjan.]

libsfan01 wrote on 16 jan 2007 in comp.lang.javas cript:

function switch_display( switchme) {
var el = document.getEle mentById(switch me);
el.style.displa y = (el.style.displ ay == 'none')? '' : 'none';
}

im using this function to switch the display on and off of a given
element. BUT if the element is set to 'none' to begin with then it wont
display it.

I doubt that, please show a working nonworking example.

What do you exactly mean by
"the element is set to 'none' to begin with"?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[ASM]

libsfan01 a écrit :

function switch_display( switchme) {
var el = document.getEle mentById(switch me);
el.style.displa y = (el.style.displ ay == 'none')? '' : 'none';
}

im using this function to switch the display on and off of a given
element. BUT if the element is set to 'none' to begin with then it wont
display it.

Yes, of course.
Why ?
because if it isn't set to 'none' it's set to ''
that's to say : nothing comprehensive
or "normal" state ( witch is 'none' ! as set before)

following characteristic of element ( block or inline or ... )

el.style.displa y = (el.style.displ ay == 'none')? 'block' : 'none';
But always prefer :

function switcher(what) {
what = (typeof(what)== 'undefined')?
what.style : document.getEle mentById(what). style;
what.display = what.display==' '? 'none' : '';
}

And set your display element(s) to none via javascript.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[libsfan01]

Evertjan. wrote:

I doubt that, please show a working nonworking example.

Ok

When i put the display:none; command in the actual element e.g.
style='display: none;' it does work fine but when i put it in the css at
the top of the page (above the javascript, as a style applied to the
elements id) it wouldnt work? is there something wrong with the way i
was initially laying out the code on the page?

[ASM]

libsfan01 a écrit :

When i put the display:none; command in the actual element e.g.
style='display: none;' it does work fine but when i put it in the css at
the top of the page (above the javascript, as a style applied to the
elements id) it wouldnt work? is there something wrong with the way i
was initially laying out the code on the page?

JavaScript knows only JavaScript instructions
and
with style='display: none;' as attribute of element
JavaScript can find this attribute (style) using instruction :
element_style = document.getEle mentById('somet hing').style;

It is why it is better to give this attribute via JavaScript

Another way is to use css classes :

css :
=====
#truc { display: none; }
#truc.show { display: block; }

html :
======
<div id="truc"blah </div>
<p><a href="#" onclick="switch er('truc');retu rn false;">
hide/show
</a>
</p>

JS :
====
function switcher(whatId ) {
var s = document.getEle mentById(whatId );
s.className = s.className=='' ? 'show' : '';
}

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[Evertjan.]

libsfan01 wrote on 16 jan 2007 in comp.lang.javas cript:

>
Evertjan. wrote:

>I doubt that, please show a working nonworking example.

Ok

You say "ok" but I don't see that example.

When i put the display:none; command in the actual element e.g.
style='display: none;'

It is called an inline style setting, not a command.

it does work fine but when i put it in the css at
the top of the page (above the javascript, as a style applied to the
elements id)
it wouldnt work? is there something wrong with the way i
was initially laying out the code on the page?

How could we know if you keep the actual code secret?

Try:

=============== = test.html tested on IE7 ===============
<style type='text/css'>
#myId1 {display:none;}
.myClass {display:none;}
</style>

<div id='myId1'>This is it</div>
<button
onclick =
'alert(document .getElementById ("myId1").style .display);'>
click</button>

<div id='myId2' style='display: none;'>This is it too/two</div>
<button
onclick =
'alert(document .getElementById ("myId2").style .display);'>
click</button>

<div id='myId3' class='myClass' >This is it three</div>
<button
onclick =
'alert(document .getElementById ("myId3").style .display);'>
click</button>
=============== =============== =============== ===========

When you test and analyze the above,
now you know where the problem lies,
you can easily work aroud it, don't you think?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)