Form Gray Filter

M

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.
 
P

Peter Michaux

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.
Click to expand...

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
 
M

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
 
P

Peter Michaux

[posting order restored. Please don't top post on Usenet.]
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.
Click to expand...

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
 
M

MC

7
Peter Michaux said:
[posting order restored. Please don't top post on Usenet.]
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.
Click to expand...

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
Click to expand...

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
 
S

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.
Click to expand...

<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.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>
 

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

C# MVC Razor page form 0
[HELP] Add-on - Twitch chat input 0
FIR Filter Transposed Form VHDL 12
PHP Open Stream Error 0
Looking to change programming direction 1
Quick and dirty article filter 0
Need help making the position of an infinite animation sticky 1
FIR Filter Design 1

Members online

No members online now.
Total: 2,666 (members: 0, guests: 2,666)
Robots: 200

Forum statistics

Threads
474,141
Messages
2,570,817
Members
47,367
Latest member
mahdiharooniir

Latest Threads

Top