How do you disable everything on the screen but a certain part?

[Ray]

Hello,

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Of course the browser itself is not disabled, so the user can still
type another address and click Go, or click the back button, etc. But
within the page, while editing, the user can't do anything. It'll be
fantastic if we can have a visual indication for this, e.g.: the rest
of the screen gets blurred or something.

Is there a way to achieve this with JavaScript?

Thanks!
Ray

[Ian Collins]

Ray wrote:

Hello,

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Set the other inputs to readonly.

--
Ian Collins.

[Ray]

Ian Collins wrote:

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Set the other inputs to readonly.

OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?

>
--
Ian Collins.

[Ian Collins]

Ray wrote:

Ian Collins wrote:

>>>We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Set the other inputs to readonly.

OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?

Use the disabled attribute?

--
Ian Collins.

[ASM]

Ray a écrit :

>
OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?

<button onclick="swithe r('modalDiag'); ">help</button>

<div id="modalDiag" style="visibili ty:hidden">
<pblah : <input ... >
<pblah : <input ... >
<pblah : <input ... >
<p><button onclick="swithe r('modalDiag'); ">Cancel</button>
<button onclick="valid( );swither('moda lDiag');">OK</button>
</div>

function switcher(divId) {
divId = document.getEle mentById(divId) .style;
divId.visibilit y = divId.visibilit y=='hidden'? 'visible' : 'hidden';
}

See also :
subModal:
http://www.subimage.com/dhtml/subModal/
TinyBox:
http://alexei.417.ro/node/4
ModalBox:
http://okonet.ru/projects/modalbox/
With a bit of Ajax :
http://jquery.com/demo/thickbox/
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[Ray]

Ian Collins wrote:

OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?

Use the disabled attribute?

Hmmm, no :) But thanks for replying :)

>
--
Ian Collins.

[Ray]

ASM wrote:

<button onclick="swithe r('modalDiag'); ">help</button>

<div id="modalDiag" style="visibili ty:hidden">
<pblah : <input ... >
<pblah : <input ... >
<pblah : <input ... >
<p><button onclick="swithe r('modalDiag'); ">Cancel</button>
<button onclick="valid( );swither('moda lDiag');">OK</button>
</div>

function switcher(divId) {
divId = document.getEle mentById(divId) .style;
divId.visibilit y = divId.visibilit y=='hidden'? 'visible' : 'hidden';
}

See also :
subModal:
http://www.subimage.com/dhtml/subModal/
TinyBox:
http://alexei.417.ro/node/4
ModalBox:
http://okonet.ru/projects/modalbox/
With a bit of Ajax :
http://jquery.com/demo/thickbox/

THIS is what I'm looking for. Many thanks, Stephane!

>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[TheBagbournes]

Ray wrote:

ASM wrote:

><button onclick="swithe r('modalDiag'); ">help</button>

<div id="modalDiag" style="visibili ty:hidden">
<pblah : <input ... >
<pblah : <input ... >
<pblah : <input ... >
<p><button onclick="swithe r('modalDiag'); ">Cancel</button>
<button onclick="valid( );swither('moda lDiag');">OK</button>
</div>

function switcher(divId) {
divId = document.getEle mentById(divId) .style;
divId.visibilit y = divId.visibilit y=='hidden'? 'visible' : 'hidden';
}

See also :
subModal:
http://www.subimage.com/dhtml/subModal/
TinyBox:
http://alexei.417.ro/node/4
ModalBox:
http://okonet.ru/projects/modalbox/
With a bit of Ajax :
http://jquery.com/demo/thickbox/

THIS is what I'm looking for. Many thanks, Stephane!

But that won't be modal!

Try http://www.jackslocum.com/blog/index.php

Use the BasicDialog widget which can be set to modal.

Click the "DOWNLOADS" link to see an example of a modal BasicDialog.

[Ray]

TheBagbournes wrote:

But that won't be modal!

Try http://www.jackslocum.com/blog/index.php

Use the BasicDialog widget which can be set to modal.

Click the "DOWNLOADS" link to see an example of a modal BasicDialog.

Great site! Thanks!

Ray

[pcx99]

Ray wrote:

Hello,

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Of course the browser itself is not disabled, so the user can still
type another address and click Go, or click the back button, etc. But
within the page, while editing, the user can't do anything. It'll be
fantastic if we can have a visual indication for this, e.g.: the rest
of the screen gets blurred or something.

Is there a way to achieve this with JavaScript?

Thanks!
Ray

raise the z-index of the active element to ~100

document.getEle mentById('activ eDiv').style.zI ndex=100;

activate a division with a z-index of ~50 or so. absolutely position
the division at 0px top, 0px left and stretch this division to be equal
to the offsetHeight and offsetWidth of body. If desired you can shade
the division with filter and opacity to let the user know that the page
proper has been disabled. (This is how Digg display's their on-site
embedded videos).

offsetHeight and offsetWidth are relatively new properties so if you
have to deal with older browsers you might want to find alternatives in
finding the width and height of the current page (I'm sure there's a faq
somewhere or another).

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA