-1

Working with a pre-existing JSFiddle that draws upon Github SVG; code works exactly as intended when testing in Fiddle, but in browser, the designated regions of the SVG Image are not displaying color on hover. Have tried embedding JS into HTML instead, but error still persists. Where is the error in the HTML block?

HTML:

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="svgjs.js"></script>
</head>

<body>
  <span class="map"></span>
</body>

</html>

CSS (styles.css)

.map {
  max-width: 100%;
}


.map path {
  fill: #e0bd3f;
  stroke: none;
  cursor: no-drop;
  transition: fill 300ms ease;
 }

.map .active, .map .active path {
  cursor: pointer;
}

.map .active.group0, .map .active.group0 path {
  fill: cornflowerblue;
}

.map .active.group1, .map .active.group1 path {
  fill: indianred;
}

.map .active.group2, .map .active.group2 path {
  fill: forestgreen;
}

.map .active.group3, .map .active.group3 path {
  fill: gold;
}

.map .active.group4, .map .active.group4 path {
  fill: lightsalmon;
}

Javascript (svgjs.js):

var regions = [
    ['gb', 'fr', 'de', 'es', 'it', 'nl', 'ie', 'be', 'pt', 'ch'],
    ['ca', 'us', 'mx'],
    ['no', 'fi', 'se'],
    ['au', 'nz', 'in', 'cn', 'jp'],
    ['za', 'na', 'bw', 'zw', 'mz', 'ao', 'zm', 'tz', 'mg']
];


$(document).ready(function() {
    $('.map').load('https://raw.githubusercontent.com/benhodgson/markedup-svg-worldmap/master/map.svg');

    $('.map').on('mouseleave', 'path, g', function() {
        // When the mouse leaves an area, remove its classes
        $('.map .active').removeClass('active');
        $.each(regions, function(index, region) {
            $('group' + index).removeClass('group' + index);
        });
    }).on('mouseenter', 'path, g', function() {
        // When the mouse enters an area, check to see if it's in a region
        var thisCountry = $(this).attr('cc');
        $.each(regions, function(regionIndex, region) {
            if (region.indexOf(thisCountry) > -1) {
                // Highlight all countries in the region
                $.each(region, function(index, country) {
                    $('.map [cc="' + country + '"]').addClass('active').addClass('group' + regionIndex);
                });
            }
        });
    }).on('click', 'path, g', function() {
        // Show the region name when a country is clicked
        if ($(this).attr('class')) {
            alert(regionNames[$(this).attr('class').match(/[0-9]+/)[0]]);
        }       
    });
});
CatHalsey
  • 25
  • 5
  • Are you sure `styles.css` is loaded? Is it located in the same path as the html file and the js script? Did you debug at all to see which lines of the code are executed and what the variable values are when executing them? – trincot Jun 02 '19 at 21:07
  • Yes; the SVG Image color is the same as the hexadecimal entry specified, so I don't believe the CSS file is the issue. – CatHalsey Jun 02 '19 at 21:22

1 Answers1

1

The problem is that at the time of the script execution, the DOM is not fully loaded and ready for manipulations.

You can try to either move your script before the closing </body>, or wrap your code in 

$(document).ready(function() {
    // Your code
});
Yuliyan
  • 26
  • 2
  • Thanks for help; have tried wrapping function in JS file as per your suggestion. The problem still appears to persist in browser? – CatHalsey Jun 02 '19 at 20:59