display inherit and none switching in js with ie7

[libsfan01]

Hi all

This js i wrote to switch display on and off of a given element does
not work in ie but it does in ff and safari.

how can i make it work with ie guys?


<script type='text/javascript'>
function switch_display(switchme) {

curr_el = document.getElementById(switchme);
curr_dis = curr_el.style.display;

if (curr_dis != 'none') {
hidethis(curr_el);
}
if (curr_dis == 'none') {
showthis(curr_el);
}

return;

}

function hidethis(curr_el) {
curr_el.style.display = 'none';
}

function showthis(curr_el) {
curr_el.style.display = 'inherit';
}
</script>

<input type="button" onClick="switch_display('testdiv');" value="button
to switch display">

<div id="testdiv">some text
</div>

 

[libsfan01]

This js i wrote to switch display on and off of a given element does
not work in ie but it does in ff and safari.

i should probably be more explicit, by 'does not work in ie' i mean it
will hide hidden text but will not display it again when u re-click the
button

 

[Randy Webb]

libsfan01 said the following on 1/3/2007 11:22 AM:

i should probably be more explicit, by 'does not work in ie' i mean it
will hide hidden text but will not display it again when u re-click the
button

display:visible
display:hidden

 

[Richard Cornford]

libsfan01 said the following on 1/3/2007 11:22 AM:

display:visible
display:hidden

The permissible values of the CSS display property (as defined in the
CSS 2.0 spec) are:- inline | block | list-item | run-in | compact |
marker | table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | inherit

I am not sure why 'inherit' appears in that list as the property index
(appendix F) states that the property is not inherited.

Richard.

 

[Spartanicus]

The permissible values of the CSS display property (as defined in the
CSS 2.0 spec) are:- inline | block | list-item | run-in | compact |
marker | table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | inherit

Despite the fact that officially the 2.0 spec is the only CSS2.x spec
with Rec status, for practical web authoring CSS2.0 should be considered
obsolete and of historical relevance only. Authors should consult the
CSS2.1 Draft instead.

I am not sure why 'inherit' appears in that list as the property index
(appendix F) states that the property is not inherited.

Not by default, but it can be if explicitly specified.
http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit

 

[RobG]

Hi all

This js i wrote to switch display on and off of a given element does
not work in ie but it does in ff and safari.

how can i make it work with ie guys?


<script type='text/javascript'>
function switch_display(switchme) {

curr_el = document.getElementById(switchme);
curr_dis = curr_el.style.display;

if (curr_dis != 'none') {
hidethis(curr_el);
}
if (curr_dis == 'none') {
showthis(curr_el);
}

return;

}

Display toggle functions are usually written something like:

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

Don't forget feature detection.

 

[libsfan01]

Display toggle functions are usually written something like:

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

Thanks Rob that works great. can anyone explain to me how this line of
code works:

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

what do the ? and : characters do, does it work something like, if
display equals 'none' then display becomes '' and if display = '' then
display becomes 'none'

are there any good online resources on this type of control structure?

thanks again

marc

 

[RobG]

Thanks Rob that works great. can anyone explain to me how this line of
code works:

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

what do the ? and : characters do, does it work something like, if
display equals 'none' then display becomes '' and if display = '' then
display becomes 'none'

Yes, its the conditional operator:

<URL:
http://developer.mozilla.org/en/doc...rators:Special_Operators#conditional_operator
and is a shortcut way of writing:

if (el.style.display == 'none') {
el.style.display = '';
} else {
el.style.display = 'none';
}

are there any good online resources on this type of control structure?

The FAQ lists a good selection of javascript resources (including the
Core JavaScript 1.5 Guide referenced above):

<URL: http://www.jibbering.com/faq/#FAQ3_2 >