469,610 Members | 1,822 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > change element opacity in firefox

Post your question to a community of 469,610 developers. It's quick & easy.

Change element opacity in Firefox

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
15 3406
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
Oct 6 '08 #2
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
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
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
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
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);
  5. } else if (typeof(oStyle.KhtmlOpacity) === "string") {
  6. oStyle.KhtmlOpacity = (opacity / 100);
  7. } else if (typeof(oStyle.filter) === "string") {
  8. oStyle.filter = "alpha(opacity=" + opacity + ")";
  9. }
  10.  
Regards,
purcaholic
Oct 7 '08 #7
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
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
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 + ")";}
  •  
  •         
  •  
  •  
  •  
    • 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.- Hide quoted text -

    - Show quoted text - 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?
    Oct 7 '08 #10
    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
    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 + ")";}
  •  
  •         
  •                         
  •  
  •  
  •  
    • 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.- 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.
    Oct 7 '08 #12
    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
    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
    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
    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

    This discussion thread is closed

    Start new discussion

    Replies have been disabled for this discussion.

    Similar topics
    Opacity
    reply views Thread by Oli | last post: by
    Opacity?
    2 posts views Thread by Eric Lindsay | last post: by
    opacity not being inherited
    1 post views Thread by dave | last post: by
    How can I give an element a semi-transparent background?
    2 posts views Thread by Trond Michelsen | last post: by
    Create Element in Firefox
    8 posts views Thread by Sunny | last post: by
    I have this print file
    reply views Thread by gheharukoh7 | last post: by
    BYTES.COM © 2021
    About Us
    Advertise
    Terms Of Use
    Privacy Policy
    Manage Cookies
    Contact Us
    Sitemap

    Follow us! Get the Latest Bytes Updates
    By using this site, you agree to our Privacy Policy and Terms of Use.