Form Gray Filter

MC

Hi,

I have been looking around for a way to apply the filter that grays out a
form or div. I found some examples but the code is pretty complex. Any
simple ways to gray that out so I can highlight another form or div?

Thanks,
Mica
PS. I looked at several of the 'easy' examples and they did not work when I
applied them.

May 31 '08 #1

Peter Michaux

On May 31, 2:24 pm, "MC" <mica[removethis]@aisus.comwrote:

Hi,

I have been looking around for a way to apply the filter that grays out a
form or div. I found some examples but the code is pretty complex. Any
simple ways to gray that out so I can highlight another form or div?

Thanks,
Mica
PS. I looked at several of the 'easy' examples and they did not work when I
applied them.

Are you looking to disable the form element?

document.forms.gs2.elements.q.disabled = true;
Are you looking to send focus to another element?

document.forms.gs2.elements.someOtherInput.focus() ;
Are you looking for a visual cue that the input is not longer the
focus or that another one is the focus?

A little longer.

Peter

May 31 '08 #2

MC

Peter,

For example, I have two forms in a page, if the user clicks a button on
form1, I want to 'gray' or shadow form1 and show form2. I know how do do
everything but gray the form using the alpha filter stuff.

Mica

"Peter Michaux" <pe**********@gmail.comwrote in message
news:d4**********************************@p39g2000 prm.googlegroups.com...

On May 31, 2:24 pm, "MC" <mica[removethis]@aisus.comwrote:

>Hi,

I have been looking around for a way to apply the filter that grays out a
form or div. I found some examples but the code is pretty complex. Any
simple ways to gray that out so I can highlight another form or div?

Thanks,
Mica
PS. I looked at several of the 'easy' examples and they did not work when
I
applied them.

Are you looking to disable the form element?

document.forms.gs2.elements.q.disabled = true;
Are you looking to send focus to another element?

document.forms.gs2.elements.someOtherInput.focus() ;
Are you looking for a visual cue that the input is not longer the
focus or that another one is the focus?

A little longer.

Peter

May 31 '08 #3

Peter Michaux

On May 31, 2:47 pm, "MC" <mica[removethis]@aisus.comwrote:

[posting order restored. Please don't top post on Usenet.]

"Peter Michaux" <petermich...@gmail.comwrote in message

news:d4**********************************@p39g2000 prm.googlegroups.com...

On May 31, 2:24 pm, "MC" <mica[removethis]@aisus.comwrote:

Hi,

I have been looking around for a way to apply the filter that grays out a
form or div. I found some examples but the code is pretty complex. Any
simple ways to gray that out so I can highlight another form or div?

Thanks,
Mica
PS. I looked at several of the 'easy' examples and they did not work when
I
applied them.

Are you looking to disable the form element?

document.forms.gs2.elements.q.disabled = true;

Are you looking to send focus to another element?

document.forms.gs2.elements.someOtherInput.focus() ;

Are you looking for a visual cue that the input is not longer the
focus or that another one is the focus?

A little longer.

For example, I have two forms in a page, if the user clicks a button on
form1, I want to 'gray' or shadow form1 and show form2. I know how do do
everything but gray the form using the alpha filter stuff.

If it is just the opacity stuff that is the problem then you can
insert a div over top of the form, and size it to match the size of
the form. Give the div an background colour of something like #666.
Then you can set the opacity of that div with a cross-browser
setOpacity function. All the mainstream libraries have such a function
and we are standing precariously at the precipice of yet another
discussion about the quality of these mainstream libraries. Here is a
setOpacity function I wrote quite a while ago, if you want to slice
and dice your own.

http://forkjavascript.org/javascripts/fork/style.js

FORK.Style.setOpacity(overlayDiv, .5)

And the docs I wrote

http://forkjavascript.org/style/docs#setOpacity

You can find quite a bit of setOpacity discussion in the group
archives from the past year. It was the focus of some discussion about
cross-browser scripting in general.

Peter

May 31 '08 #4

MC

7
"Peter Michaux" <pe**********@gmail.comwrote in message
news:0a**********************************@q27g2000 prf.googlegroups.com...

On May 31, 2:47 pm, "MC" <mica[removethis]@aisus.comwrote:

[posting order restored. Please don't top post on Usenet.]

>"Peter Michaux" <petermich...@gmail.comwrote in message

news:d4**********************************@p39g200 0prm.googlegroups.com...

On May 31, 2:24 pm, "MC" <mica[removethis]@aisus.comwrote:
Hi,

>I have been looking around for a way to apply the filter that grays
out a
form or div. I found some examples but the code is pretty complex. Any
simple ways to gray that out so I can highlight another form or div?

>Thanks,
Mica
PS. I looked at several of the 'easy' examples and they did not work
when
I
applied them.

Are you looking to disable the form element?

document.forms.gs2.elements.q.disabled = true;

Are you looking to send focus to another element?

document.forms.gs2.elements.someOtherInput.focus() ;

Are you looking for a visual cue that the input is not longer the
focus or that another one is the focus?

A little longer.

>For example, I have two forms in a page, if the user clicks a button on
form1, I want to 'gray' or shadow form1 and show form2. I know how do do
everything but gray the form using the alpha filter stuff.

If it is just the opacity stuff that is the problem then you can
insert a div over top of the form, and size it to match the size of
the form. Give the div an background colour of something like #666.
Then you can set the opacity of that div with a cross-browser
setOpacity function. All the mainstream libraries have such a function
and we are standing precariously at the precipice of yet another
discussion about the quality of these mainstream libraries. Here is a
setOpacity function I wrote quite a while ago, if you want to slice
and dice your own.

http://forkjavascript.org/javascripts/fork/style.js

FORK.Style.setOpacity(overlayDiv, .5)

And the docs I wrote

http://forkjavascript.org/style/docs#setOpacity

You can find quite a bit of setOpacity discussion in the group
archives from the past year. It was the focus of some discussion about
cross-browser scripting in general.

Peter

Peter,

We have a cross browser winner. Every place I looked for this it was buried
deep within many lines of libraries and always tied to other code not
dealing with opacity. I will be using this regularly.

THANK YOU!
Mica

Jun 1 '08 #5

SAM

MC a écrit :

>
For example, I have two forms in a page, if the user clicks a button on
form1, I want to 'gray' or shadow form1 and show form2. I know how do do
everything but gray the form using the alpha filter stuff.

<html>
<script type="text/javascript">
function grayer(formId, yesNo) {
var f = document.getElementById(formId), s, opacity;
s = f.style;
opacity = yesNo? '40' : '100';
s.opacity = s.MozOpacity = s.KhtmlOpacity = opacity/100;
s.filter = 'alpha(opacity='+opacity+')';
for(var i=0; i<f.length; i++) f[i].disabled = yesNo;
}
window.onload=function(){grayer('f_2',true);};
</script>
<style type="text/css">
form { _height: 1%; /* hack IE */
padding: 10px; background:#ff5;
}
</style>
<body>
<form id="f_1" action="#" onsubmit="return false;">
<p>test: <input name="test">
<p><button onclick="grayer('f_2',false);grayer('f_1',true);">
change form</button></p>
</form>
<form id="f_2" action="#" onsubmit="return false;">
<p>test: <input name="test">
<p><button onclick="grayer('f_2',true);grayer('f_1',false);">
change form</button></p>
</form>
</html>

--
sm

Jun 1 '08 #6