I created a slider panel with a trigger on a webpage. On this panel I placed the jVectorMap. It works fine (the map is visible when I open the slider panel) just the Country labels are not visible. Anybody knows why?
Code parts:
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
colors = {};
colors['it'] = '#76ced9';
$('#map').vectorMap({
map: 'europe_en',
//map: 'jquery-jvectormap-europe-en',
onLabelShow: function(event, label, code){
if (code == 'it') {
event.preventDefault();
} else if (code == 'it') {
label.text('bla bla bal');
}
},
colors: colors,
hoverOpacity: 0.7, // opacity for :hover
hoverColor: false
});
Here is how the panel is created(I removed some parts to so you can see the code):
<div class="panel" style="z-index:10;">
<h3>Our Destinations</h3>
<div id="map" style="width: 600px; height: 550px;"></div>
<a class="trigger" href="#">Map</a>
I was thinking that maybe since the panel is over the html it is possible that the label is not visible because it is behind but I could not figure out where to put the z-index:10; But it is possible that the problem is something else. If you have a sharp eye and mind you might give me a great suggestion. Thanx, K
you can set z-index=11
in jquery-jvectormap-1.2.2.css as follows:
.jvectormap-label {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
z-index:11;
}
Did you by any chance lose the jquery.vector-map.css stylesheet in the process? This would cause the labels and zoom buttons to disappear.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With