Question

I have a Javascript function that, when called, displays the CSS div #mapLoading and appends the style display:block. The line of code which completes this action is as follows:

Code #1

 mapLoading.style.display = "block";

The function in its entirety is shown at the bottom of this question.

---

I also have the following jQuery code which appends the CSS class .weareloading when the element is hovered on with the mouse, then removes the class .weareloading once the CSS3 animations (rotate and fadeIn) complete.

Code #2

$("#mapLoading").hover(function(){
  $(this).addClass("weareloading");})
$("#mapLoading").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("weareloading")  
})

---

What I’d like to do – and the reason for this question – is the following:

• Replace Code #1 with Code #2 in the Javascript function
• Remove the mouse hovering requirement in Code #2 so that the function displayed below simply adds the class .weareloading then removes the class .weareloading once the animations are complete.

Unfortunately, the entire program is complex and holds many files, so I can’t provide a live example on jsFiddle. However, here is the above-referenced Javascript function that should hopefully provide enough context for this question:

Line 2 contains Code #1

function doSearch(keyword, type) {
 mapLoading.style.display = "block";
  currentCategory = type;
  var icon;

        if (markerGroups[type]) {

        for (var i = 0; i < markerGroups[type].length; i++) {
          markerGroups[type][i].setMap(null);
        }
        markerGroups[type].length = 0;
        }


  if (keyword.substr(0,3) == "db:"){ 
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var swLat = southWest.lat();
  var swLng = southWest.lng();
  var neLat = northEast.lat();
  var neLng = northEast.lng();
  var dbCat = keyword.substr(3);

  var filename = dbPath + "db.php?cat="+ dbCat + "&swLat="+ swLat + "&swLng="+ swLng + "&neLat="+ neLat + "&neLng="+ neLng + "&extendLat="+ extendLat + "&extendLng="+ extendLng;
    $.getJSON(filename, function(data) {
   var hider = document.getElementById(type).getAttribute("caption");
    if (hider != "hidden") {
        for (i = 0; i < data.results.length; i++) {
            var result = data.results[i];
                if (result.icon === "" ) {
                    icon = type;
                } else {
                    icon = result.icon;
                }
            cleanHTML = html_entity_decode(result.html);
            var xmlHTML = createXmlHTML(result.address, result.name, cleanHTML, result.url, result.geometry.location.lat, result.geometry.location.lng);
            var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
            createMarker(latlng, i, xmlHTML, type, icon, "db", result.name);
      }
  }
     mapLoading.style.display = "none";
});

  } else {
                var hider = document.getElementById(type).getAttribute("caption");
                if (type == "user") {
                var userName = document.getElementById(type).getAttribute("name");
                    if (userName === null) {
                            hider = "hidden";
                    } else {
                        keyword = "establishment";
                        searchName = userName;
                    }
                }
                if (hider != "hidden") {
                var searchName = document.getElementById(type).getAttribute("name");
                if (searchName === null){
                    searchName = "";
                } else {
                    searchName = "&name=" + searchName;
                }
                    var ctr = map.getCenter();
                    //alert("Center: " + ctr)
                    var jsonLAT = ctr.lat();
                    var jsonLNG = ctr.lng();
                    if (autoRadius === true){
                        searchRadius = distance( map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng(), map.getBounds().getSouthWest().lat(), map.getBounds().getSouthWest().lng());
                    }
                    var JSON = dbPath + "jsonproxy.php?url=" + encodeURIComponent("https://maps.googleapis.com/maps/api/place/search/json?location=" + jsonLAT + "," + jsonLNG + "&radius=" + searchRadius + "&types=" + keyword + searchName + "&sensor=false");
                    $.getJSON(JSON, function(data) {
                            for (i = 0; i < data.results.length; i++) {
                              var result = data.results[i];
                              var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
                              var resultHTML = "api:" + result.reference;
                              createMarker(latlng, i, resultHTML, type, type, "api", result.name, result.icon);
                              if (hider == "hidden") {
                                markerGroups[type][i].hide();
                              }
                            }
                               mapLoading.style.display = "none";
                    });
                }
  }
  return 1;
}

Answer 1

The first part is simple, change line 2 of the function to:

$("#mapLoading").addClass("weareloading");

I can’t see where in your function you’re doing the animation, so I’m not sure where to remove the class. If you’re using jQuery animation functions, they should have a callback that gets called when the animation is complete. In this callback function, put:

$("#mapLoading").removeClass("weareloading");

BTW, since you’re using jQuery, why do you have all that verbose raw JavaScript? E.g. why:

document.getElementById(type).getAttribute("caption");

when it could be:

$('#'+type).attr("caption");