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 layot.
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.

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.

But why hasn't this simple technique been used? Are there some problems
that I cannot see now?

Demo page: http://www.cs.tut.fi/~jkorpela/styles/notice.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela / 2004-05-22 15:00:
[color=blue]
> 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 layot.
> [...]
> 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.[/color]

Why not adjust element's class and let the CSS handle the resulting
style, which could be visibility: hidden.

Better yet, make it so that all such important elements have class
"strongnotify" (for example) and then you could just attach one
javascript file per page (instead of hardcoding inline) that goes
through the document tree and attaches handler to remove that class
from element once clicked. Just add any style you want with the
selector .strongnotify { /* rules here */ } and you're done for
every page that links to that javascript file.

--
Mikko

On Sat, 22 May 2004 12:00:12 +0000 (UTC), "Jukka K. Korpela"
<jkorpela@cs.tut.fi> wrote:
[color=blue]
>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.[/color]

The problem with generating the note with javascript is that the
ability to change style and write content is not tied together, I'm
very wary of having instructions to users which may not be correct as
you note, the approach may be something like:

document.write('<span id=chicken'+
'style="display:none">message</span>');
chk=document.getElementById('chicken');
if (chk && chk.style) {
chk.style.display='block';
}

based on the idea that if you can display a block, you'll also be able
to hide the other one.

Also note that document.write is not available in the majority of
XHTML UA's so this is very much a HTML approach.
[color=blue]
>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.[/color]

Changing the CSS class would be simple.
[color=blue]
>But why hasn't this simple technique been used? Are there some problems
>that I cannot see now?[/color]

I just think people just don't do it - we do see it in the overlaid
adverts, which have also added in a time delay.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jukka K. Korpela wrote:[color=blue]
> 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.[/color]

S. Poley's js validation example -- which I've used on a couple of sites
-- is vaguely like what you describe. But it *creates* the warning and
error messages with js if you enter incorrect data, then erases the
message when you correct it. A bit safer that way.
[color=blue]
> If you put such an element inside a div element and use
> onclick="this.style.visibility = 'hidden'"[/color]

The js validation example changes class name. According to DOM support
charts that I've read, that is more likely to work than changing style
attributes.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

On Sat, 22 May 2004 12:00:12 +0000 (UTC), Jukka K. Korpela wrote:
[color=blue]
> It occurred to me that it seems to be fairly easy to make visually strong
> elements turn into normal elements or disappear.[/color]

I was recently thinking of something similar
for instructions that cross-browsers.

Give instructions for IE/Moz/Opera/Other
then hide 3 of the four and link to those
three (assuming user might be surfing on IE
at the library, but need to know instructions
for their 'Opera' browser at home).

No JS - they get all 4.

The thing I am wonderring is, why did you
not x-post this to c.l.javascript?

I notice Jim Ley is responding, but I
think it would be best to bring the larger
JS mob in on this, really 'rap it out'
so to speak.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

Andrew Thompson <SeeMySites@www.invalid> wrote:
[color=blue]
> The thing I am wonderring is, why did you
> not x-post this to c.l.javascript?[/color]

Basically because I'm first wondering whether the idea is plausible and
why it has not been applied, despite being rather obvious.
[color=blue]
> I notice Jim Ley is responding, but I
> think it would be best to bring the larger
> JS mob in on this, really 'rap it out'
> so to speak.[/color]

I'm sure there are many JS technicalities to be discussed and solved, but
I wouldn't like to get into too much detail before considering the big
picture.

Besides, the need for JS is more of a coincidence, caused by current lack
of sufficient "dynamic" features in CSS. And we could undo _some_ effects
using CSS only, utilizing the :hover pseudo-elements (though then we have
problems with browser support at present). It's not that great for
turning strong effects off, but e.g. for the purpose of turning small
print into normal text on mouseover. And we can make even IE support
this, with some trickery:

<style type="text/css">
..legalese { font-size: 65%;
text-decoration: none;
cursor: default;
color: black;
background: white; }
..legalese:hover { font-size: 100%; }
</style>
....
<p><a id="foo42" href="#foo42" class="legalese">This
is some legalese text in fine print.</a></p>

No, I don't know how to make a browser show some instruction (on using
the mouse for text magnification) if and only if it supports the features
used. But I'm actually more worried about the potential problems caused
by the fake link markup.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On Sun, 23 May 2004 21:05:41 +0000 (UTC), "Jukka K. Korpela"
<jkorpela@cs.tut.fi> wrote:[color=blue]
>Besides, the need for JS is more of a coincidence, caused by current lack
>of sufficient "dynamic" features in CSS.[/color]

My view is that until everything is conformant, script+css is better
than a pure CSS solution, simply because you can be much more
confident of what the user is seeing, the script provides error
handling, CSS doesn't.

It's the biggest problem with declaritive formats, there's no way to
ask if something has succeeded or not.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

On Sun, 23 May 2004 21:05:41 +0000 (UTC), Jukka K. Korpela wrote:
[color=blue]
> Andrew Thompson <SeeMySites@www.invalid> wrote:
>[color=green]
>> The thing I am wonderring is, why did you
>> not x-post this to c.l.javascript?[/color]
>
> Basically because I'm first wondering whether the idea is plausible and
> why it has not been applied, despite being rather obvious.[/color]

(shrugs) I suppose my question was inspired by
my perception that a lot of JS questions about
manipulating styles seem to pop-up, one such
(crude) search..
<http://google.com/groups?scoring=d&q=+%22document.stylesheets%22+gro up%3Acomp.lang.javascript>

It is actualy quite ironic to see the number
of posters who's end result could best be met
with a style sheet..
<http://google.com/groups?th=f417fe43ca875ca1#link2>
<http://google.com/groups?th=9331ec5d8146f8ad#link5>

;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology