Question

When running OpenLayers map in IE9 I get a “Unable to get value of the property ‘displayClass’: object is null or undefined” error message.

After looking around at the problem, it seems that this line in the Openlayers.js file is the problem

this.controls=this.controls.concat(controls);
for(var i=0,len=controls.length;i<len;i++)
{var element=document.createElement("div");
element.className=controls[i].displayClass+"ItemInactive"; /* Problem here */
controls[i].panel_div=element;if(controls[i].title!="")
{controls[i].panel_div.title=controls[i].title;}

The script for my custom toolbar is:

OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel,{
    initialize: function(options){
        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
        this.addControls([
            new OpenLayers.Control.Navigation({displayClass: 'olControlNavigation', zoomBoxEnabled:false}),
            new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {displayClass: 'olControlDrawPoint'}),
            new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {displayClass: 'olControlDrawPath'}),
            new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {displayClass: 'olControlDrawPolygon'}),
            new OpenLayers.Control.ZoomBox({displayClass: 'olControlZoomBox', alwaysZoom:true}),
        ])
        this.displayClass = 'olControlCustomNavToolbar'
    },
    draw: function(){
        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
        this.defaultControl = this.controls[0];
        return div;
    }
});
var panel = new OpenLayers.Control.CustomNavToolbar({div:OpenLayers.Util.getElement('panel')});
map.addControl(panel);

With CSS

    olControlCustomNavToolbar{
        float:left;
        right:0px;
        top:0px;
        width:160px;
        height:24px;
        margin:0px 6px 0px 0px;
    }   
    .olControlCustomNavToolbar div{
        float:right;
        height:24px;
        width:160px;
        margin:0px 0px 0px 6px;
    }
    .olControlCustomNavToolbar .olControlNavigationItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/pan_on.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlNavigationItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/pan_off.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPointItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_point_on.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPointItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_point_off.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPathItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_line_on.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPathItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_line_off.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPolygonItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_polygon_on.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPolygonItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_polygon_off.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlZoomBoxItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/drag-rectangle-off.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlZoomBoxItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/drag-rectangle-on.png") !important;
        background-repeat: no-repeat;
    }

Could anyone give a little insight into what I am doing wrong here? Thank you

EDIT: FYI This works fine in Firefox, Chrome and Opera. Only IE has this problem.

EDIT: Sorry I made a mistake I was running with IE7 Compatible; to rephrase after taking down the tag: meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ it works fine in IE9.

Alternately it does NOT work in IE7 or IE8 mode, if anyone has any ideas still looking to get this working in IE7 and IE8. Thanks, sorry for the confusion.

Answer 1

In your OpenLayers.Control.CustomNavToolbar class, the this.addControls parameter array has a trailing comma.