disabling document.body

J

Jerome Bei

Hi,
I have encountered a strange behaviour in IE6 when disabling the
document body tag using JavaScript. Nested elements of a <TABLE> are
rendered twice, in gray and white color. (See example code below). I
think what the browser is trying to do is to render the white text as
shadow and put the gray text over it, which fails ;-)

Iterating through each form and manually disabling each element works
fine, but as I have like 600 elements in my form the iteration is
consuming too much time.

Any ideas?

Thanks,
--Jerome


<HTML>
<HEAD></HEAD>
<BODY>
<FORM>
<TABLE>
<TR>
<TD><input type="TEXT" VALUE="12345678"></TD>
<TD><BUTTON
onclick="document.body.disabled=!document.body.disabled">Switch</BUTTON></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
 
R

Richard Cornford

Jerome said:
I have encountered a strange behaviour in IE6 when
disabling the document body tag using JavaScript.
Click to expand...

What exactly do you expect it to mean to "disable the document body
tag"? Body elements don't 'do' anything, except contain other elements,
so how do you expect them to behave differently when 'disabled'?
Nested elements of a <TABLE> are rendered twice,
in gray and white color. (See example code below).
Click to expand...

That sounds like as good a definition of a disabled body element as any
(in the sense that it certainly doesn't sound 'enabled').

Richard.
 
J

Jerome Bei

We are developing a J2EE web application which uses a lot of javascript
on the client side. Most of the web pages have one <FORM>-tag which
holds a huge amount of <INPUT> and <SELECT>-tags.

What I'd like to do is disable all of the <SELECT>- and <INPUT> tags
under certain conditions. I was using JavaScript code which iterated
through the form and set the <INPUT>-tag attribute "disabled" to true.
On a form with 600 elements, this operation cost like 300 milliseconds
without counting the rendering time for IE (which was like 2 seconds).

To prevent this time-consuming operation, I just set the disabled
attribute of the <BODY>-tag (or the <FORM>-tag) to "true", which
disables all of the containing tags. This method is really fast, as
there is no client side iteration and has exactly the same effect, just
that IE seems to be unable to render the disabled elements as it should,
the <INPUT>-tag contents appear twice, white and gray.

I assume that IE tries to apply some "disabled"-style where the items
should be displayed as gray text with a white shadow, but somehow the
rendering does not work correctly.

Thanks,

--Jerome

<HTML>
<HEAD></HEAD>
<BODY>
<FORM>
<TABLE>
<TR>
<TD><input type="TEXT" VALUE="12345678"></TD>
<TD><BUTTON
onclick="document.body.disabled=!document.body.disabled">Switch</BUTTON></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
 
J

Jerome Bei

We are developing a J2EE web application which uses a lot of javascript
on the client side. Most of the web pages have one <FORM>-tag which
holds a huge amount of <INPUT> and <SELECT>-tags.

What I'd like to do is disable all of the <SELECT>- and <INPUT> tags
under certain conditions. I was using JavaScript code which iterated
through the form and set the <INPUT>-tag attribute "disabled" to true.
On a form with 600 elements, this operation cost like 300 milliseconds
without counting the rendering time for IE (which was like 2 seconds).

To prevent this time-consuming operation, I just set the disabled
attribute of the <BODY>-tag (or the <FORM>-tag) to "true", which
disables all of the containing tags. This method is really fast, as
there is no client side iteration and has exactly the same effect, just
that IE seems to be unable to render the disabled elements as it should,
the <INPUT>-tag contents appear twice, white and gray.

I assume that IE tries to apply some "disabled"-style where the items
should be displayed as gray text with a white shadow, but somehow the
rendering does not work correctly.

Thanks,

--Jerome

<HTML>
<HEAD></HEAD>
<BODY>
<FORM>
<TABLE>
<TR>
<TD><input type="TEXT" VALUE="12345678"></TD>
<TD><BUTTON
onclick="document.body.disabled=!document.body.disabled">Switch</BUTTON></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
 
M

Martin Honnen

Jerome said:
We are developing a J2EE web application which uses a lot of javascript
on the client side. Most of the web pages have one <FORM>-tag which
holds a huge amount of <INPUT> and <SELECT>-tags.

What I'd like to do is disable all of the <SELECT>- and <INPUT> tags
under certain conditions. I was using JavaScript code which iterated
through the form and set the <INPUT>-tag attribute "disabled" to true.
On a form with 600 elements, this operation cost like 300 milliseconds
without counting the rendering time for IE (which was like 2 seconds).

To prevent this time-consuming operation, I just set the disabled
attribute of the <BODY>-tag (or the <FORM>-tag) to "true", which
disables all of the containing tags. This method is really fast, as
there is no client side iteration and has exactly the same effect, just
that IE seems to be unable to render the disabled elements as it should,
the <INPUT>-tag contents appear twice, white and gray.
Click to expand...

According to
<http://msdn.microsoft.com/library/d...hor/dhtml/reference/properties/disabled_0.asp>
IE 5.5 and 6 on Windows support the disabled property on <form> and
<body> elements so you could file a bug report if you think it does not
work.
But as a workaround I guess you will then have to live with setting the
disabled property of the form controls.
 
R

RobG

Martin Honnen wrote:
[...]
According to
<http://msdn.microsoft.com/library/d...hor/dhtml/reference/properties/disabled_0.asp>

IE 5.5 and 6 on Windows support the disabled property on <form> and
<body> elements so you could file a bug report if you think it does not
work.
But as a workaround I guess you will then have to live with setting the
disabled property of the form controls.
Click to expand...

According to that reference:

"When an element is disabled, it appears dimmed and does not respond
to user input. Disabled elements do not respond to mouse events,
nor will they respond to the contentEditable property."

Yet 'disabled' buttons continue to respond to clicks and mouseovers.

The W3C spec says:

*disabled [CI]*
When set for a form control, this boolean attribute disables the
control for user input.

When set, the disabled attribute has the following effects on an
element:

* Disabled controls do not receive focus.
* Disabled controls are skipped in tabbing navigation.
* Disabled controls cannot be successful.

<URL:http://www.w3.org/TR/REC-html40/interact/forms.html#adef-disabled>

So are an element's intrinsic events unaffected if the element is
disabled?
 
J

Jerome Bei

RobG wrote:
[...]
Yet 'disabled' buttons continue to respond to clicks and mouseovers.

The W3C spec says:

*disabled [CI]*
When set for a form control, this boolean attribute disables the
control for user input. [...]
So are an element's intrinsic events unaffected if the element is
disabled?
Click to expand...


What I do to really disable the page is to draw a transparent <DIV> over
the whole page with document.createElement() so to be sure that the user
cannot click any object.

I still have to disable the elements on the page to make sure the user
is unable to navigate to the elements using the keyboard. Unfortunately,
I can not lock the keyboard as user input on some elements is still
required.

--Jerome
 
T

Thomas 'PointedEars' Lahn

Jerome said:
We are developing a J2EE web application which uses a lot of javascript
on the client side. Most of the web pages have one <FORM>-tag which
holds a huge amount of <INPUT> and <SELECT>-tags.
Click to expand...

Learn proper development terms. SGML and XML based markup languages
like (X)HTML consist of elements, e.g. FORM, INPUT and SELECT elements,
which may have attributes which may have values. Elements consists
of a start tag, e.g. <form>, <input> and <select>, and an end tag, e.g.
</form> and </select> (where both may be optional and the end tag may
be disallowed), and element content which may be nothing (empty content
model), a text node or (an) element(s). So a <form> tag holds nothing
but the element type identifier (form) and whitespace separated
definitions of attribute values.
What I'd like to do is disable all of the <SELECT>- and <INPUT> tags
under certain conditions. I was using JavaScript code which iterated
through the form and set the <INPUT>-tag attribute "disabled" to true.
On a form with 600 elements, this operation cost like 300 milliseconds
without counting the rendering time for IE (which was like 2 seconds).

To prevent this time-consuming operation, I just set the disabled
attribute of the <BODY>-tag (or the <FORM>-tag) to "true", which
disables all of the containing tags.
Click to expand...

Regardless what Micro$oft says about this, neither the BODY _element_ nor
the FORM _element_ has a `disabled' attribute in Valid HTML, nor is there
a `disabled' attribute in Valid HTML that may have the value of `true' (it
is a boolean attribute that may be defined in the start tag in HTML or has
its identifier as only value, i.e. disabled="disabled", in XHTML).
Furthermore, you would set a property of a DOM object, not an attribute.

As there is no public standard that applies to all of this, it is most
certainly restricted to the single user agent you tested with (IE).
You should not rely only on proprietary markup and DOM when developing
a Web application, no matter the currently targeted user agent. Doing
otherwise would not only be error-prone and incompatible but also not
future-proof and thus shows great potential to increase future
development costs (and mark you as incompetent at least then).
This method is really fast,
Click to expand...

But in no way standards compliant, see <http://validator.w3.org/>
and said:
[Top post]
Click to expand...

<http://jibbering.com/faq/faq_notes/pots1.html>


PointedEars
 

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
Script to send email not working 1
Javascript DOM 1
Help needed with thank you message 5
Filter table rows based on multiple checkboxes value 2
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
I need help fixing my website 2

Members online

Total: 28 (members: 1, guests: 27)
Robots: 170

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,151
Latest member
JaclynMarl

Latest Threads

Top