Not to display an element. How?

Hi,

I have a custom cms site running on php and mysql. There is an element (which is wrapped in div tags) which I do not want displayed in some pages.

How do I do this?

Thanks,Ellora.

Add a class to the div (ex <div class=“donotshow”>) to it, then in your css, use .donotshow { display:none; }

Be careful with what you mean by “do not show.”

Sometimes you want to hide content visually, for design reasons, but you have it in the HTML because it otherwise should be there. People who can’t see the visual design for whatever reason would still benefit from that text. So use one of the hidden-offset methods:


.donotshow {
  position: absolute;
  left: -999em;
  height: 0; (sometimes needed)
}

If a user is accessing a browser’s accessibility layer, or is viewing the page without CSS for whatever reason, the content will appear to them. Display: none would hide from many Accessibility Technologies since it tells the browser “this element should not render in any way”, so usually the display: none element is not passed on the the accessibility layer.

Use Dave’s code if you really want this content to Not Exist, and maybe it’s only there because of your back-end setup throwing this content into every page instead of only the pages who need it (it would be more ideal to have your templating system not add this content to the page in the first place, using a bit of template logic).

There is an additional bit of code you could add to this content, HTML5’s “hidden” attribute. This tells the user agent (browsers, etc) that “this content should not be on this page”.

In your case I would not bother with the ARIA version, in agreement with the article above by Steve Faulkner. Display:none alone will remove the content from AT’s in most cases (there are special instances where the content would still show up to screen readers, but this differs per reader and are pretty specific little bugs). That and hidden is more likely to be dangerous than useful, unless you are careful about when this content should appear. If and when you need to remove “hidden”, remove it entirely: hidden=“false” does not work (and opposite of what aria-hidden does when set to false, which I think was a very bad move among the spec writers… two very similarly named attributes who do very similar things but work completely opposite of each other… bad bad bad).

Given that you have PHP in your arsenal, it would be better to tell the server not to send that code to certain pages. PHP is good like that—setting conditions for what to put on which pages. That way, you don’t send content uselessly to pages and then have to hide it again.

Ah, actually the OP may have really been asking a PHP question all along.

Is there a templating system involved? If so, which one? Someone would know an answer for that.

As wisth anything that thought out the answer is:“it depends”.

the property display:none; makes an element not be rendered, essentially acting as if the element was non in the code , but that’s a heavy handed way of doing things and presents some accessibility issues. For things like BRs or HRs I like to employ this method.

there are some tricks you can do:
visibility:hidden; for example hides the element BUT leaves the space it takes up empty ( sometimes this is handy). If it’s a block element, you can add: height:0; overflow:hidden; The element will still be ther ( meaning you can even use it to clear floats and stuff… but, the content is hidden) However Older versions of Opera had problems with “height:0” (tho other that not being pixel perfect, it hid the content acceptably well) and SOME screen readers do not read out clipped content. If screen readers anrent an issue ( say in the case of a picture gallery this method is quite handy)

finally, you can position elements absolutely, of to the TOP or LEFT of the view port ( other directions will cause scroll bars)
something like:
position:absolute; left:-99999em;
It’s possibly one of the better methods that i have come across for hiding elements while keeping them accessible.

hope that helps

Just a note for the thread, visibility:hidden generally acts like display: none as far as screen readers are concerned. For the height:0; overflow:hidden one, that one specifically hits VoiceOver for Mac (and it’s the overflow that does it, not the height).

I like the abso-po left: -999 technique, unless my site might be rtl language (where I would try to get around that by moving the hidden things to right: -999…)

I’ve started moving more towards display:block for “hiding” large blocks of links, like submenus, with onclick events showing them… because this allows most/all browsers to skip tabbing through those links. But you have to make sure it’s obvious to everyone that more links are available when clicking on a link.