DynamicLayer.setOpacity seems to have a little issue in Internet Explorer 8.0

Wimvan_Iersel · ‎07-12-2011

I'm found a minor issue with changing of the opacity of a dynamic layer in our website. We have a button called "Plandekking" which rotates through a preset number of opacity setting and sets them on the IMRO2008 layer. The settings are 0%, 25%, 50%, 75% and 100%, the default setting is 50%.

This all works fine in Firefox 3.6 and 4.0, Opera 10.x, Safari 5.x, but not in Internet Explorer 8.0. When the opacity is adjusted nothing changes on the screen. Only after you pan the map the IMRO2008 layer refreshes with the correct opacity.

I tested out two cases:

Set the default opacity to 100% or 1.0

Set the default opacity to 0% or 0.0

Case number 1, made everything work fine it rotated through all settings.
Case number 2, as expected caused every step to fail and require a pan of the map.

Is this a known issue with the Javascript API 1.6, Internet Explorer or is my code faulty?

function doPlanToggle(){
 resetStatusbar(); 
 var current_o = service_IMRO2008.opacity; // load current setting
 var new_o;
 switch (current_o) {
  case 0.00: new_o = 0.25; break;
  case 0.25: new_o = 0.50; break;
  case 0.50: new_o = 0.75; break;
  case 0.75: new_o = 1.00; break;  
  case 1.00: new_o = 0.00; break;
  default: new_o = 0.50;
 }
 service_IMRO2008.setOpacity(new_o);
 setStatusbar("Dekkingspercentage plan aangepast in: " + parseInt(100 * new_o) + "%"); // interface feedback
} // WvI 2010-08-02

Example available at:
http://kaart-test.tilburg.nl/ruimtelijkeplannen/bestemmingsplannen/plan/NL.IMRO.0855.BSP2008013-e001

StephenLead · ‎07-13-2011

Wim,

Your code seems to be working fine for me in Internet Explorer 8 (Document mode: IE8 Standards).

The Plandekking button correctly cycles the layer's transparency through 0-100%.

Just curious - is there a reason you don't upgrade to the version 2.4 of the API?

Steve

Wimvan_Iersel · ‎08-18-2011

We are looking into upgrading from ArcGIS 9.3 to 10.x, when we do this we also want to update our website to use 2.4 instead of 1.6. Lets hope that solves the issue.

bobcarr · ‎09-12-2011

I had the same issue with the OpacitySlider after upgrading to v2.4 of the JavaScript API. Firefox was not affected. I believe it started with the 2.3 release.

Adding a meta tag to the html code which specified IE-7 content for the page restored the expected behavior of the OpacitySlider. So far I have not seen any side effects. I believe it is necessary to place the meta tag above the doctype declaration.

<meta http-equiv="x-ua-compatible" content="IE=7">
<!doctype html>

JasonGreenlaw · ‎08-06-2012

I realize this topic is almost a year old, but I'm seeing the same issue in IE8 with version 3.0 of the JS API.

See this jsFiddle example (opacity slider is at bottom of map).

I've tried playing around with the meta http-equiv tag as suggested above but still can't get it to work properly. It works great in Chrome and Firefox, but not in IE. The only workaround I've found is to call:

layer.refresh()

after calling

layer.setOpacity(newValue)

...which seems like overkill.

Does anyone know why this is occurring or how to fix it? The transparency slider on the ArcGIS.com web map seems to work fine in Internet Explorer, but I'm not sure what it's doing differently.

Wimvan_Iersel · ‎08-06-2012

@bob_car I would expect the meta tag to be placed after the DOCTYPE definition, normally in the <head>, but since they removed all structure from HTML5 who knows... (sorry I think they maybe a mess of HTML5, structure wise).

@greenlaw, during our migration to JS API 2.8 recently I was looking into this issue again... I found the same solution as you did. But I added a little extra:

layer.setOpacity(new_o);
if (dojo.isIE <= 8) {  layer.refresh(); } // IE fix

Example available at: http://kaart.tilburg.nl/geluidsbelastingskaarten/wegverkeer/

It still seems to respond rather slow, or maybe it triggers some internal delay.

__Rich_ · ‎08-07-2012

It still seems to respond rather slow...

Have a look at the network traffic each time you call layer.refresh()

HTH

JasonGreenlaw · ‎09-10-2012

Just to follow up on this - I was able to resolve the problem using bob_carr's meta tag solution. As he mentioned, it appears that the content must be set to "IE=7" for setOpacity() to work properly in IE8.

However, this solution doesn't work when using the Javascript API in a jsFiddle, so that was the reason for my earlier tests failing.

MattFancher · ‎05-08-2013

I'm having what I think is a similar issue to what's described above. I'm viewing my map in IE9 and using version 3.4 of the API. I tried the meta tag solution and the layer.refresh() solution described above, and it still doesn't seem to work quite right. My map uses a horizontal jquery slider to adjust the opacity. Moving the slider to the right is supposed to increase the opacity, but the first move to the right in IE9 seems to actuall decrease it. Then it starts to increase it with subsequent moves the right. Not sure if this is the same issue or not, but if anyone has a suggestion to fix it, I would appreciate it. Thanks in advance.

Here is the map:

http://www.puco.ohio.gov/pucogis/esa/index.cfm

ShadCampbell · ‎06-10-2013

For the JQuery slider, consider using the change event handler of the slider control. Not ideal but a workaround.

http://dial.deschutes.org/Real/ZoningMap/103383


    $("#uxOpacitySlider").slider({
        min: 0,
        max: 100,
        value: 65,
        slide: function (event, ui) {
            $("#uxOpacityValue").html("(" + (100 - ui.value) + "%)");
            var newOp = (ui.value / 100);
            Layer.setOpacity(newOp);
        },
        change: function (event, ui) {
            if (dojo.isIE <= 10) {
                Layer.refresh();
            } // IE fix
        }
    });

I'm having what I think is a similar issue to what's described above. I'm viewing my map in IE9 and using version 3.4 of the API. I tried the meta tag solution and the layer.refresh() solution described above, and it still doesn't seem to work quite right. My map uses a horizontal jquery slider to adjust the opacity. Moving the slider to the right is supposed to increase the opacity, but the first move to the right in IE9 seems to actuall decrease it. Then it starts to increase it with subsequent moves the right. Not sure if this is the same issue or not, but if anyone has a suggestion to fix it, I would appreciate it. Thanks in advance.

Here is the map:

http://www.puco.ohio.gov/pucogis/esa/index.cfm