Script for Hiding/Un-Hiding Text On Click

D

David Mark

David Mark said the following on 7/23/2007 7:16 PM:



Your coding style - and the defense of it - says a lot about your
attitude about browser scripting. And the lack in your abilities of
successfully doing so.

Since you haven't posted any code at all, except for a botched re-hash
of mine, I don't think you have much to say on this subject.
It is your claim - in that "other thread" - that your code works
flawlessly whether the browser interprets the code as HTML or XHTML so

Applications I have written for both are working for both. What does
that have to do with this thread?
your claim that I don't use XHMTL (which is wrong in itself) is no
defense at all. Does your local college offer a class in public debate?

Defense of what?
If so, you should take it as you suck at it.

Never you mind what I should take.
It has nothing to do with being personal or not, the test for
document.getElementById is moronic if you think it satisfies the
requirement for knowing whether to write the style block or not.

You still don't get that do you?
It means precisely what I wrote. Can you not read plain English? The
style element doesn't have to be written for a "modern browser". Any of
the modern browsers don't need it there in order to manipulate the styles.

Which has nothing at all to do with why I wrote it.
Ok. I didn't really care at the time as it was irrelevant to me.

So it is okay to post nonsense as long as it isn't relevant to you?
You really are as inept as I thought you were. It may have been IE5.0,
IE5.5 I don't remember but it wouldn't allow you to modify a style if it
was not hard coded into the page. The way the code I wrote is written if
the browser couldn't modify it without it being hard coded then you
would have to hard code it. And to be able to - successfully -

This is "plain English?"
manipulate it then you would hard code it and the only way to hard code
it to make it gracefully degrade would be to code it as display: block.

Which you didn't do in your example. Yes, this is all quite clear.
The fact that you know nothing about that speaks volumes.

You are very hard to follow.
The only one confused on how to write cross-browser degrading code is
you. Also, it was not an "assignment" (I will leave those for your
instructor to give you), it was proof of concept to show you how inept
you are at what you claim to do for a living.

LOL. I never claimed anything about what I do for a living. Cite one
post. Inept is thinking that the length of "000" is 1. Want me to
cite that one, professor? I suspect you are still smarting from it
and that explains your attitude.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FAQ</title>
<script type="text/javascript">
function showAnswer() {
var id = this.id;
var el = document.getElementById('a' + id.substring(1));
if (el) el.style.display = (el.style.display == 'block')?'none':'block';
return false}
function windowLoad() {
var el = document.getElementById('questions')
if (el &&
el.getElementsByTagName &&
el.getElementsByTagName('a') &&
el.getElementsByTagName('dd') )
{
var links = el.getElementsByTagName('a');
var answers = el.getElementsByTagName('dd')
for (var i = links.length - 1; i >= 0; i--)
{
links.onclick = showAnswer;
links.href = '#';

If you are going to copy my code, at least copy the last version
posted.

I didn't copy "code", I copied some garbage text and modified it. There
is a difference but I doubt you would understand the difference.
links.tabIndex = 0;
if (answers.style)
{
answers.style.display = "none";

This is hardly an improvement. What you've done is make the answers
flash for a second during the page load. Furthermore, you now have
links that don't do anything if this assignment does not update the
screen (in whatever fantasy user agent you are "defending" against.)

The difference is that mine degrades, yours doesn't.

BTW, that "fantasy user agent" you keep alluding to is my cell phone
browser that supports gEBI but does not support modifying display
properties nor does it support getElementsByClassName. I know, I know,
you can't be bothered to support such devices as you don't know how.
Wrong. See below.

The only person wrong here is you. You just fail to see it is all.
No it isn't. What makes you think the space bar activates links?

Because that is precisely how I have to activate links in that "Fantasy
User Agent" you don't know how to support. The lower left key (*)
activates the "Enter key" functionality. The lower right key (#)
activates the "Space Bar" functionality and the only way to activate a
link with it is the space bar. Of which it does just fine with hard
coded links, just not dynamically created links.


"Your" example creates dynamic links just like mine. Not surprising
as it is basically mine with a couple of minor modifications.
See above.

See above.
Try again moron. The code you posted is utterly broken in the "Fantasy
User Agent" I keep telling you about but the code I posted works
flawlessly in it.

And worse in IE, Opera, etc. And why can't you name the device? I
suspect it is an old cell phone from a garage sale. Did you test with
Netscape 4 too?
Awww man, now I gotta get depressed, you have a point.

Yes. All of that bluster and your code has a worse flaw than mine.

You'll notice I didn't insult you for the obvious gaffe. You should
take a page out of my book. Nobody respects a wise-ass.
The only flaw in my "personality" is that I think I can educate idiots
like you. Sue me for it.

There you go again. Sue you for what? I doubt you have anything I
would want.
Is that as original a name as you can call me? I have been called worse

The most fitting. And this isn't a name-calling contest any more than
it is a coding contest.
by a lot better than you. You have mistakenly assumed it was a
"contest". It isn't. It was my failed attempt to educate you as to the
flaws in your code.


Keep dreaming moron.

How many times have you used that word in this thread? You only
degrade yourself.
Yes, but not for the reasons you think. It was a waste of time on my
part to try to educate your dumb ass. Maybe someone in the future that
reads it can learn from it as you obviously can't.

"Dumb ass", "moron", etc., etc. You are stuck in a parochial rut.
I couldn't be so lucky as to not have you read my posts though as then I
could correct your non-sense babbling without having to waste my time
trying to educate you.

In English, please.

Never mind. We're done talking here.
 
A

ASM

En réponse à David Mark qui nous a susurré, en date du : 24/07/07 3:23,
le message sibyllin suivant :

(very long snip)
Did you test with Netscape 4 too?

Because it was said "gracefully degrade",
yes I did (NC 4.5)
and ... all OK with single if(gEBI)
....
of corse
 
A

ASM

En réponse à David Mark qui nous a susurré, en date du : 24/07/07
22:23, le message sibyllin suivant :
Right. Both of our solutions will work with any browser that predates
getElementById. Ironically, the other one posted, which purportedly
degraded better, would break all such browsers, including NS4.

I didn't follow all the so interested discus but I think adding some
code with conditional precautions wouldn't afraid NC4

if(document.getElementById)
{
// nothing more here would have to be interpreted by NC4
if(docu ... blah
...
}
 
R

Richard Cornford

David said:
According to the w3c validator and the error consoles of
various browsers, it is invalid.

Not unless you can establish that the concept of validity attaches to
the use of unrecognised property names or value. If the concept
attaches then why does the specification mandate the handling of
unrecognised property names and values, as they would be precluded in
any 'valid' source? The behaviour of w3c 'validator' is not, in itself,
sufficient to indicate that the concept of validity can be applied here.
Maybe they will change the rules in the
future.


I assume you mean "style element."

I did. Typing "script" is getting a little too automatic.
I think we can forget about Opera 6 at this point,

The last brand new mobile phone I encounter that shipped with Opera 6.12
installed was around the new year, so given the turnover of mobile
phones may 'we' can forget about it now.
but what other browsers (embedded or otherwise) display
this behavior?

Pretty much all of the ones with non-dynamic DOMs. NetFont 4 ,for
example.
It doesn't sound like anything that can be feature-detected

It sounded problematic to detect, but it has been observed that all the
instances of browsers actually identified that did not react to dynamic
assignments to a - display - property either did not have a - style -
object on their elements, or (much more commonly) did not have a -
display - property on their style objects. So the proposed test was to
see if an element had both a style object and that that style object had
a 'string' type - display - property. Without both it was pretty
guaranteed that assigning to the display property of the style object
was not going to work in the given environment. Unfortunately that still
falls down as feature detecting because it assumes that if those two
properties do exist then assigning to the - display - property will
result in browser modifying its presentation.

There is also the problem of getting at an element to test when you want
to apply the test in the context of making decisions about writing out
STYLE elements. You want to (must) write the STYLE element in the HEAD
but the only two elements guaranteed to be available at that point are
the HTML and HEAD elements, neither of which are ever displayed as such
(though you might easily argue that the HTML element is the whole page
and so is effectively displayed) so neither need necessarily implement
the same type of style object as those on elements in the BODY. Thus a
feature test applied to either of those may not produce results
consistent with the same test applied to an element in the BODY.

No actual instances of this being an issue have been observed, it is
just another obvious assumption that is inherent in the strategy of
feature testing to decide whether or not to write out a STYLE element.
Still, while not an ideal 'feature detection' test it is still far
superior to the 'object inference' test you have previously proposed.
The assumptions in that test are demonstrably false, rather than just
being theoretically questionable.

Feature testing for modifications in presentation resulting form
assigning to the - display - property are facilitated where the
environment provides dimension and offset information. If an element is
flowed under the influence of a displayed element and that element is
assigned - display:none; - then the position of the first element will
change as it re-flows. So that change in position can be detected
following the browser's re-drawing of the DOM, and so the dynamic nature
of the display property verified.

Obviously a test on an element in the laid-out document cannot be used
to inform behaviour inside the HEAD element before the opening BODY tag
has even been seen by the browser.

Of course these are a lot of hoops to be jumping through, and so it is
generally considered that a design where the default state of anything
that is to be hidden is visible, where the first action of the script is
to hide it, and then the interaction comes into play to reveal and
re-hide it as needed, is the optimum choice for reliable outcomes. The
symmetry of the script first having to hide the element before it can
reveal it means that whenever the environment is not dynamic enough to
support the desired manipulation the default (visible) state will not be
moved away from, and the result will be either viable by default or
effectively dynamic.

The feature testing is then reduced to; is there a recognised element
retrieval mechanism available for the type of element I am interested
in, if so; when used does it return an object (presumably an element),
if so; does that object have a style property that has trueness (is not
undefined or null). If those tests are passed you can assign to the
element's style object's - display - property as often as you want
without errors, and if the initial hiding of it works you have a dynamic
system, and otherwise it is harmless.
and virtually any Web application will break under
the described circumstances.

No, many will, others will not. But we are not dealing with a web
application, we are dealing with a simple web page with a little
scripted gimmickry going on.
Is it just the display property or do all attempts to
manipulate style with script fail?

Opera 6 supports about 8 dynamic style properties (including -
visibility -) but will not re-flow its presentation of the DOM (only
absolutely positioned elements may be move once the page has been
drawn). Its style object only has about a dozen exposed properties, but
they include some IE compatibility properties such as - pixelTop - that
are effectively just alternatives for standard properties (- top - in
that case).

Richard.
 
D

David Mark

Not unless you can establish that the concept of validity attaches to
the use of unrecognised property names or value. If the concept
attaches then why does the specification mandate the handling of
unrecognised property names and values, as they would be precluded in
any 'valid' source? The behaviour of w3c 'validator' is not, in itself,
sufficient to indicate that the concept of validity can be applied here.

Okay. But it is what I go by. If it won't validate there, I don't
use it.

[snip]
The last brand new mobile phone I encounter that shipped with Opera 6.12
installed was around the new year, so given the turnover of mobile
phones may 'we' can forget about it now.

That's good.
Pretty much all of the ones with non-dynamic DOMs. NetFont 4 ,for
example.

And I think it is NetFront. Regardless, what is that one used for?
It sounded problematic to detect, but it has been observed that all the
instances of browsers actually identified that did not react to dynamic
assignments to a - display - property either did not have a - style -
object on their elements, or (much more commonly) did not have a -
display - property on their style objects. So the proposed test was to
see if an element had both a style object and that that style object had
a 'string' type - display - property. Without both it was pretty
guaranteed that assigning to the display property of the style object
was not going to work in the given environment. Unfortunately that still
falls down as feature detecting because it assumes that if those two
properties do exist then assigning to the - display - property will
result in browser modifying its presentation.

Sounds like a decent test.
There is also the problem of getting at an element to test when you want
to apply the test in the context of making decisions about writing out
STYLE elements. You want to (must) write the STYLE element in the HEAD

Well, only in this simplistic example. You could wait until the body
is loading and then insert the style element into the DOM once you
check if the body's display style is a string.
but the only two elements guaranteed to be available at that point are
the HTML and HEAD elements, neither of which are ever displayed as such
(though you might easily argue that the HTML element is the whole page
and so is effectively displayed) so neither need necessarily implement
the same type of style object as those on elements in the BODY.

I think it is likely that they do, regardless of how illogical it is.

Thus a
feature test applied to either of those may not produce results
consistent with the same test applied to an element in the BODY.
Right.


No actual instances of this being an issue have been observed, it is

Of what issue? The possibility of the head and body having different
types of style properties?
just another obvious assumption that is inherent in the strategy of
feature testing to decide whether or not to write out a STYLE element.
Still, while not an ideal 'feature detection' test it is still far
superior to the 'object inference' test you have previously proposed.

I insist I am not using an "object inference." It looks like I am,
but actually the test to write the style sheet is just a bookend for
the test used to run the script that will ultimately show the hidden
elements. I know that gEBI doesn't indicate anything about whether
style properties can be maniupulated.
The assumptions in that test are demonstrably false, rather than just
being theoretically questionable.

The aggregate result of the two tests has been shown not to work in
Opera 6 and perhaps some older mobile phones. As we have been over,
this example will never be perfect. Personally, I wouldn't hide the
answers in a FAQ at all. The whole thing is silly, but that is what
the OP wanted to do.
Feature testing for modifications in presentation resulting form
assigning to the - display - property are facilitated where the
environment provides dimension and offset information. If an element is
flowed under the influence of a displayed element and that element is
assigned - display:none; - then the position of the first element will
change as it re-flows. So that change in position can be

Yes. I had to do lots of similar things to make positioning work to
the pixel across the various major browsers without resorting to
browser sniffing.

detected
following the browser's re-drawing of the DOM, and so the dynamic nature
of the display property verified.

I actually thought about discussing such a test earlier in the thread,
but it seems beyond the scope of this dynamic FAQ example. Also, you
couldn't use document.write for the style, so the whole example would
have to changed to use the DOM. I'm done writing FAQ answer hiding
code at this point.
Obviously a test on an element in the laid-out document cannot be used
to inform behaviour inside the HEAD element before the opening BODY tag
has even been seen by the browser.
Right.


Of course these are a lot of hoops to be jumping through, and so it is
generally considered that a design where the default state of anything
that is to be hidden is visible, where the first action of the script is
to hide it, and then the interaction comes into play to reveal and
re-hide it as needed, is the optimum choice for reliable outcomes. The
symmetry of the script first having to hide the element before it can
reveal it means that whenever the environment is not dynamic enough to
support the desired manipulation the default (visible) state will not be
moved away from, and the result will be either viable by default or
effectively dynamic.

I realize all of that, but if the FAQ is going to hide all of its
answers, it doesn't look very good to have them flash at the outset.
I know how to get around this, but again, I think that the solution is
beyond the scope of this simple example. In short, you would want to
avoid using onload to hide the elements, so you would have to use
DOMContentReady if available and simulate it for IE.
The feature testing is then reduced to; is there a recognised element
retrieval mechanism available for the type of element I am interested
in, if so; when used does it return an object (presumably an element),
if so; does that object have a style property that has trueness (is not
undefined or null). If those tests are passed you can assign to

I don't see what you mean by "trueness." I think checking for a
string type is what we are after. Typically it will be an empty
string, which converts to boolean false.

the
element's style object's - display - property as often as you want
without errors, and if the initial hiding of it works you have a dynamic
system, and otherwise it is harmless.


No, many will, others will not. But we are not dealing with a web
application, we are dealing with a simple web page with a little
scripted gimmickry going on.

I realize that. What I meant was that there are a lot of applications
out there that hide elements initially. Virtually anything that uses
popup menus falls into this category. So all of these pages are
susceptible to this weird Opera 6/NetFront bug. I am not particularly
concerned about it as I rarely write apps that hide elements
initially, but many do and there would seem to be no simple recourse.
The next time I need to write a page with popup menus, I will use the
DOM to insert the style element, but that won't fix the millions of
pages that use document.write to do this. Many of them don't even
take that precaution, they just make the hide style static, as seen in
a recent menu question posted here.
Opera 6 supports about 8 dynamic style properties (including -
visibility -) but will not re-flow its presentation of the DOM (only
absolutely positioned elements may be move once the page has been
drawn). Its style object only has about a dozen exposed properties, but
they include some IE compatibility properties such as - pixelTop - that
are effectively just alternatives for standard properties (- top - in
that case).

Interesting as my next question would be whether position and
visibility are on that list. It sounds like they are not as modifying
the position style would require a document re-flow. It is a good
thing that Opera 6 is now virtually extinct. How widespread is this
NetFront thing and are there others that behave like this?
 
R

Richard Cornford

David said:
Okay. But it is what I go by. If it won't validate there,
I don't use it.

Maybe you don't, but a pragmatic approach might say that if you want
consistent behaviour on IE versions <= 5 (as 6+ is fine with 'pointer')
then the fact that standard CSS implementations are required to handle
the unrecognised property value in a particular way give you an
inexpensive means of achieving that consistency without breaking
anything.
[snip]
The last brand new mobile phone I encounter that shipped with
Opera 6.12 installed was around the new year, so given the
turnover of mobile phones may 'we' can forget about it now.

That's good.

Bear in mind the reason that Opera 6 was still being embedded in mobile
phones as recently as the start of this year (and may well still be). It
is because it is very small. Operas 7-9 are also very small in
comparisons to leviathans like Mozilla, but not as small Opera 6.

The devices into which browsers are embedded are becoming more capable
and have more resources available to them, so the need for very small
browsers diminishes, but at the same time browsers are starting to be
embedded into even smaller devices. I have seen proposals to embed
browsers into watches. I am not sure how that is going to work out (how
useable they could ever be), but that trend may suggest that there may
be an ongoing demand for small-footprint, well tried and reliable web
browsers, and so Opera 6 may be with us in one form or another for a
little while to come.
And I think it is NetFront.

It is.
Regardless, what is that one used for?

PDAs and mobile phones
Sounds like a decent test.

It is the making of assumptions that undermines the effectiveness of
feature testing. this strategy is not assumption-free.
Well, only in this simplistic example. You could wait until
the body is loading and then insert the style element into
the DOM once you check if the body's display style is a string.

You could, but if the test were applied to the elements that were to be
hidden (as the probably should be) it would be easier to just set
their - display - properties directly on the element's style object and
forget about adding style elements.
I think it is likely that they do, regardless of how illogical
it is.

It is not a question of the testing being illogical, it is not. Given
that the majority of browsers are written in C++ (or another class-based
OO language) the odds of the element objects all possessing exactly the
same type of style object are extremely high (it would almost be
irrational to do anything else). The issue is with the principles of
feature detection, where the ideal test has a one-to-one relationship
with whatever it is that needs to be known form the test. Testing the
style object of the HEAD or HTML element in order to make decisions
about how to treat elements within the body is more testing a parallel
relationship. That is still much better than an object inference test,
and most parallel relationships do hold in reality, but it is not ideal.
Of what issue?

The issue of the possibility that non-displayable elements would have
different - style - object implementations to displayable elements.
Nobody has been able to point to a single environment where they do, but
as nobody can be familiar with the DOMs of all scriptable browsers that
does not indicate that there is no issue.
The possibility of the head and body having different
types of style properties?
Yes.


I insist I am not using an "object inference."

Insist away, it won't change anything.
It looks like I am,

Maybe for a very good reason.
but actually the test to write the style sheet is just a
bookend for the test used to run the script that will
ultimately show the hidden elements.

That is the inference. You are inferring that the existence of the -
getElementById - method of the document implies the ability to override
a STYLE element applied CSS rule by assigning to the - display -
property of an element's - style - object. If you are wrong in that
inference your script will act to render the content hidden by the STYLE
element you write completely inaccessible. That is the worst possible
outcome of a scripted action, and the reason why a much better test, or
alternative strategy, would be appropriate.
I know that gEBI doesn't indicate anything about whether
style properties can be maniupulated.

No it doesn't, but the decision to write the style element needs to
relate to the ability to dynamically manipulate the style properties,
because once written it cannot be unwritten (at least in any environment
where the styles could not be dynamically manipulated).
The aggregate result of the two tests has been shown not to
work in Opera 6 and perhaps some older mobile phones.

Not to work in browsers that do not provide a dynamic DOM.
As we have been over, this example will never be perfect.

Maybe not, but a script that may acts to render content inaccessible is
suffering from a fundamentally flawed design.
Personally, I wouldn't hide the answers in a FAQ at all.
The whole thing is silly, but that is what
the OP wanted to do.

It strikes me as a silly gimmick, but it doesn't need to be a silly
gimmick that will act to interfere with the reliability of the
underlying HTML.
Yes. I had to do lots of similar things to make positioning
work to the pixel across the various major browsers without
resorting to browser sniffing.


I actually thought about discussing such a test earlier in
the thread, but it seems beyond the scope of this dynamic
FAQ example.

Don't let the Subject headers of threads (or the subjects of the OPs)
fool you into limiting the scope of any discussion. The only criterion
for on or off topic is the topic of the entire group
(javascript/ECMAScript). Threads are supposed to wander wherever the
discussion takes them (one of the reasons branching threading is such an
integral part of Usenet, as such discussions don't really make sense in
a chronological/linear presentation).
Also, you couldn't use document.write for the style,

That is pretty much the crux of criticism of the strategy.
so the whole example would
have to changed to use the DOM.

Not if there was no STYLE element involved, and there dos not have to
be.

I realize all of that, but if the FAQ is going to hide all
of its answers, it doesn't look very good to have them
flash at the outset.

They could only flash on browsers that do progressive rendering as the
page loads (which is a long way from being all browsers). It is a
possible minor display glitch, so probably not something that you would
want to sacrifice the viability of the end result to.
I know how to get around this, but again, I think that the
solution is beyond the scope of this simple example. In short,
you would want to avoid using onload to hide the elements, so
you would have to use DOMContentReady if available and simulate
it for IE.


I don't see what you mean by "trueness."

In javascript 'trueness' is attributed to any value that would result in
boolean true if the type-convert-to-boolean rules were applied to it (or
is boolean true to start with). That is, a value that is not necessarily
boolean true itself but will act as boolean true in any context that
implies the type conversion.
I think checking for a string type is what we are after.

The subject of my 'trueness' requirement was the value of the - style -
property of element. That is all that is necessary in the strategy
outlined above because without trueness - el.style.display =
'whatver'; - will error-out, while with trueness it cannot. Because the
strategy first hides the element before attempting to reveal them it no
longer matters whether the assignment itself is effective as its
possible ineffectiveness will not move the page away from a viable
state, while the code actually erroring-out remains something to be
avoided.
Typically it will be an empty
string, which converts to boolean false.

The - display - property of the style object, not the element's -
style - property.
I realize that. What I meant was that there are a lot of
applications out there that hide elements initially.

There is a world of difference between a web application and a web site.
Virtually anything that uses
popup menus falls into this category.

Most actual instances of popup menus do not appear in contexts that
should ever be considered web applicaitons.
So all of these pages are susceptible to this weird
Opera 6/NetFront bug.

It is not a bug. The display in User Agents is not mandated to be
updated, re-flowed, or re-drawn in response to modifications in the DOM
presented to scripts.
I am not particularly concerned about it as I rarely write
apps that hide elements initially, but many do and there
would seem to be no simple recourse.

It is the people writing web sites and e-commerce sites that need to be
worrying about how there script design strategies impact on viability of
their creations. For web applications the design criteria can be very
different.
The next time I need to write a page with popup menus,
I will use the DOM to insert the style element,

If you insist upon using a STYLE element at all.
but that won't fix the millions of
pages that use document.write to do this.

Nothing will fix the millions of pages where unconsidered/uninformed
script design decisions have fatally undermined the fundamental
viability of the underlying HTML. That is not really an excuse for
promoting the creation of more of them.
Many of them don't even take that precaution, they just
make the hide style static, as seen in a recent menu
question posted here.

Yep, no matter how badly anything may be seen to be done there is almost
always potential for doing it worse.
Interesting as my next question would be whether position and
visibility are on that list.

I explicitly stated that - visibility - is in the list. The - position -
property is not, as switching that would require/imply a re-flowing of
the document. But the - position - property was not dynamically
assignable on IE 4, even though it had that property exposed on the
style object.
It sounds like they are not as modifying
the position style would require a document re-flow.

It would.
It is a good thing that Opera 6 is now virtually extinct.

If it is.
How widespread is this NetFront thing and are there others
that behave like this?

It is hard to say as it would invariable be listed in browser statistics
as IE. It has been (or seems to have been, as it is not easy to tell for
sure) the browser embedded on about 60% of the new small devices that I
have had a chance to look at over the last year, though the last version
I had a chance to fully test was 4 and there seem be at least some
improvements in the latest versions.

Richard.
 
D

David Mark

Maybe you don't, but a pragmatic approach might say that if you want
consistent behaviour on IE versions <= 5 (as 6+ is fine with 'pointer')
then the fact that standard CSS implementations are required to handle
the unrecognised property value in a particular way give you an
inexpensive means of achieving that consistency without breaking
anything.

What's wrong with using IE conditional comments to handle this?
[snip]
The last brand new mobile phone I encounter that shipped with
Opera 6.12 installed was around the new year, so given the
turnover of mobile phones may 'we' can forget about it now.
That's good.

Bear in mind the reason that Opera 6 was still being embedded in mobile
phones as recently as the start of this year (and may well still be). It

I suddenly realized that none of my apps are affected by this
problem. I don't write inline style blocks, I write (or append) link
elements and the only ones that hide anything for scripts are screen-
only. Embedded Opera uses the handheld style sheet and my handheld
styles don't hide anything of this sort (eg popup menus.) Does
NetFront also support handheld styles?
is because it is very small. Operas 7-9 are also very small in
comparisons to leviathans like Mozilla, but not as small Opera 6.
Right.


The devices into which browsers are embedded are becoming more capable
and have more resources available to them, so the need for very small
browsers diminishes, but at the same time browsers are starting to be
embedded into even smaller devices. I have seen proposals to embed
browsers into watches. I am not sure how

That sounds crazy to me, but then I don't much care for Web browsing
with my phone either.

that is going to work out (how
useable they could ever be), but that trend may suggest that there may
be an ongoing demand for small-footprint, well tried and reliable web
browsers, and so Opera 6 may be with us in one form or another for a
little while to come.

Then I'm even more pleased about the above epiphany.
It is.


PDAs and mobile phones

Which should support handheld styles, but I know some don't (hopefully
not the same ones that have the problematic display behavior.)

[snip]
You could, but if the test were applied to the elements that were to be
hidden (as the probably should be) it would be easier to just set
their - display - properties directly on the element's style object and
forget about adding style elements.

Easier yes, but still there is the issue of hidden content flash
during load.
It is not a question of the testing being illogical, it is not. Given
that the majority of browsers are written in C++ (or another class-based
OO language) the odds of the element objects all possessing exactly the
same type of style object are extremely high

Right.

(it would almost be
irrational to do anything else). The issue is with the principles of
feature detection, where the ideal test has a one-to-one relationship
with whatever it is that needs to be known form the test. Testing the
style object of the HEAD or HTML element in order to make decisions
about how to treat elements within the body is more testing a parallel
relationship. That is still much better than
Right.

[snip]
I insist I am not using an "object inference."

Insist away, it won't change anything.
It looks like I am,

Maybe for a very good reason.
but actually the test to write the style sheet is just a
bookend for the test used to run the script that will
ultimately show the hidden elements.

That is the inference. You are inferring that the existence of the -
getElementById - method of the document implies the ability to override
a STYLE element applied CSS rule by assigning to the - display -

Not exactly. I am writing the style sheet to hide the elements only
if I am going to run the script to show the elements. The other issue
has nothing to do with my logic (which is why it remains an issue.)

[snip]

I threw this together to demonstrate how my original example will work
in Opera 6 and NetFront with only one minor modification.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FAQ</title>
<script type="text/javascript">
function showAnswer() {
var id = this.id;
var el = document.getElementById('a' + id.substring(1));
if (el && el.style) el.style.display = (el.style.display ==
'block')?'none':'block'
}
if (document.getElementById && document.getElementsByTagName) {
document.write('<link href="hideanswers.css" rel="stylesheet"
type="text/css" media="screen">');
window.onload = function() {
var el = document.getElementById('questions');
if (el) {
var links = el.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
links.onclick = showAnswer;
links.href = '#a' + (i + 1);
links.tabIndex = 0
}
}
}
}
</script>
</head>
<body>
<dl id="questions">
<dt><a id="q1">Q. Why am I here?</a></dt>
<dd id="a1">A. I don't know what to tell you.</dd>
<dt><a id="q2">Q. Why are you here?</a></dt>
<dd id="a2">A. Don't you know?</dd>
</dl>
</body>
</html>

And the hideanswers.css has just one rule in this case:

#questions dd {display:none}

So now handheld devices that support handheld style sheets are
unaffected by this gap in DOM support. Other than Opera 6 on the
desktop (extinct), what else is out there that could break this?
 
D

David Mark

In addition, adding this test should wrap up everything else,
including Opera 6 (provided our assumption about style object
intefaces is correct.)

if (document.getElementById && document.getElementsByTagName) {
var h = document.getElementsByTagName('html');
if (h.length && h[0].style && typeof(h[0].style.display) == 'string')
{
document.write('<link href="hideanswers.css" rel="stylesheet"
type="text/css" media="screen">');
window.onload = function() {
var el = document.getElementById('questions');
if (el) {
var links = el.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
links.onclick = showAnswer;
links.href = '#a' + (i + 1);
links.tabIndex = 0
}
}
}
}
}
 
D

David Mark

It still doesn't ensure that the browser can dynamically hide/show an
element. Whether due to lack of support or a bug in a browser. The only

Nobody said it did. Go back and re-read the last half dozen
messages. It is a good indicator that, according to Richard, for all
known cases.
way to know - for sure - that script can hide/show an element is to have
it visible to begin with and then hide it with script. And that is the

We've been over this. Obviously I am not going to adopt that
approach. But I did make it work for your cell phone didn't I? And
Opera 6, NetFront, etc. What's left?

[snip]
Since you changed your test, does that mean you agree with my original
assessment that a test for gEBI was inadequate to know whether to write
the style element or not?

Not really. I still say nothing supports one and not the other. I
never said it was wrong, just over-cautious. I left its addition as
an exercise and ended up doing it myself with this revision.

Looks pretty bullet-proof now. I can see no real world benefit in
using your method, but I do see a detriment. It will add the prospect
of content flash and document re-flow during page load, which is quite
unpleasant.

And if you want anybody to take your suggestions seriously, you need
to adjust your attitude.
 
D

David Mark

Nothing is "bullet-proof" on the Web. I can see at least five places
that the code can still fail but it is all irrelevant as you will simply

Utter nonsense. That would be rougly every other line. If your HTML
has the wrong ID syntax for questions (or no ID), that could cause a
problem, but that would hardly be the fault of the code. Sure, you
could test for that before slicing up the id to make it friendlier to
coders. I wasn't publishing an API with this example.

I guess if you run out of disk space on your PC while running the
script, that could cause unexpected results. Same for a connection
failure during the download, a power outage, etc.
 
R

Richard Cornford

David said:
What's wrong with using IE conditional comments to handle this?

Probably nothing in this context.

I suddenly realized that none of my apps are affected by
this problem. I don't write inline style blocks, I write
(or append) link elements and the only ones that hide
anything for scripts are screen- only. Embedded Opera uses
the handheld style sheet and my handheld styles don't hide
anything of this sort (eg popup menus.) Does NetFront also
support handheld styles?

Is a PDA with a 600x800, 24 bit color display going to use a 'handheld'
style sheet just because it can be held in the hand. And without being
presented with any actual handheld style sheet might a mobile phone not
decide to use a screen media style sheet as its second choice?

Looking at the handheld style sheet definitions they seem to be aimed at
monochrome, and text matrix displays in addition to small screens. While
actual mobile phone and PDA browsers are full-color, pixel graphic
displays and they usually have quite good (visual) CSS support.

... so Opera 6 may be with us in one form or another for a
little while to come.

Then I'm even more pleased about the above epiphany.
PDAs and mobile phones

Which should support handheld styles, but I know some don't
(hopefully not the same ones that have the problematic
display behavior.)

[snip]
You could, but if the test were applied to the elements that
were to be hidden (as the probably should be) it would be
easier to just set their - display - properties directly
on the element's style object and forget about adding style
elements.

Easier yes, but still there is the issue of hidden content flash
during load.
That is the inference. You are inferring that the existence
of the - getElementById - method of the document implies the
ability to override a STYLE element applied CSS rule by
assigning to the - display -

Not exactly. I am writing the style sheet to hide the elements
only if I am going to run the script to show the elements. The
other issue has nothing to do with my logic (which is why it
remains an issue.)

Are you saying that this instance is not object inference because you
personally were not making the inference that what you were doing as a
result of the test was an approvers thing to be doing as a result of the
test?
[snip]

I threw this together to demonstrate how my original example
will work in Opera 6 and NetFront with only one minor modification.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>FAQ</title>
<script type="text/javascript">
function showAnswer() {
var id = this.id;
var el = document.getElementById('a' + id.substring(1));
if (el && el.style) el.style.display =
(el.style.display == 'block')?'none':'block'
}
if (document.getElementById && document.getElementsByTagName) {
document.write('<link href="hideanswers.css" rel="stylesheet"
type="text/css" media="screen">');
window.onload = function() {
var el = document.getElementById('questions');
if (el) {
var links = el.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
links.onclick = showAnswer;
links.href = '#a' + (i + 1);
links.tabIndex = 0
}
}
}
}
</script>
</head>
<body>
<dl id="questions">
<dt><a id="q1">Q. Why am I here?</a></dt>
<dd id="a1">A. I don't know what to tell you.</dd>
<dt><a id="q2">Q. Why are you here?</a></dt>
<dd id="a2">A. Don't you know?</dd>
</dl>
</body>
</html>

And the hideanswers.css has just one rule in this case:

#questions dd {display:none}

So now handheld devices that support handheld style sheets
are unaffected by this gap in DOM support. Other than Opera
6 on the desktop (extinct), what else is out there that
could break this?


Assuming that your theory about the handling of the media rule is
correct and a browser on a mobile phone will disregard a screen style
sheet (even though your are not explicitly presenting it with a handheld
style sheet to use it its place), what have you now done on browsers
embedded in (or just installed on) mobile phones that are capable of the
dynamic display manipulation. They pass your tests and the LINK element
is written out. Because of the media specified they ignore it, but still
go on to initialise the script that will switch the display value. The
elements then start off visible, and disappears on the user's first
click (as the display property switches from the empty string to
'none'), and then reappears on the user's next click, toggling form then
on. That sounds like a very unintuitive (indeed rather bizarre) user
interface design.

Richard.
 
R

Richard Cornford

Randy said:
Richard Cornford said the following on 7/29/2007 7:20 PM:

Richard, how do, or can, you identify NetFront?

If the documentation won't tell me (and often it won't) I run a cut-down
version of my DOM scanning script on it and pock around to see if the
Brower has the characteristics of NetFront versions that are documented.
I have a cell phone with a browser that has no splash/startup
screen, the Manufacturer can't/won't tell me what browser it is,

E-mail me with a usable reply address and I will see what can be done
about identifying it. (I don't what to do it in public because the
information exposed would end up being used by some fool to make an
object inference script to identify NetFront).
and the UA string is identical to my IE7 UA string with
the exception of the .NET parts of it.

And IE 7's UA string only includes .NET if you install .NET.

Richard.
 
R

Richard Cornford

Richard Cornford wrote:
... the inference that what you were doing as a result of the
test was an approvers thing to be doing as a result of the test?
<snip> ^^^^^^^^^

That was intended to be 'appropriate'.

Richard.
 
D

David Mark

[snip]
Is a PDA with a 600x800, 24 bit color display going to use a 'handheld'
style sheet just because it can be held in the hand. And without being

Some do. Some don't. I do know that Opera Mini does as that is what
I use to test handheld styles.
presented with any actual handheld style sheet might a mobile phone not
decide to use a screen media style sheet as its second choice?

I always present a handheld style.
Looking at the handheld style sheet definitions they seem to be aimed at
monochrome, and text matrix displays in addition to small screens. While

Not entirely. I move floated sidebars to display below the content,
show "skip to navigation" links that would otherwise be hidden by the
main (media="all") style sheet, tighten up margins, display popup
menus inline, etc.
actual mobile phone and PDA browsers are full-color, pixel graphic
displays and they usually have quite good (visual) CSS support.

Sure, but what works on a large screen is not usually optimal for the
small.
[snip]
Are you saying that this instance is not object inference because you
personally were not making the inference that what you were doing as a
result of the test was an approvers thing to be doing as a result of the
test?

Somewhat. I would describe the previous shortfall, which is not dealt
with as a known gap in the design logic. The design does not infer
that gEBI => dynamic display properties. The only way to make this
clear is with a comment in the code, which I should have included.

[snip]
Assuming that your theory about the handling of the media rule is
correct and a browser on a mobile phone will disregard a screen style
sheet (even though your are not explicitly presenting it with a handheld
style sheet to use it its place), what have

Okay. I should have noted that a handheld style sheet is a good idea
for use with this example (or any page for that matter.) Regardless,
some PDA's will ignore the handheld rules and use screen rules, but
not Opera 6 and hopefully not netFront.

you now done on browsers
embedded in (or just installed on) mobile phones that are capable of the
dynamic display manipulation. They pass your tests and the LINK element
is written out. Because of the media specified they ignore it, but still
go on to initialise the script that will switch the display value. The
elements then start off visible, and disappears on the user's first
click (as the display property switches from the empty string to
'none')

No, in this case, it would be the opposite effect. The first click
would show it (and it is already shown of course) and the next would
hide it. Not good either way.

A better idea than switching the inline display style would be to
switch class names. I changed the style sheet to:

#questions dd {display:none}
#questions dd.shown {display:block}

And changed the line that set the style property to:

if (el) el.className = (el.className == '')?'shown':''

, and then reappears on the user's next click, toggling form then
on. That sounds like a very unintuitive (indeed rather bizarre) user
interface design.

It would be indeed. The odd thing is that Opera's handheld simulator
in Opera 9 did not work as you would expect. It wrote the style
sheet, changed the display styles on clicks (just confirmed with an
alert), but did not hide the answers. So there was a small gap in the
revision's logic and my testing was foiled by what would seem to be a
bug in Opera's Small Screen view. I never ran into that one before as
I never hide or show elements when handheld rules are in effect (eg
popup menu activators are hidden and their menus are displayed
inline.) Regardless, that works for me and is perfectly semantic as
the questions are linked to the answers' anchors.

I thought for a moment that Opera 9's Small Screen view was emulating
Opera 6's handheld behavior (with the limited DOM support), but that
can't be the case as the style sheet wouldn't be written (assuming the
test we discussed previously is valid for Opera 6.)
 
D

David Mark

[snip]

I suddenly realized that there is an even better solution that does
not write a style tag and does not cause any hidden content to flash
on load.

I also added the test for the correct ID syntax and allowed for
questions to be ordered in any way (they don't have to be sequential
either.) The former test allows for additional links to be included
within the questions element (#dummy in the example.)

The idea for this one came from Richard's suggestion that the
visibility property will work in the odd cases where display will
not. Apparently document re-flow is the problem for the affected
agents. The solution allows for the adoption of the "hikk method"
without the unwanted visual side effects (what I was trying to avoid
all along.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FAQ</title>
<script type="text/javascript">
function showAnswer() {
var id = this.id;
if (id && id.length > 1) { // only needed if id is programmatically
changed after the page load
var el = document.getElementById('a' + id.substring(1));
if (el) el.style.display = (el.style.display ==
'none')?'block':'none'
}
}
if (document.getElementById && document.getElementsByTagName) {
var h = document.getElementsByTagName('html');
if (h && h.length && h[0].style && typeof(h[0].style.visibility) ==
'string') { // agent is likely to support visibility updates
document.write('<style type="text/css">#questions
{visibility:hidden}<\/style>');
window.onload = function() {
var el = document.getElementById('questions');
if (el && el.style) {
var links = el.getElementsByTagName('a');
var a, id;
for (var i = links.length - 1; i >= 0; i--)
if (links.id) {
var id = links.id.match(/^q(\d+)/);
if (id && id.length > 1) {
a = document.getElementById('a' + id[1]);
if (a && a.style && typeof(a.style.display) == 'string') { //
agent is likely to support display updates, but no problem otherwise
links.onclick = showAnswer;
links.href = '#a' + id[1]; // probably
not needed at this point (could just be '#'.) It is nice that it
always scrolls the full answer into view.
links.tabIndex = 0;
a.style.display = 'none'
}
}
}
el.style.visibility = 'visible'
}
}
}
}
</script>
</head>
<body>
<dl id="questions">
<dt><a id="q2">Q. Why am I here?</a></dt>
<dd id="a2">A. I don't know what to tell you.</dd>
<dt><a id="q1">Q. Why are you here?</a></dt>
<dd id="a1">A. <a href="#dummy">Don't you know?</a></dd>
</dl>
</body>
</html>
 
D

David Mark

[snip]

I suddenly realized that there is an even better solution that does
not write a style tag and does not cause any

That should read: "a media-specific style tag." And more to the
point, one that uses display:none.
 
T

Thomas 'PointedEars' Lahn

David said:
<script type="text/javascript">
if (document.getElementById) document.write(

Your feature test is flawed at best.

http://pointedears.de/scripts/test/whatami#inference
'<style type="text/
css">div.question div {display:none} div.question a
{cursor:pointer;text-decoration:underline;color:blue}</style>');
^^
1. ETAGOs need to be escaped in HTML script elements, or they end
prematurely:

document.write("...<\/...");

(In XHTML, all ambiguous markup items within real markup
elements have to be escaped, or marked as CDATA, else
it is an XML syntax error.)

2. The above triggers the Netscape Run-Length Bug.

3. The above is not required as the targeted UAs usually also support
scripting style properties on-load the document, and the rules are
not that complex that they cannot be emulated with scripting
style properties.
[...]
window.onload = windowLoad;

Needlessly proprietary approach. The (X)HTML body element provides a
standards compliant and well-supported `onload' event handler attribute:

<body onload="windowLoad()">
...
</body>


PointedEars
 
T

Thomas 'PointedEars' Lahn

Richard said:
Not unless you can establish that the concept of validity attaches to
the use of unrecognised property names or value. If the concept
attaches then why does the specification mandate the handling of
unrecognised property names and values, as they would be precluded in
any 'valid' source? The behaviour of w3c 'validator' is not, in itself,
sufficient to indicate that the concept of validity can be applied here.

The specification includes that provision so that parsing would not fail
entirely on unknown syntax, properties and property values, which do not
need to be proprietary for that; it is not sanctioning the use of the
former. But that discussion belongs in another newsgroup.


PointedEars
 
D

David Mark

On Jul 31, 9:30 am, Thomas 'PointedEars' Lahn <[email protected]>
wrote:
[snip]
Your feature test is flawed at best.

We went over all of that.

[snip]
^^
1. ETAGOs need to be escaped in HTML script elements, or they end

Typo. I think you are responding to the only post that had that
error.

[snip]
2. The above triggers the Netscape Run-Length Bug.

What does? And in what version of Netscape? The later revisions were
tested in at least two versions of Netscape (as well as six other
browsers and a cell phone.)
3. The above is not required as the targeted UAs usually also support
scripting style properties on-load the document, and the rules are
not that complex that they cannot be emulated with scripting
style properties.

I have no idea what that means. But you may wish to keep reading the
thread as the example has been discussed to death and revised five or
six times.
[...]
window.onload = windowLoad;

Needlessly proprietary approach. The (X)HTML body element provides a
standards compliant and well-supported `onload' event handler attribute:

That line is in the head of the document. The body element doesn't
exist at that point.
<body onload="windowLoad()">

I never use inline event attributes. That was a topic of another
recent thread about unobtrusive scripting.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

What is this from?
 
D

David Mark

I will narrow it down for you. The re-write has it down to 3 lines. And
those three lines are in the onload function. And bare in mind that this
thread has become more about feature detection than it ever will be
about hiding/showing text.

No kidding.
Note also that I said "can fail" and not "will fail". All three lines

I suppose virtually anything "can fail."
fall into the "what if the UA doesn't support what you are trying to do"
category and is more of a mental exercise than anything else. Although I

I'm pretty sure I know what you are driving at. Like if gEBTN is an
empty placeholder and returns null instead of an array. Or if the
style property of an element is not an object, etc. Okay, but I am
not adding any more bloat to what was originally supposed to be a
simple example. I think my last description of it was "pretty bullet-
proof", which doesn't mean 100% guaranteed to work in every browser
and device that has come out since 1995.
can tell you that the browser in my cell phone does not support dynamic
onclicks and tabIndex. It handles them fine if code in the HTML though.

It also does not support updating display properties, so the answers
appear from the start and all should be well. You did mention that
your version of an earlier example worked on your phone for just this
reason.

And bear in mind that I stated a while back that I wouldn't recommend
doing this with a simple FAQ in the first place. Furthermore, I don't
recommend showing/hiding elements at all when handheld style rules are
in effect. I explained how to achieve this with the more appropriate
example of popup menu lists a few posts back.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,768
Messages
2,569,575
Members
45,053
Latest member
billing-software

Latest Threads

Top