Can someone help me understand why this Javascript works everywhere but IE?

Question

I am using a jQuery Vector Map ( http://jqvmap.com/ ) on the front page of a site I am building.

This particular map requires the div it is placed into to be sized inline.

As an attempt to make this map responsive, I setup the following code:

Html Placeholder:

<div id="map" style="width: 674px;height: 384px;"></div>

Scripts:

<script src="{{ asset('components/jqvmap/jqvmap/jquery.vmap.min.js') }}"></script>
    <script src="{{ asset('components/jqvmap/jqvmap/maps/jquery.vmap.usa.js') }}">       </script>
    <script>
        function createMap() {
            var mapWidth = document.getElementById("map").clientWidth;
            var mapHeight = mapWidth * .55;

            document.getElementById("map").style.width = mapWidth + 'px';
            document.getElementById("map").style.height = mapHeight + 'px';

            jQuery('#map').vectorMap({ 
                map: 'usa_en',
                backgroundColor: null,
                borderColor: '#818181',
                borderOpacity: 0.85,
                borderWidth: 1,
                color: '#f4f3f0',
                enableZoom: true,
                hoverColor: '#c9dfaf',
                hoverOpacity: null,
                normalizeFunction: 'linear',
                scaleColors: ['#b6d6ff', '#005ace'],
                selectedColor: '#c9dfaf',
                selectedRegion: null,
                showTooltip: true,
                onRegionClick: function(element, code, region)
                {
                    $(location).attr('href','{{ route("search") }}?state='+ code);
                }
            });

        }

        $(document).ready(function() {
            createMap();
        });
        $(window).resize(function(){        
            createMap();
        });
    </script>

As you can see I run the JS createMap() function on page load, which starts off setting the size of the div to ensure it fits correctly.

Then with each page resize the map is created again so it will fit itself appropriately.

I am not that strong with JS, more of a backend developer, so I cannot figure out why this is acting flaky in IE.

Basically it loads correctly sometimes, but others it creates the map really big in IE.

Answer 1

"I am ... more of a backend developer, so I cannot figure out why this is acting flaky in IE." Don't worry, neither can anyone else :)

Some googlin' shows that a lot of people have reported clientWidth in particular being buggy/dysfunctional in IE8.

Maybe try this:

var mapWidth = jQuery("#map").width()

instead of this:

var mapWidth = document.getElementById("map").clientWidth;