By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,969 Members | 1,767 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,969 IT Pros & Developers. It's quick & easy.

Form Gray Filter

P: n/a
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
Share this Question
Share on Google+
5 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.