471,897 Members | 2,018 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

Join Bytes to post your question to a community of 471,897 software developers and data experts.

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 3531
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
    Markdown-ImageLocalize
    reply views Thread by YellowAndGreen | last post: by

    By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

    To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

    BYTES.COM © 2023
    About Bytes
    Advertise
    Terms Of Use
    Privacy Policy
    Contact Us
    Sitemap

    Follow us! Get the Latest Bytes Updates