Change element opacity in Firefox

[Sunny]

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

abc.style.filte r = '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.

[purcaholic]

Re: Change element opacity in Firefox

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

Hi, I can change the lement opacity in IE using.
>
abc.style.filte r = '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(op acity=10),
therefore Firefox will throw an error, if you tyr to use them.

I would define a cross browser opacity style definition, like

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

and would only replace the className property using JavaScript

abc.className = "opacity";

Regards,
purcaholic

[Sunny]

Re: Change element opacity in Firefox

On Oct 6, 3:27 pm, purcaholic <purcaho...@goo glemail.comwrot e:

On 6 Okt., 19:56, Sunny <sunnyluth...@g mail.comwrote:
>

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

>

abc.style.filte r = '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(op acity=10),
therefore Firefox will throw an error, if you tyr to use them.
>
I would define a cross browser opacity style definition, like

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

>
and would only replace the className property using JavaScript

abc.className = "opacity";

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

[Gregor Kofler]

Re: Change element opacity in Firefox

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.classNa me = "style3". Changing the
opacity dynamically requires feature testing. Something like

if(typeof element.style.f ilter === "string") {
element.style.f ilter = "alpha(opacity= "+o+")";
}
else {
element.style.o pacity = ""+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

[Thomas 'PointedEars' Lahn]

Re: Change element opacity in Firefox

Gregor Kofler wrote:

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

As I have showed before,

element.style.o pacity = 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

[Gregor Kofler]

Re: Change element opacity in Firefox

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

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

[purcaholic]

Re: Change element opacity in Firefox

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

On Oct 6, 3:27 pm, purcaholic <purcaho...@goo glemail.comwrot e:
>
>
>
>
>

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

>

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

>

abc.style.filte r = '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(op acity=10),
therefore Firefox will throw an error, if you tyr to use them.

>

I would define a cross browser opacity style definition, like

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

>

and would only replace the className property using JavaScript

 abc.className = "opacity";

>

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

element.className = "style3";

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

var oStyle = document.getElementById(id).style;
oStyle.opacity = (opacity / 100);
if (typeof(oStyle.MozOpacity) === "string") {
oStyle.MozOpacity = (opacity / 100);
} else if (typeof(oStyle.KhtmlOpacity) === "string") {
oStyle.KhtmlOpacity = (opacity / 100);
} else if (typeof(oStyle.filter) === "string") {
oStyle.filter = "alpha(opacity=" + opacity + ")";
}

Regards,
purcaholic

[Sunny]

Re: Change element opacity in Firefox

On Oct 7, 5:35 am, purcaholic <purcaho...@goo glemail.comwrot e:

On 6 Okt., 21:36, Sunny <sunnyluth...@g mail.comwrote:
>
>
>
>
>

On Oct 6, 3:27 pm, purcaholic <purcaho...@goo glemail.comwrot e:

>

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

>

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

>

abc.style.filte r = '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(op acity=10),
therefore Firefox will throw an error, if you tyr to use them.

>

I would define a cross browser opacity style definition, like

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

>

and would only replace the className property using JavaScript

 abc.className = "opacity";

>

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

element.className = "style3";

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

var oStyle = document.getElementById(id).style;
oStyle.opacity = (opacity / 100);
if (typeof(oStyle.MozOpacity) === "string") {
    oStyle.MozOpacity = (opacity / 100);} else if (typeof(oStyle.KhtmlOpacity) === "string") {
>
    oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {
>
    oStyle.filter = "alpha(opacity=" + opacity + ")";}
>

>
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.getEle mentById("showi t").value = countyVMLtext;
county[c] = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');

shps2.appendChi ld(shps2.ownerD ocument.importN ode(county[c].documentElemen t,true));
county[c].value = countyCenters[c-1][1];
county[c].className="sty le3";
//county[c].opacity = ".2";
//county[c].addEventListen er('onmouseover ',testMouseover ,true);
//county[c].addEventListen er('onclick',"t estClick", false);
//county[c].fill.opacity = ""+90/100;
//break;
}

And Here is the class style3.
..style3 { filter:alpha(op acity=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.o pacity-that didn't work too.

[Thomas 'PointedEars' Lahn]

Re: Change element opacity in Firefox

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

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>

[Sunny]

Re: Change element opacity in Firefox

On Oct 7, 8:43 am, Sunny <sunnyluth...@g mail.comwrote:

>[QUOTE]
     oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {

	

		

			
			

			
				On Oct 7, 5:35 am, purcaholic <purcaho...@goo  glemail.comwrot  e:
>
>
>
>
>

	

		

			
			

			
				 On 6 Okt., 21:36, Sunny <sunnyluth...@g  mail.comwrote:
			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				 On Oct 6, 3:27 pm, purcaholic <purcaho...@goo  glemail.comwrot  e:
			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

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

			
		
	
>

	

		

			
			

			
				

	

		

			
			

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

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  abc.style.filte  r = '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(op  acity=10),
  therefore Firefox will throw an error, if you tyr to use them.
			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  I would define a cross browser opacity style definition, like
  

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

			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  and would only replace the className property using JavaScript
  

	
	
  abc.className = "opacity";

			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  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
 

	
	
 element.className = "style3";

			
		
	
>

	

		

			
			

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

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

			
		
	

			
		
	
>[QUOTE]
     oStyle.filter = "alpha(opacity=" + opacity + ")";}[/QUOTE]
>[QUOTE]
 [/QUOTE]

>

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.getEle mentById("showi t").value = countyVMLtext;
         county[c] = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');
>
shps2.appendChi ld(shps2.ownerD ocument.importN ode(county[c].documentElemen t,true));
         county[c].value = countyCenters[c-1][1];
                county[c].className="sty le3";
        //county[c].opacity = ".2";
         //county[c].addEventListen er('onmouseover ',testMouseover ,true);
        //county[c].addEventListen er('onclick',"t estClick", false);
        //county[c].fill.opacity = ""+90/100;
        //break;
         }
>
And Here is the class style3.
.style3 { filter:alpha(op acity=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.o pacity-that didn't work too.- Hide quoted text -
>
- Show quoted text -[/QUOTE]

Hi,

I am able to change the opacity using:
county[c].style.opacity = ""+50/100;

Thanks for everyone's help.
Can someone tell me, How to change the Width & Height of element now:
county[c].style.height = ""+100+"px" ;
dont work.
Any Suggestions?

[Jorge]

Re: Change element opacity in Firefox

On Oct 6, 10:47 pm, Gregor Kofler <use...@gregork ofler.atwrote:

>
else {
   element.style.o pacity = ""+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.

[Jorge]

Re: Change element opacity in Firefox

On Oct 7, 3:46 pm, Sunny <sunnyluth...@g mail.comwrote:

>[QUOTE][QUOTE]
     oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {

	

		

			
			

			
				On Oct 7, 8:43 am, Sunny <sunnyluth...@g  mail.comwrote:
>
>
>
>
>

	

		

			
			

			
				 On Oct 7, 5:35 am, purcaholic <purcaho...@goo  glemail.comwrot  e:
			
		
	
>

	

		

			
			

			
				

	

		

			
			

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

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  On Oct 6, 3:27 pm, purcaholic <purcaho...@goo  glemail.comwrot  e:
			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

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

			
		
	
>

	

		

			
			

			
				

	

		

			
			

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

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				   abc.style.filte  r = '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(op  acity=10),
  therefore Firefox will throw an error, if you tyr to use them.
			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  I would define a cross browser opacity style definition, like
  

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

			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  and would only replace the className property using JavaScript
  

	
	
  abc.className = "opacity";

			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

			
				  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
 

	
	
 element.className = "style3";

			
		
	

			
		
	
>

	

		

			
			

			
				

	

		

			
			

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

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

			
		
	

			
		
	

			
		
	
[/QUOTE]
>[QUOTE][QUOTE]
     oStyle.filter = "alpha(opacity=" + opacity + ")";}[/QUOTE][/QUOTE]
>[QUOTE][QUOTE]
 [/QUOTE][/QUOTE]

>

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!=countyVMLArr ay.length; ++c){
                         color = "#FFFFFF"

>

         countyVMLtext = "<svg" + countyVMLArray[c]
 document.getEle mentById("showi t").value = countyVMLtext;
         county[c] = new DOMParser().par seFromString(co untyVMLtext,
'application/xml');

>

shps2.appendChi ld(shps2.ownerD ocument.importN ode(county[c].documentElemen t, true));
         county[c].value = countyCenters[c-1][1];
                county[c].className="sty le3";
        //county[c].opacity = ".2";
         //county[c].addEventListen er('onmouseover ',testMouseover ,true);
        //county[c].addEventListen er('onclick',"t estClick", false);
        //county[c].fill.opacity = ""+90/100;
        //break;
         }

>

And Here is the class style3.
.style3 { filter:alpha(op acity=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.o pacity-that didn't work too.- Hide quoted text -

>

- Show quoted text -

>
Hi,
>
I am able to change the opacity using:
county[c].style.opacity = ""+50/100;
>[/QUOTE]

There should be no need to cast it to a string: see:

http://homepage.mac.com/jorgechamorro/cljs/011/

But double check for small values, as it will fail if exponential
notation is turned on...

--
Jorge.

[Jorge]

Re: Change element opacity in Firefox

On Oct 7, 4:00 pm, Jorge <jo...@jorgecha morro.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:(fun ction(){documen t.body.style.op acity=1e-9})() -fails
javascript:(fun ction(){documen t.body.style.op acity=1e-3})() -ok

--
Jorge.

[Sunny]

Re: Change element opacity in Firefox

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

On Oct 7, 4:00 pm, Jorge <jo...@jorgecha morro.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:(fun ction(){documen t.body.style.op acity=1e-9})() -fails
javascript:(fun ction(){documen t.body.style.op acity=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

[Martin Honnen]

Re: Change element opacity in Firefox

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:
svgCircleElemen t.setAttributeN S(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/