Change element opacity in Firefox

Sunny

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Oct 6 '08 #1

purcaholic

On 6 Okt., 19:56, Sunny <sunnyluth...@gmail.comwrote:

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Hi,

only IE understands filter effects like filter:alpha(opacity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like
and would only replace the className property using JavaScript
Regards,
purcaholic

Oct 6 '08 #2

Sunny

On Oct 6, 3:27 pm, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 19:56, Sunny <sunnyluth...@gmail.comwrote:

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Hi,

only IE understands filter effects like filter:alpha(opacity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like

Expand|Select|Wrap|Line Numbers

1. /* works but is not valid css */
2. .opacity { filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; }
3.  

and would only replace the className property using JavaScript

Expand|Select|Wrap|Line Numbers

1. abc.className = "opacity";
2.  

Regards,
purcaholic

Hi,

I tried using a class. But to no avail.
That's what I did.
In my style sheet I defined a class.
..style3 {
opacity: 0.9999;
-moz-opacity: 0.9999;
-khtml-opacity: 0.9999;
}
and then I applied that class to the object
element.style3 = ".44";

Is that, What I did is correct or wrong?

Oct 6 '08 #3

Gregor Kofler

Sunny meinte:

Hi,

I tried using a class. But to no avail.
That's what I did.
In my style sheet I defined a class.
.style3 {
opacity: 0.9999;
-moz-opacity: 0.9999;
-khtml-opacity: 0.9999;
}
and then I applied that class to the object
element.style3 = ".44";

Is that, What I did is correct or wrong?

If it were correct, it would have worked. Right?

Perhaps you should familiarize yourself with the basics first...

Anyway, you are looking for element.className = "style3". Changing the
opacity dynamically requires feature testing. Something like

if(typeof element.style.filter === "string") {
element.style.filter = "alpha(opacity="+o+")";
}
else {
element.style.opacity = ""+o/100;
}

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Oct 6 '08 #4

Thomas 'PointedEars' Lahn

Gregor Kofler wrote:

element.style.opacity = ""+o/100;

As I have showed before,

element.style.opacity = String(o / 100);

is more efficient than that.

However, the `opacity' property is specified and implemented to be of type
Number, not String:

<http://www.w3.org/TR/css3-color/#transparency>
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Oct 6 '08 #5

Gregor Kofler

Thomas 'PointedEars' Lahn meinte:

However, the `opacity' property is specified and implemented to be of type
Number, not String:

<http://www.w3.org/TR/css3-color/#transparency>

On the contrary, browsers (at least the tested FF and Opera) return
"string" when asked for the typeof elem.style.opacity.

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Oct 7 '08 #6

purcaholic

On 6 Okt., 21:36, Sunny <sunnyluth...@gmail.comwrote:

On Oct 6, 3:27 pm, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 19:56, Sunny <sunnyluth...@gmail.comwrote:

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Hi,

only IE understands filter effects like filter:alpha(opacity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like

Expand|Select|Wrap|Line Numbers

1.  /* works but is not valid css */
2.  .opacity { filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; }
3.  

and would only replace the className property using JavaScript

Expand|Select|Wrap|Line Numbers

1.  abc.className = "opacity";
2.  

Regards,
purcaholic

Hi,

I tried using a class. But to no avail.
That's what I did.
In my style sheet I defined a class.
.style3 {
opacity: 0.9999;
-moz-opacity: 0.9999;
-khtml-opacity: 0.9999;}

and then I applied that class to the object
element.style3 = ".44";

Is that, What I did is correct or wrong?- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Try to set the classname using
If you need several nuances of opacity, then you have to use
javascript, following code should do the trick:
Regards,
purcaholic

Oct 7 '08 #7

Sunny

On Oct 7, 5:35*am, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 21:36, Sunny <sunnyluth...@gmail.comwrote:

On Oct 6, 3:27 pm, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 19:56, Sunny <sunnyluth...@gmail.comwrote:

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Hi,

only IE understands filter effects like filter:alpha(opacity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like

Expand|Select|Wrap|Line Numbers

1.  /* works but is not valid css */
2.  .opacity { filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1;}
3.  

and would only replace the className property using JavaScript

Expand|Select|Wrap|Line Numbers

1.  abc.className = "opacity";
2.  

Regards,
purcaholic

Hi,

I tried using a class. But to no avail.
That's what I did.
In my style sheet I defined a class.
.style3 {
opacity: 0.9999;
-moz-opacity: 0.9999;
-khtml-opacity: 0.9999;}

and then I applied that class to the object
element.style3 = ".44";

Is that, What I did is correct or wrong?- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Try to set the classname using

Expand|Select|Wrap|Line Numbers

1. element.className = "style3";
2.  

If you need several nuances of opacity, then you have to use
javascript, following code should do the trick:

Expand|Select|Wrap|Line Numbers

1. var oStyle = document.getElementById(id).style;
2. oStyle.opacity = (opacity / 100);
3. if (typeof(oStyle.MozOpacity) === "string") {
4. * * oStyle.MozOpacity = (opacity / 100);} else if (typeof(oStyle.KhtmlOpacity) === "string") {
6. * * oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {
8. * * oStyle.filter = "alpha(opacity=" + opacity + ")";}
10.  

Regards,
purcaholic- Hide quoted text -

- Show quoted text -

Still can't make it work.
I have an xml file with svg shapes.
I am opening the xml file & drawing those shapes on my web page.
Here is the code.
countyVMLArray = resptext.split("<svg")
for(var c=1; c!= countyVMLArray.length; ++c){
color = "#FFFFFF"

countyVMLtext = "<svg" + countyVMLArray[c]
document.getElementById("showit").value = countyVMLtext;
county[c] = new DOMParser().parseFromString(countyVMLtext,
'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(c ounty[c].documentElement,true));
county[c].value = countyCenters[c-1][1];
county[c].className="style3";
//county[c].opacity = ".2";
//county[c].addEventListener('onmouseover',testMouseover,true );
//county[c].addEventListener('onclick',"testClick", false);
//county[c].fill.opacity = ""+90/100;
//break;
}

And Here is the class style3.
..style3 { filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; }

Also the addeventlistner is not working.
Is that the case that i m trying to change the opacity of vml shape
that's why its not working.
Or What's the problem here?
I also tried, element.style.opacity-that didn't work too.

Oct 7 '08 #8

Thomas 'PointedEars' Lahn

Gregor Kofler wrote:

Thomas 'PointedEars' Lahn meinte:

>However, the `opacity' property is specified and implemented to be of type
Number, not String:

<http://www.w3.org/TR/css3-color/#transparency>

On the contrary, browsers (at least the tested FF and Opera) return
"string" when asked for the typeof elem.style.opacity.

I would presume this to be the result of an implementation-dependent design
decision conforming to ECMAScript (IOW: a bug ;-)) since the arbitrariness
of a string value is unnecessary and unwished for here, and both DOM
implementations accept Number values in the specified range.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Oct 7 '08 #9

Sunny

On Oct 7, 8:43*am, Sunny <sunnyluth...@gmail.comwrote:

On Oct 7, 5:35*am, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 21:36, Sunny <sunnyluth...@gmail.comwrote:

On Oct 6, 3:27 pm, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 19:56, Sunny <sunnyluth...@gmail.comwrote:

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Hi,

only IE understands filter effects like filter:alpha(opacity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like

Expand|Select|Wrap|Line Numbers

1.   /* works but is not valid css */
2.   .opacity { filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; }
3.  

and would only replace the className property using JavaScript

Expand|Select|Wrap|Line Numbers

1.   abc.className = "opacity";
2.  

Regards,
purcaholic

Hi,

I tried using a class. But to no avail.
That's what I did.
In my style sheet I defined a class.
.style3 {
opacity: 0.9999;
-moz-opacity: 0.9999;
-khtml-opacity: 0.9999;}

and then I applied that class to the object
element.style3 = ".44";

Is that, What I did is correct or wrong?- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Try to set the classname using

Expand|Select|Wrap|Line Numbers

1.  element.className = "style3";
2.  

If you need several nuances of opacity, then you have to use
javascript, following code should do the trick:

Expand|Select|Wrap|Line Numbers

1.  var oStyle = document.getElementById(id).style;
2.  oStyle.opacity = (opacity / 100);
3.  if (typeof(oStyle.MozOpacity) === "string") {
4.  * * oStyle.MozOpacity = (opacity / 100);} else if (typeof(oStyle.KhtmlOpacity) === "string") {

Expand|Select|Wrap|Line Numbers

2.         
3.                  * * oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {

 

        

                 * * oStyle.filter = "alpha(opacity=" + opacity + ")";}

 

        

 

 

 

Jorge

On Oct 6, 10:47*pm, Gregor Kofler <use...@gregorkofler.atwrote:

>
else {
* *element.style.opacity = ""+o/100;

}

Beware: if opacity becomes small enough that exponential notation is
turned on, that will fail.
While you can assign opacity= "0.001", opacity= "1e-3" will fail.
AFAIK, last time I checked.

--
Jorge.

Oct 7 '08 #11

Jorge

On Oct 7, 3:46*pm, Sunny <sunnyluth...@gmail.comwrote:

On Oct 7, 8:43*am, Sunny <sunnyluth...@gmail.comwrote:

On Oct 7, 5:35*am, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 21:36, Sunny <sunnyluth...@gmail.comwrote:

On Oct 6, 3:27 pm, purcaholic <purcaho...@googlemail.comwrote:

On 6 Okt., 19:56, Sunny <sunnyluth...@gmail.comwrote:

Hi, I can change the lement opacity in IE using.

abc.style.filter = 'alpha(opacity=' + 10 + ')';

But this dont work in firefox, In firefox it throws error.

How I can change the opacity of an element in Firefox.

Hi,

only IE understands filter effects like filter:alpha(opacity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like

Expand|Select|Wrap|Line Numbers

1.   /* works but is not valid css */
2.   .opacity { filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; }
3.  

and would only replace the className property using JavaScript

Expand|Select|Wrap|Line Numbers

1.   abc.className = "opacity";
2.  

Regards,
purcaholic

Hi,

I tried using a class. But to no avail.
That's what I did.
In my style sheet I defined a class.
.style3 {
opacity: 0.9999;
-moz-opacity: 0.9999;
-khtml-opacity: 0.9999;}

and then I applied that class to the object
element.style3 = ".44";

Is that, What I did is correct or wrong?- Zitierten Text ausblenden-

- Zitierten Text anzeigen -

Try to set the classname using

Expand|Select|Wrap|Line Numbers

1.  element.className = "style3";
2.  

If you need several nuances of opacity, then you have to use
javascript, following code should do the trick:

Expand|Select|Wrap|Line Numbers

1.  var oStyle = document.getElementById(id).style;
2.  oStyle.opacity = (opacity / 100);
3.  if (typeof(oStyle.MozOpacity) === "string") {
4.  * * oStyle.MozOpacity = (opacity / 100);} else if (typeof(oStyle.KhtmlOpacity) === "string") {

Expand|Select|Wrap|Line Numbers

2.         
3.                         
4.                  * * oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {

 

        

                        

                 * * oStyle.filter = "alpha(opacity=" + opacity + ")";}

 

        

                        

 

 

 

Jorge

On Oct 7, 4:00*pm, Jorge <jo...@jorgechamorro.comwrote:

>
Beware: if opacity becomes small enough that exponential notation is
turned on, that will fail.
While you can assign opacity= "0.001", opacity= "1e-3" will fail.
AFAIK, last time I checked.

1e-3 won't fail, it has to be yet smaller:

javascript:(function(){document.body.style.opacity =1e-9})() -fails
javascript:(function(){document.body.style.opacity =1e-3})() -ok

--
Jorge.

Oct 7 '08 #13

Sunny

On Oct 7, 10:30 am, Jorge <jo...@jorgechamorro.comwrote:

On Oct 7, 4:00 pm, Jorge <jo...@jorgechamorro.comwrote:

Beware: if opacity becomes small enough that exponential notation is
turned on, that will fail.
While you can assign opacity= "0.001", opacity= "1e-3" will fail.
AFAIK, last time I checked.

1e-3 won't fail, it has to be yet smaller:

javascript:(function(){document.body.style.opacity =1e-9})() -fails
javascript:(function(){document.body.style.opacity =1e-3})() -ok

--
Jorge.

Hi Jorge, Thanks for that,
Can you tell me How to change the height of an Element in Firefox.
In IE I can change it like that.
county[c].style.width = '2';
county[c].style.height = '2';
But in Firefox its not working.

How can I change the height of an SVG element on webpage dynamically?
Thanks

Oct 7 '08 #14

Martin Honnen

Sunny wrote:

How can I change the height of an SVG element on webpage dynamically?

What kind of SVG element is that? You need to manipulate its attributes
for instance for a SVG circle element you need to manipulate the radius
attribute r:
svgCircleElement.setAttributeNS(null, 'r', '100');
For a rect element you can set the width and/or height attribute
svgRectElement.setAttributeNS(null, 'width', '200');
svgRectElement.setAttributeNS(null, 'height', '200');
--

Martin Honnen
http://JavaScript.FAQTs.com/

Oct 7 '08 #15

Sunny

On Oct 7, 11:57 am, Martin Honnen <mahotr...@yahoo.dewrote:

Sunny wrote:

How can I change the height of an SVG element on webpage dynamically?

What kind of SVG element is that? You need to manipulate its attributes
for instance for a SVG circle element you need to manipulate the radius
attribute r:
svgCircleElement.setAttributeNS(null, 'r', '100');
For a rect element you can set the width and/or height attribute
svgRectElement.setAttributeNS(null, 'width', '200');
svgRectElement.setAttributeNS(null, 'height', '200');

--

Martin Honnen
http://JavaScript.FAQTs.com/

It's a Polygon,
so doing that
county[c].setAttributeNS(null, 'width', '200');
Distort the shape.
But I have a question.
all my 5 polygons have different height & width.
So doing this:
county[c].setAttributeNS(null, 'width', '200');
is not going to work.
as It will change the width of all polygons to 200, so all shapes
distort.
Now My question is as I am appending all the shapes to
shps2.appendChild(county[c]);
so Now all shapes are contained in the shp2 element.
Is there I can Increase the width of this shp2 element.
like shps2.setAttributeNS(null, 'width', '200');
But this is also not working.
I want to change the size of a Big shape that is made up of small 5
polygons.
How I can do that?

Oct 7 '08 #16