471,053 Members | 1,694 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,053 software developers and data experts.

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

function switch_display(switchme) {
var el = document.getElementById(switchme);
el.style.display = (el.style.display == '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...

Jan 15 '07 #1
5 1872
libsfan01 wrote on 16 jan 2007 in comp.lang.javascript:
function switch_display(switchme) {
var el = document.getElementById(switchme);
el.style.display = (el.style.display == '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)
Jan 15 '07 #2
ASM
libsfan01 a écrit :
function switch_display(switchme) {
var el = document.getElementById(switchme);
el.style.display = (el.style.display == '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.display = (el.style.display == 'none')? 'block' : 'none';
But always prefer :

function switcher(what) {
what = (typeof(what)=='undefined')?
what.style : document.getElementById(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
Jan 16 '07 #3

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?

Jan 16 '07 #4
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.getElementById('something').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="switcher('truc');return false;">
hide/show
</a>
</p>

JS :
====
function switcher(whatId) {
var s = document.getElementById(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
Jan 16 '07 #5
libsfan01 wrote on 16 jan 2007 in comp.lang.javascript:
>
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.disp lay);'>
click</button>

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

<div id='myId3' class='myClass'>This is it three</div>
<button
onclick =
'alert(document.getElementById("myId3").style.disp lay);'>
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)
Jan 16 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Abhishek Sur | last post: by
1 post views Thread by Jon W | last post: by
1 post views Thread by VK | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.