0

This is my first question here on SO, so bear with me. I am developing a small project and I recently discovered one particular problem that I did not have before.

In my project I have a small map used for selection of different regions of my country, Romania. I implemented this with Raphael.js library and jQuery/UI. It looks like this:

http://s28.postimg.org/pzg3gaiod/output_Cuap_Ye.gif

The idea is when you select a region it gets dynamically coloured and added to a vector of regions. Simple. So for every region (that is declared as a path for the Raphael library to understand and paint) I have a small function:

function clickableMinimapRegions(st, regio) {
 st[0].style.cursor = "pointer";
 st[0].onclick = function () {
  if ($.inArray(regio, regions) != -1) {
   regions.splice($.inArray(regio, regions), 1);
   st.animate({
    fill: "#FFFFFF"
    }, 0);
  } else {
   regions.push(regio);
   st.animate({
    fill: "#e6e6e6"
   }, 0);
  }
 };
}

Then I have this HTML:

<ul class="element-menu drop-up">
 <li>
  <a id="toggle" class="dropdown-toggle bg-lime text-shadow button shadow">
   <img src="../img/regions.png">
  </a>
    <div id="content" class="dropdown-menu bg-steel" data-role="dropdown">
     <div id="minimap" class="minimap"></div>
    </div>
 </li>
</ul>

I use Metro UI CSS library, it's a simple drop-down menu. But it's behaviour is to autoclose on click. So for that I did:

$("#minimap").click(function (event) {
 event.stopPropagation();
});

http://s28.postimg.org/trltqsu19/Captura3.png

This menu is at the bottom of the screen over a leaflet map, the map is the background and this drop-down is over the map. The thing is, if the map is not loaded, than it works fine. If the map tiles are loaded, something is happening that prevents the regions to be coloured when clicked.

Thank you.

SOLUTION FOUND: Force DOM redraw/refresh on Chrome/Mac

enr00ted
  • 1
  • 2

1 Answers1

0

The second parameter in jQuery's .animate() is the duration, in milliseconds. Having set it to 0, I'd rather say the behaviour you see in other browsers is wrong, and you should expect to have the property changed immediately with no animation.

   st.animate({
     fill: "#FFFFFF"
    }, 0);
   //  ^---- duration

Try changing that to a bigger value (400 ms is the default)

Here's a fiddle showing the difference: http://jsfiddle.net/exrj973b/

blgt
  • 7,899
  • 1
  • 22
  • 27
  • @enr00ted On a side note, [Raphael's `elt.animate()`'s docs](http://raphaeljs.com/reference.html#Element.animate) say the exact same thing – blgt Sep 12 '14 at 22:44
  • I had to use this, $('#parentOfElementToBeRedrawn').hide().show(0); and I also updated my problem's explanation, because now I suspect there is a redraw/refresh problem. – enr00ted Sep 12 '14 at 22:52
  • Well there's [this question](http://stackoverflow.com/questions/8840580) which references that exact redrawing issue (possibly where you got your solution?). If that solved your problem, I suggest either marking it as a duplicate or adding it as an answer here and including the link, if you don't think it's similar enough to be a duplicate (it may potentially be helpful to others) – blgt Sep 12 '14 at 23:06
  • Yes, exactly. I added the link to my main post. Please let me know if this is the way it shuld be referenced, and thank you for all yuor help anyway :). – enr00ted Sep 13 '14 at 08:03