It occurred to me that it seems to be fairly easy to make visually strong elements turn into normal elements or disappear. The need for such effects arises when we wish to do everything possible to convey an important message, yet let the user then read the rest of the page without being distracted by large print, bright colors, blinking, colorful image, etc.
If you put such an element inside a div element and use
onclick="this.style.visibility = 'hidden'"
then clicking on it removes it from the page without changing the layout.
You could alternatively set
onclick="this.style.display = 'none'"
but then the browser would have to reformat the page when the element is removed from display.
Naturally the user would need to be informed about such a possibility, but a short textual note about this in the notice itself should suffice. It should be JavaScript-generated for obvious reasons. View the source file of this page for an example.
Not all JavaScript-enabled browsers support the
onclick attribute in div
elements or the other constructs used, but in practice this would seem to
be a pragmatic approach. It could hopefully be refined by making the creation of the instruction string more conditional.
Alternatively you could use the same approach in order to change the visual effects (like background color) without removing the notice text itself. This may take some more code, if several presentational features have been used for highlighting the notice.
To simplify changing the properties of an element (such as
background and text color and font size), you could make the onclick
handler change the class of the element. Then you would have
two sets of CSS settings, one for the element as such without the class
attribute and one for the element with the class attribute.
Jim Ley, the author of the comp.lang.javascript FAQ, has commented that in generating the note with javascript, the problem is that abilities to change style and write content are not tied together. He described the following approach:
document.write('<span id=chicken'+
'style="display:none">message</span>');
chk=document.getElementById('chicken');
if (chk && chk.style) {
chk.style.display='block';
}
This is based on the idea that if you can display a block, you'll also be able to hide the other one.