473,703 Members | 2,438 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Change element opacity in Firefox

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.
Oct 6 '08 #1
15 3719
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
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...@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
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.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
Oct 6 '08 #4
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
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.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
Oct 7 '08 #6
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
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...@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
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") {
  5. * * oStyle.KhtmlOpacity = (opacity / 100);} else if (typeof(oStyle.filter) === "string") {
  6. * * oStyle.filter = "alpha(opacity=" + opacity + ")";}
  7.  

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.
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.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>
Oct 7 '08 #9
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
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
  1.         
  2.                  * * 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.getEl ementById("show it").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;

    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

    This thread has been closed and replies have been disabled. Please start a new discussion.

    Similar topics

    0
    657
    by: Oli | last post by:
    Hi, I wanted to get some opinions on whether I should consider using proprietary attributes to apply opacity (until there's support for CSS3 in this area). Yesterday I came across a site which specified the following in a CSS rule... filter:Alpha(Opacity=90);
    2
    2356
    by: Eric Lindsay | last post by:
    Can someone point me to a good explanation of how to use opacity? From CSS 3 http://www.w3.org/TR/2003/CR-css3-color-20030514/#opacity which I read to mean just set a decimal value between 0 and 1 I tried using opacity: 0.50; and it appeared to work as expected in Safari and Firefox, but not in Opera. Does it actually work in any version of IE? Does it degrade harmlessly like in Opera? I also noticed the use of filter:...
    1
    1771
    by: dave | last post by:
    I am attempted to make a semi-transparent div in IE/Firefox but IE is only making the first image in the div opaque for example if I have a div like: <div class='trans'><img src="foo.jpg"><img src="bar.jpg"><span>text</span></div> only foo.jpg become opaque. any ideas why? It works as expected in firefox
    2
    2716
    by: Trond Michelsen | last post by:
    Hi. I have a transparent PNG-image that I would like to display on top of the rest of the web page. I've already got this part working. But, I'd like the background (as in "the part of the image that is transparent"), to be semi transparent instead. So, I've wrapped the image in a div-tag with the style "opacity: .70" instead. This gives me pretty much the semi transparency that I'm looking for, except that this makes the entire image...
    6
    2368
    by: Jake Barnes | last post by:
    Please go look at this page using FireFox: http://www.ralphkrubner.com/Commercial/ Click the "Next" button a few times. The images fade out and then fade in. It's a nice effect. Now do try to do the same in IE (6.0). The images don't fade into each other. Instead, they hesitate, which is annoying, and then jump from one image to the other, suddenly, with no fade.
    0
    4734
    by: erikito | last post by:
    Hey there! I've got a little problem with some css I'm using. The opacity at 75% in IE works ok, but I have a problem with the select boxes. They don't seem to react on the following CSS code: display: inline; position: absolute; top: 0; left: 0; width: 100%; background: black;
    1
    1516
    by: jagadeeshdandu | last post by:
    Hi, I tried an exaple for opacity like this, ********************************* <html> <title></title> <head> <style> .opac
    5
    5475
    by: montybytes | last post by:
    Hi there, Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well. I have a JavaScript function which retrieves the left-position of an Element. This JavaScript functions works in FF and IE7 but does not work in IE6, In IE6 it retrieves the wrong offsetLeft value. Having investigated the problem I noticed it had something to do with the margin-left and position...
    8
    3150
    by: Sunny | last post by:
    Hi, I am creating an Element on page in Firefox. But It gives me an error in Firefox. String contains an invalid character" code: "5 county = document.createElement('"' + countyVMLtext + '"'); I am adding a SVG shape to the page. Here is the Shape :
    0
    8750
    marktang
    by: marktang | last post by:
    ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
    0
    9244
    Oralloy
    by: Oralloy | last post by:
    Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
    0
    9111
    jinu1996
    by: jinu1996 | last post by:
    In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
    1
    9004
    by: Hystou | last post by:
    Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
    0
    7853
    agi2029
    by: agi2029 | last post by:
    Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
    0
    4421
    by: TSSRALBI | last post by:
    Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
    0
    4679
    by: adsilva | last post by:
    A Windows Forms form does not have the event Unload, like VB6. What one acts like?
    1
    3114
    by: 6302768590 | last post by:
    Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
    2
    2439
    muto222
    by: muto222 | last post by:
    How can i add a mobile payment intergratation into php mysql website.

    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.