Slightly OT: Hiding div's before they're created

[cjl]

Hey all:

I'm stuck.

I'm writing web application that dynamically returns results like the
following:

<div class="search_result">
<div class="history">Right lower quadrant pain.</div>
<div class="diagnosis">Appendicitis</div>
<div

I have a toggle switch to enable or disable "stealth mode". Among
other things, enabling stealth mode needs to hide the diagnosis.

The problem is that stealth mode can be turned on (or off) before or
after searching and returning the results like above.

I can't set the style visibility attribute to hidden on an element
before that element exists. If I check a variable to see if stealth
mode is enabled before generating the results and leave the diagnosis
div out, then it's not there to dynamically show if stealth mode is
turned off.

Any ideas on a solution?

Thanks in advance,
CJL

 

[cathyblock]

Hey all:

I'm stuck.

I'm writing web application that dynamically returns results like the
following:

<div class="search_result">
<div class="history">Right lower quadrant pain.</div>
<div class="diagnosis">Appendicitis</div>
<div

I have a toggle switch to enable or disable "stealth mode". Among
other things, enabling stealth mode needs to hide the diagnosis.

The problem is that stealth mode can be turned on (or off) before or
after searching and returning the results like above.

I can't set the style visibility attribute to hidden on an element
before that element exists. If I check a variable to see if stealth
mode is enabled before generating the results and leave the diagnosis
div out, then it's not there to dynamically show if stealth mode is
turned off.

Any ideas on a solution?

Thanks in advance,
CJL

You could try adding a second class that controls visibility. If you
name it something like visibleOff then you can use regular expressions
to swap it to visibleOn to show your element. Or use stylesheet
swapping to swap out the contents of the "search_result" class
depending on the stealth mode.

Do you create the element before you append it to the page? At that
point you can set element.style.visibility. Then when you append it, it
will have the correct visibility.

Hope this helps,
Cathy

 

[cjl]

Cathy:

Thank you for the response.

Do you create the element before you append it to the page? At that
point you can set element.style.visibility. Then when you append it, it
will have the correct visibility.

Interesting. I will try this, although I admit that currently I am
using innerHTML.

You could try adding a second class that controls visibility. If you
name it something like visibleOff then you can use regular expressions
to swap it to visibleOn to show your element.

Hmmm. I guess I could whip out that getElementsByClass function I've
seen around (http://www.dustindiaz.com/getelementsbyclass), and try to
swap classes.

I'm thinking of defaulting the visibility to hidden, then checking a
variable for the state of stealth mode, and showing the div based on
the value.

-CJL

 

[Andy Jeffries]

I'm writing web application that dynamically returns results like the
following:

<div class="search_result">
<div class="history">Right lower quadrant pain.</div>
<div class="diagnosis">Appendicitis</div>
<div

I have a toggle switch to enable or disable "stealth mode". Among
other things, enabling stealth mode needs to hide the diagnosis.

The problem is that stealth mode can be turned on (or off) before or
after searching and returning the results like above.

I can't set the style visibility attribute to hidden on an element
before that element exists. If I check a variable to see if stealth
mode is enabled before generating the results and leave the diagnosis
div out, then it's not there to dynamically show if stealth mode is
turned off.

Why can't you specify it's hidden in your CSS file then show it after
showing if stealth mode is off (or whichever way round)??

div.search_result div.diagnosis {
display: none;
}

Am I missing something here that stops you from doing that?

Cheers,


AJ

 

[cjl]

Andy:

Why can't you specify it's hidden in your CSS file then show it after
showing if stealth mode is off (or whichever way round)??

div.search_result div.diagnosis {
display: none;
}

Am I missing something here that stops you from doing that?

Thank you for your reply. What you might be missing is that stealth
mode can be turned on or off before or after searching.

Possibilities:
1) If stealth mode is 'off' before searching, then search results
should show the diagnosis.
2) If stealth mode is 'on' before searching, then search results
should hide the diagnosis.
3) If stealth mode is turned 'on' or 'off' after search results are
shown, then diagnosis should be hidden or shown appropriately.

I think #3 complicates things a little, but I'm going to sit down
tonight and figure this out. Maybe.

Thanks,
CJL

 

[Andy Jeffries]

Thank you for your reply. What you might be missing is that stealth
mode can be turned on or off before or after searching.

Nope, seemed to make sense.

Possibilities:
1) If stealth mode is 'off' before searching, then search results
should show the diagnosis.

OK, so in a bit of code that is activated after searching set the
display to be "block". By the time the search finishes the element will
exist to be set.

2) If stealth mode is 'on' before searching, then search results
should hide the diagnosis.

So the default in the CSS style sheet will go in to play and hide the
diagnosis.

3) If stealth mode is turned 'on' or 'off' after search results are
shown, then diagnosis should be hidden or shown appropriately.

And the element will exist then, so can be turned off/on.

I think #3 complicates things a little, but I'm going to sit down
tonight and figure this out. Maybe.

It all sounds straight forward enough to me. You can't hide something
(in Javascript) that doesn't exist, so hide it (by default) with CSS and
show it with Javascript if it exists and needs displaying.

Cheers,


Andy

 

[cjl]

Andy:

Thanks again for your answer. I am a little slow, but I think I
understand what you're saying.

A related question: What is the difference between the CSS elements
visibility( hidden vs. visible) and display (none vs. block, etc.)?

-CJL

 

[Dag Sunde]

Andy:

Thanks again for your answer. I am a little slow, but I think I
understand what you're saying.

A related question: What is the difference between the CSS elements
visibility( hidden vs. visible) and display (none vs. block, etc.)?

Generally, an element controlled by "visibility : hidden;" still takes up
real-estate on the screen, but if you set "display:none;", the next element
will be rendered close up to the previous one.