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.

 

[purcaholic]

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

/* 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]

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

/* 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]

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

 

[Thomas 'PointedEars' Lahn]

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

 

[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

 

[purcaholic]

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

/* 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]

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

/* 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.getElementById("showit").value = countyVMLtext;
county[c] = new DOMParser().parseFromString(countyVMLtext,
'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(county[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.

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn meinte:

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

 

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

/* 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]
    oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {[/QUOTE]
[QUOTE]
    oStyle.filter = "alpha(opacity=" + opacity + ")";} [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.getElementById("showit").value = countyVMLtext;
         county[c] = new DOMParser().parseFromString(countyVMLtext,
'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(county[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.- 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]

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]

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

/* 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.getElementById("showit").value = countyVMLtext;
         county[c] = new DOMParser().parseFromString(countyVMLtext,
'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(county[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.- Hide quoted text -

- Show quoted text -

Hi,

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

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]

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:

javascriptfunction(){document.body.style.opacity=1e-9})() -> fails
javascriptfunction(){document.body.style.opacity=1e-3})() -> ok

 

[Sunny]

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

javascriptfunction(){document.body.style.opacity=1e-9})() -> fails
javascriptfunction(){document.body.style.opacity=1e-3})() -> ok

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]

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');

 

[Sunny]

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');

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?