473,395 Members | 2,151 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

TransModal modal dialog project : beta testing

VK
In the continuation of the discussion at "Making Site Opaque -- This
Strategy Feasible?" and my comment at
http://groups.google.com/group/comp....15a4408680e8e2

I have realized that despite suggestions to use DHTML-based modal
dialogs are very common? there is not a single fully functional
reliable copyright-free cross-browser alternative to say MsgBox
(VBScript) or showModalDialog (IE). This way such suggestions up to
date are bearing rather a lot of hypocrisy by suggesting to use
something non-existing instead of something existing.

I am proposing to make TransModal library under MIT license to have a
good alternative to suggest. I also would like to have this library
novice-friendly for code studying, as I said before.

I am proposing the current v. 0.0.3 beta for criticism and for bug fix
in cope that it may be interesting for anyone to donate their time to
participate.

The whole package can be obtained at
http://www.geocities.com/schools_rin...odal_0_0_3.zip

The package contains:
0_0_3_Compat.html - testing page in Compatibility (BackCompat) mode
0_0_3_Strict.html - testing page in Strict (CSS1Compat) mode
TransModal.js - the version 0.0.3 beta itself

The TransModal.js code is also posted below. Usenet post formatting
specifics forced me to make line breaks in some long statements where
I would not do them otherwise. If still some lines get broken so
rendering the code non-functioning or hard to read then I have nothing
to say but my apologies. Use the source from the linked package
instead then.

/********************************************
* ATTENTION!
* This version TransModal 0.0.3 is intended
* for testing and debugging purpose only.
* It is NOT intended for a practical use.
********************************************/

function TransModal() {

/* Enforcing TransModal to be a singleton:
* other words do not allow to create new
* instances of TransModal class.
*
*? Objections?
*/

if (this instanceof TransModal) {
return TransModal;
}

/* Checking if not some weird environment
* where window host object is not available.
* It is here mostly to pacify some c.l.j.
* regulars - but who knows, it may come useful
* someday somewhere.
*
* "window" identifier is reserved for the host
* object. This way if typeof window == 'object'
* guarantees that either 1) host object is here
* or 2) it is not here but someone is
* emulating it. In the latter case it is not
* our concern how good or bad such emulation is.
*/

if (typeof window != 'object') {
return null;
}

/* Check if DOM manipualtions are available:
* other words if the document is loaded.
* If not then postpone the execution till
* after window load event.
* TransModal.isIE flag is preset on conditional
* compilation outside of the TransModal body:
* look at the end of this code.
*/

if (document.body == null) {
if (TransModal.isIE) {
window.attachEvent('onload', TransModal);
}
else {
window.addEventListener('load', TransModal, false);
}
return null;
}

/* If TransModal was already once executed
* then do not repeat the initialization.
*/
if (TransModal.isExecuted) {
return null;
}
else {
TransModal.isExecuted = true;
}

/* If "modal" identifier is not already in use,
* then set it as a shortcut alias for TransModal.
* This way TransModal.dialog() and modal.dialog()
* calls will be equivalent.
*/

if (typeof modal == 'undefined') {
modal = TransModal;
}

/* Prototype.js compatibility.
* If global $() function is already defined
* then do not override it. Otherwise making
* a lightweight replacement of it.
*
* We don't want a parasite closure in here,
* so we are using Function constructor.
*/
if (typeof $ != 'function') {
$ = new Function('id',
'return document.getElementById(id)');
}

/* It would be nice to have button labels on
* user's preferred language and not English
* only.
* navigator.userLanguage (IE) and
* navigator.language (some other UAs) values
* may have different meanings: OS language,
* or browser interface language, or the preferred
* language in the browser settings. Either way
* IMHO it still allows to make a good guess what
* language the current user would like to see.
* If the detected language is not implemented yet
* then English is used by default.
* For such basic lexicon as "Yes", "No", "Cancel" etc.
* we may disregard country-specific variations, so we
* are taking only two first letters from the language
* code - so say "en", "en_US", "en_GB" will be "en".
*
*? Objections?
*/

if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';

/* Creating and adding dialog window template.
* Additional dialog styling may be applied
* over DIV#TransModalDialog CSS rule set.
*/

var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

with (wndDialog.style) {
position = 'absolute';
zIndex = '1002';
left = '0px';
top = '0px';
cursor = 'default';
visibility = 'hidden';
}

document.body.appendChild(wndDialog);

/* Creating and adding the cover sheet.
* The cover sheet is NOT supposed to
* be styled by external CSS rules. All
* what it needs is being made by script.
*/

var wndCover = document.createElement('DIV');

wndCover.id = 'TransModalVeil';

wndCover.innerHTML = '<span>\u00A0</span>';

with (wndCover.style) {
position = 'absolute';
zIndex = '1001';
left = '0px';
top = '0px';
margin = '0px 0px';
padding = '0px 0px';
borderStyle = 'none';
cursor = 'not-allowed';
visibility = 'hidden';
}

/* Pre-apply alpha filter for IE.
*/
if (TransModal.isIE) {
wndCover.style.filter = ''.concat(
'progid:DXImageTransform.Microsoft.Alpha(Opacity=' ,
Math.floor(TransModal.coverOpacity * 100), ',Style=0)');
}

document.body.appendChild(wndCover);
}

/************** TransModal methods **************/

/* TransModal.dialog() method that
* takes four optional arguments:
*
* dlgPrompt : prompt HTML code
* dlgButtonSet : button set
* dlgDefaultButton : default focus
* dlgListener : function to call
*/

TransModal.dialog = function(dlgPrompt,
dlgButtonSet,
dlgDefaultButton,
dlgListener) {

/* Setting defaults for missing arguments.
*/

if (typeof dlgPrompt != 'string') {
dlgPrompt = '<p>TransModal v.'.concat(
TransModal.reportVersion(), '</p>');
}

if (typeof dlgButtonSet != 'number') {
dlgButtonSet = 0;
}

if ((typeof dlgDefaultButton != 'number') ||
(dlgDefaultButton >= TransModal.
buttonSet[dlgButtonSet].length)) {
dlgDefaultButton = 0;
}

if (typeof dlgListener != 'function') {
TransModal.notifyObserver = TransModal.loopHole;
}
else {
TransModal.notifyObserver = dlgListener;
}

/* Intermediary variables to store
* clientWidth and clientHeight values.
*/

var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;

/* Setting the cover.
*/

var cover = $('TransModalVeil');

/* BUG bug 1
*
* We need a reliable algorithm to cover
* entire body, not just visible part of it
* like this current primitive does.
*/
cover.style.width = w + 'px';
cover.style.height = h + 'px';

cover.style.backgroundColor = TransModal.coverColor;

/* Working around different opacity models
* of IE and other browsers.
*/
if (TransModal.isIE) {
cover.filters.item('DXImageTransform.Microsoft.Alp ha').
Opacity = Math.floor(TransModal.coverOpacity * 100);
}
else {
/* Safari requires opacity to be a string and it
* ignores numeric arguments.
* Other browsers accept either.
*/
cover.style.
opacity = '' + TransModal.coverOpacity;
}

/* Preparing the dialog.
*/

var dialog = $('TransModalDialog');

/* How many buttons in the selected set.
*/
var len = TransModal.buttonSet[dlgButtonSet].length;

/* We want all buttons in one row.
*/
var buttons = '<div style="white-space:nowrap !important">';

/* BUG bug 2
* Clicking outside of dialog makes current button
* to loose focus.
*/

/* BUG bug 3
* Navigating by TAB press goes away from the
* rightmost button to the document body.
* Must be switching to the leftmost button
* instead.
*/

/* BUG bug 4
* Arrow keys navigation doesn't work.
*/

for (var i=0; i<len; i++) {
var label = TransModal.buttonLabelSet[TransModal.lang][
TransModal.buttonSet[dlgButtonSet][i]];
buttons+= ''.concat(
'<button type="button" ',
'hidefocus ', // removes dotted focus from IE button labels
'onclick="TransModal.dismiss(\'',
TransModal.buttonSet[dlgButtonSet][i], '\')">', label, '</button>
');
}

buttons+= '</div>';

dialog.innerHTML = dlgPrompt + buttons;

/* BUG bug 5
* Scroll position is not accounted.
*/

dialog.style.left = Math.floor((w-dialog.offsetWidth)/2) + 'px';
dialog.style.top = Math.floor((h-dialog.offsetHeight)/2) + 'px';

/* IE6 or older "Super Z of form elements" quirk fix.
* Until IE7 form controls were external DirectX objects
* drawn on a separate graphics layer after the whole
* page is drawn. That led to impossibility to cover
* some form controls (particularly SELECT) by a higher
* z-index DOM elements: form controls remained visible
* and accessible (hence the term; sometimes also
* referred as "firing through").
* As a partial and not perfect remedy we are disabling
* all form controls for IE6 or older.
* For extra large or multiple forms it may have
* a productivity impact.
* It also doesn't eliminate the risk of the dialog placed
* right over a form element thus partically overdrawn.
*/

/* BUG bug 6
* Doesn't account if some form controls are already
* disabled for some other purpose. This way on restoring
* their state will be overriden.
*/

if (TransModal.isOldIE) {
for (var i=0; i<document.forms.length; i++) {
var len = document.forms[i].length;
for (var j=0; j<len; j++) {
/* IE considers links located within FORM as form
* controls, so it disables them as well.
* No extra check for links is added though to
* speed up the loop.
*
*? You think?
*/
document.forms[i].elements[j].disabled = true;
}
}
}

/* Display both the cover and the dialog.
*/
cover.style.visibility = 'visible';
dialog.style.visibility = 'visible';

/* Setting focus to the default button.
*/
window.setTimeout("$('TransModalDialog')." +
"getElementsByTagName('BUTTON')[" +
dlgDefaultButton + "].focus()", 100);

};

/*** END OF TransModal.dialog FUNCTION ***/

TransModal.dismiss = function(pressedButtonSysName) {

$('TransModalDialog').style.visibility = 'hidden';
$('TransModalVeil').style.visibility = 'hidden';

if (TransModal.isOldIE) {
for (var i=0; i<document.forms.length; i++) {
var len = document.forms[i].length;
for (var j=0; j<len; j++) {
/* see bug 6 */
document.forms[i].elements[j].disabled = false;
}
}
}

TransModal.notifyObserver(pressedButtonSysName);

}

/*** END OF TransModal.dismiss FUNCTION ***/

/* Library versioning
*/

TransModal.MajorVersion = 0;
TransModal.MinorVersion = 0;
TransModal.BuildVersion = 3;

TransModal.reportVersion = function() {
return ''.concat(
TransModal.MajorVersion,
'.', TransModal.MinorVersion,
'.', TransModal.BuildVersion);
}

/* "If TransModal initialized" flag
*/

TransModal.isExecuted = false;

/* A dummy function for testing and for NOOPs.
*/

TransModal.loopHole = function() {
window.alert(arguments[0] || 'no arguments');
}

/* Current cover color (black by default).
*/

TransModal.coverColor = 'rgb(0,0,0)';

/* Current cover opacity (0.0 - 1.0)
* 0 - fully transparent
* 1 - fully opaque
*/

TransModal.coverOpacity = 0.4;

/* In the future may be used to set
* cover appearence effects:
* 'none' - no effect
* 'fade' - fading
* 'flood' - flooding
*
* Not currently implemented.
*/

TransModal.coverEffect = 'none';

/* Button labels by language codes.
*
* For the best interoperability
* all characters above US-ASCII
* should be represented by Unicode
* escape sequences \uXXXX
*
* Currently only English is presented.
*/

TransModal.buttonLabelSet = {
'en' : {
'OK' : 'OK'
,'Cancel' : 'Cancel'
,'Abort' : 'Abort'
,'Retry' : 'Retry'
,'Ignore' : 'Ignore'
,'Yes' : 'Yes'
,'No' : 'No'
}
};

/* Available button sets. The sets
* are going by VB's MsgBox schema.
* These are system label names and
* they DON'T need to be translated.
*/
TransModal.buttonSet = [
['OK']
,['OK', 'Cancel']
,['Abort','Retry','Ignore']
,['Yes','No','Cancel']
,['Yes','No']
,['Retry','Cancel']
];

/* Conditional compilation.
* We all hate browser sniffing, do we ? :-)
*/
/*@cc_on @*/
/*@if (@_jscript)
TransModal.isIE = true;
TransModal.isOldIE = ''.concat(
ScriptEngineMajorVersion(), '.',
ScriptEngineMinorVersion(), '.',
ScriptEngineBuildVersion()) <= '5.6.8834';
@else @*/
TransModal.isIE = false;
TransModal.isOldIE = false;
/*@end @*/

/* Attempting to execute TransModal function.
*/

TransModal();

/* BUG bug 7
* The whole script is completely
* broken for IE in BackCompat mode.
*/
Jun 27 '08 #1
11 2319
I'm currently working on a modal dialog box at work because all the
ones I have seen all have somthing wrong with them.

Hopefully it will be ready by the end of this week....watch this
space....

Graham

Jun 27 '08 #2
VK
On May 6, 4:32 pm, Laser Lips <loudsphi...@gmail.comwrote:
I'm currently working on a modal dialog box at work because all the
ones I have seen all have somthing wrong with them.

Hopefully it will be ready by the end of this week....watch this
space....
The competition is always good ;-)

Jun 27 '08 #3
On Tue, 06 May 2008 02:25:41 -0700, VK wrote:
[...]
Just some hints after reading (w/o testing) it:
if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}
Should be:

var lang = 'en';
if ('userLanguage' in navigator) {
lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
lang = navigator.language.substring(0,2);
}
>
TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';
I'd assume that "lang" is unknown here since there are only three
vars with that name each of which inside a different "if"-scope.
[...]
var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';
Why use "innerHTML" (instead of "createElement()") here?
>
with (wndDialog.style) {
position = 'absolute';
zIndex = '1002';
left = '0px';
top = '0px';
cursor = 'default';
visibility = 'hidden';
}
Just a matter of style & opinion:

var s;
if ((s = wndDialog.style)) {
s.position = 'absolute';
s.zIndex = '1002';
s.left = '0px';
s.top = '0px';
s.cursor = 'default';
s.visibility = 'hidden';
}
[...]
var wndCover = document.createElement('DIV');

wndCover.id = 'TransModalVeil';

wndCover.innerHTML = '<span>\u00A0</span>';
see above.
>
with (wndCover.style) {
position = 'absolute';
zIndex = '1001';
left = '0px';
top = '0px';
margin = '0px 0px';
padding = '0px 0px';
borderStyle = 'none';
cursor = 'not-allowed';
visibility = 'hidden';
}
Same as above.
[...]
dialog.innerHTML = dlgPrompt + buttons;
Same as above.
--
Matthias
/"\
\ / ASCII RIBBON CAMPAIGN - AGAINST HTML MAIL
X - AGAINST M$ ATTACHMENTS
/ \
Jun 27 '08 #4
On May 6, 3:01 pm, Matthias Watermann wrote:
<snip>
I'd assume that "lang" is unknown here since there are
only three vars with that name each of which inside a
different "if"-scope.
Javascript is not block-scoped. Its scoping units are functions, so
any variable declared at any point within a function body is declared
for the entire execution of that function (including any code that
precedes the declaration in the source text).
Jun 27 '08 #5
On May 6, 5:17*pm, Henry <rcornf...@raindrop.co.ukwrote:
Javascript is not block-scoped. Its scoping units are functions, so
any variable declared at any point within a function body is declared
for the entire execution of that function (including any code that
precedes the declaration in the source text).
e.g.

<html><head></head><body><script>

ka="global ka";
(function () {
alert(ka);
var ka = "local ka";
alert(ka);
})();

</script></body></html>
Jun 27 '08 #6
VK wrote:
In the continuation of the discussion at "Making Site Opaque -- This
Strategy Feasible?" and my comment at
http://groups.google.com/group/comp....15a4408680e8e2

I am proposing the current v. 0.0.3 beta for criticism and for bug fix
in cope that it may be interesting for anyone to donate their time to
participate.
Hey, why did you left out those nice faders() ?

--Jorge.
Jun 27 '08 #7
VK
On May 6, 7:55 pm, Jorge <jo...@jorgechamorro.comwrote:
VK wrote:
In the continuation of the discussion at "Making Site Opaque -- This
Strategy Feasible?" and my comment at
http://groups.google.com/group/comp....15a4408680e8e2
I am proposing the current v. 0.0.3 beta for criticism and for bug fix
in cope that it may be interesting for anyone to donate their time to
participate.

Hey, why did you left out those nice faders() ?
I did not! Look at TransModal.coverEffect - it is waiting for its
moment. It is just necessary to make working properly the most basic
functionality before starting with extra features. It like a car:
before bringing it to West Cost Custom it must be able to at least
leave the garage by its own :-)
Jun 27 '08 #8
VK
On May 6, 6:01 pm, Matthias Watermann <li...@mwat.dewrote:
On Tue, 06 May 2008 02:25:41 -0700, VK wrote:
[...]

Just some hints after reading (w/o testing) it:
if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

Should be:

var lang = 'en';
if ('userLanguage' in navigator) {
lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
lang = navigator.language.substring(0,2);
}
with pending else{} left this way. Not a crime of any kind and often
met, but we have here a standard logical construct
if X then do this
else if Y then do that
(if neither of both then)
else do default

which is

if (X) {}
else if (Y) {}
else {}

what would be benefits to break the logic flow? I am not claiming that
there are not any, but what are they?

TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';

I'd assume that "lang" is unknown here since there are only three
vars with that name each of which inside a different "if"-scope.
Variable scope in Javascript was already explained by other posters as
I see.
[...]
var wndDialog = document.createElement('DIV');
wndDialog.id = 'TransModalDialog';
/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

Why use "innerHTML" (instead of "createElement()") here?
because then we have to add TextNode into it which is a royal pain in
IE6 - not talking about adding form controls this way which is a
headache beyond tolerance IMO with IE. Also innerHTML is 10-15 times
quicker then per-node manipulations.
This being said, I am ready to replace both innerHTML usages by a
reliable DOM alternative if anyone has it.
with (wndDialog.style) {
position = 'absolute';
zIndex = '1002';
left = '0px';
top = '0px';
cursor = 'default';
visibility = 'hidden';
}

Just a matter of style & opinion:

var s;
if ((s = wndDialog.style)) {
s.position = 'absolute';
s.zIndex = '1002';
s.left = '0px';
s.top = '0px';
s.cursor = 'default';
s.visibility = 'hidden';
}
Yeah... "To WITH, or not to WITH" :-)
Javascript WITH implementation is indeed a ticking bomb to handle with
extreme care. I myself once was a complete fool with it:
http://groups.google.com/group/mozil...ef5a71b7d95318

So I do agree with Matt Kruse at
http://www.javascripttoolbox.com/bestpractices/#with
as overall - but I do not agree to make WITH as some self-contained
evilness that acts by its own no matter what :-) In case as above
is .style is available then all these properties should be here as
well. Or still better do not take the risk?
[...]
Jun 27 '08 #9
On May 6, 8:20*pm, VK <schools_r...@yahoo.comwrote:
Yeah... "To WITH, or not to WITH" :-)
Javascript WITH implementation is indeed a ticking bomb to handle with
extreme care. I myself once was a complete fool with it:http://groups.google.com/group/mozil...ef5a71b7d95318

So I do agree with Matt Kruse athttp://www.javascripttoolbox.com/bestpractices/#with
as overall - but I do not agree to make WITH as some self-contained
evilness that acts by its own no matter what :-) In case as above
is .style is available then all these properties should be here as
well. Or still better do not take the risk?
Yeah... "With statement considered harmful" :-)
http://yuiblog.com/blog/2006/04/11/w...dered-harmful/
Jun 27 '08 #10
VK
On May 6, 10:31 pm, Jorge <jo...@jorgechamorro.comwrote:
On May 6, 8:20 pm, VK <schools_r...@yahoo.comwrote:
Yeah... "To WITH, or not to WITH" :-)
Javascript WITH implementation is indeed a ticking bomb to handle with
extreme care. I myself once was a complete fool with it:http://groups.google.com/group/mozil...ef5a71b7d95318
So I do agree with Matt Kruse athttp://www.javascripttoolbox.com/bestpractices/#with
as overall - but I do not agree to make WITH as some self-contained
evilness that acts by its own no matter what :-) In case as above
is .style is available then all these properties should be here as
well. Or still better do not take the risk?

Yeah... "With statement considered harmful" :-)http://yuiblog.com/blog/2006/04/11/w...dered-harmful/
OK, voted out. Bye-bye, WITH :-(
:-)
Jun 27 '08 #11
Matthias Watermann wrote:
On Tue, 06 May 2008 02:25:41 -0700, VK wrote:
>[...]

Just some hints after reading (w/o testing) it:
> if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

Should be:
Says who?
var lang = 'en';
if ('userLanguage' in navigator) {
`navigator' is a reference to a host object. The `in' operation is not
backwards compatible, and untested property access should be avoided with
host objects. Better:

if (typeof navigator.userLanguage != "undefined")
lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
lang = navigator.language.substring(0,2);
}
Same here.
> TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';
Same here, although `TransModal' is probably a native object which limits
the error-proneness of this approach to that of the `in' operation.

See also http://PointedEars.de/es-matrix
I'd assume that "lang" is unknown here since there are only three
vars with that name each of which inside a different "if"-scope.
Utter nonsense.

ECMAScript implementations do not support automatic block scoping. `lang'
is a redeclared variable (because of two VariableDeclaration statements in
the source code, processed *before execution*). In any case, it would have
been initialized, because there is an `else' branch that executes its
BlockStatement without further conditionals.

Apparently you also don't know how the `in' operation works. It
type-converts the left-hand operand to string. If we would assume for
educational purposes that the variable would not have been initialized, it
would keep the initial value of `undefined'. The string representation of
`undefined' is "undefined". Since it would be unlikely that the object
referred to by `TransModal.buttonLabelSet' would have a property named
`undefined', the `TransModal.lang' property would then be assigned "en".

I strongly suggest you refrain from giving further advice or making further
assumptions from your position in the learning curve. You won't be making
even educated guesses at this time.
>[...]
var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

Why use "innerHTML" (instead of "createElement()") here?
Good question. A reasonable answer to it is that the Document interface of
W3C DOM Level 2 Core may not implemented in one of the target environments.
Nevertheless, the proprietary `innerHTML' property should be avoided where
possible, and standards-compliant DOM mutator methods should be preferred
(but feature-tested at runtime before being used).

Furthermore, the character U+00A0 as-is constitutes a whitespace character
in HTML that is therefore rendered as if it was a space character (U+0020).
To have a non-breaking space rendered so, the HTML source code and so the
value assigned to the `innerHTML' property has to include one of `&nbsp;',
` ', or `&#xA0;'.
> with (wndDialog.style) {
position = 'absolute';
zIndex = '1002';
left = '0px';
top = '0px';
cursor = 'default';
visibility = 'hidden';
}

Just a matter of style & opinion:

var s;
if ((s = wndDialog.style)) {
s.position = 'absolute';
s.zIndex = '1002';
s.left = '0px';
s.top = '0px';
s.cursor = 'default';
s.visibility = 'hidden';
}
IIRC, earlier Opera versions retrieved the `style' property as a string.
You would be augmenting a string object with properties, and not modify
the DOM representation of the element's `style' attribute, then.
>[...]
var wndCover = document.createElement('DIV');

wndCover.id = 'TransModalVeil';

wndCover.innerHTML = '<span>\u00A0</span>';

see above.
> with (wndCover.style) {
position = 'absolute';
zIndex = '1001';
left = '0px';
top = '0px';
margin = '0px 0px';
padding = '0px 0px';
left = "0";
top = "0";
margin = "0";
padding = "0";
> borderStyle = 'none';
cursor = 'not-allowed';
visibility = 'hidden';
}

Same as above.
With the added error-proneness of the `with' statement.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Jun 27 '08 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Gilles T. | last post by:
Hi, How I can refresh a modal dialog in asp.net? I open a modal dialog in first with a dropdownlist. To add a element in my dropdownlist (table), I open a second modal dialog to ask element and...
3
by: Cosh | last post by:
Hi I want to ask for a user before running the application, and be able to restart the application if the user wants to change the "user" In my main methode I have something like this...
3
by: Andrew | last post by:
I get a Null Reference Exception if I close a non-modal dialog (that is, a form opened with Show()) when a selection is made from a ComboBox. The error message refers to Unsafe Native Methods, but...
2
by: jm | last post by:
I have a parent window: <script language="javascript"> function doSearch() { result=showModalDialog("searchmni.aspx?lastname=smith"); alert(result); } </script>
3
by: Earl Teigrob | last post by:
Can a Modal Dialog Box do forms ASP.NET forms validation from within the Modal Box? I want to pop up a dialog box to the user and have it do its own post backs with validation checking and then...
5
by: Jeremy | last post by:
How can I view the HTML source of a page that has been opened as a modal dialog box (in IE6)? Thanks
10
by: Guadala Harry | last post by:
I have a modal dialog that currently does all of the following except item 4. 1. lets users select a graphic from a list of thumbnails (and when selected, displays the full-size image in a...
3
by: Ant | last post by:
Hi, I'm using a modal dialog box to input data. I have created properties on the dialog form to capture the data so that it might be read from the main form via the dialog form. This approach...
1
by: VK | last post by:
For the previous version see: http://groups.google.com/group/comp.lang.javascript/msg/c31d18013a2f99de First of all many thanks for everyone's feedback for the previous beta: here in c.l.j. and...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.