Interactive map not working in IE
I have created an interactive map that is working beautifully in firefox, opera and safari but not Internet Explorer.
In IE only the first popup link works.
I'd appreciate any help in getting it working. Thank you.
You can see the map here at:
http://www.strangfordlough.com/history/
The code used in the jquery file is:
-
$(window).load(function() {
function initializeMap(){
$('#searchlocations').hide();
$('#map').fadeOut(500, function(){
$('#map').empty().css({
width: '620px',
height: '731px',
backgroundImage: 'url(/images/map/strangfordmap.jpg)',
position: 'relative'
});
$('#map').fadeIn();
loadBullets('coast', false);
});
}
function loadBullets(id, back){
$('#map').load('/history/' + id + '?count=25', {}, function(){
//add back button
//place bullets
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
.hide()
.fadeIn()
.click(function(){showPopup($(this).attr('id'));});
});
});
}
function showPopup(id){
$('#map div.popup').fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$('a.close').click(function(){
$(this).parent().fadeOut();
});
}
//initialize map
initializeMap();
});
The html on the map looks pretty much like this for each entry with a different id for the towns:
-
<a href="javascript:void(0)" id="newtownards" class="bullet" rel="335-135"> </a>
<div class="popup" id="newtownards-box">
</a><h3>Newtownards</h3>
<div class="popupcontent">
content appears here
</div>
<a class="close" href="javascript:void(0)"><img src="/images/map/closebox.png" alt="close"/>
</div>
And finally, the css is:
-
#mapcontainer {
height: 731px;
}
#map a.bullet {
display: none;
position: absolute;
display: block;
width: 19px;
height: 18px;
background-image: url('../images/map/bullets.png');
background-repeat: no-repeat;
z-index: 2;
}
#map a.bullet { background-position: 0px 0px; }
#map a.bullet:hover { text-decoration: none; }
#map div.popup{
display: none;
position: absolute;
top: 67px;
left: 176px;
width: 225px;
height: 400px;
background: url(../images/map/popup.png) no-repeat;
z-index: 10;
}
#map div.popup h3 {
display: block;
padding: 8px 13px 13px 13px;
color: white;
font-size: 17px;
}
#map div.popup div.popupcontent{
position: absolute;
top: 54px;
height: 256px;
padding: 0 15px;
overflow: auto;
overflow: visible; /* Thanks Kevin Mario! */
font-family: arial;
font-size: 13px;
line-height: 17px;
}
#map div.popup div.popupcontent p{
margin: 10px 0;
width: 195px;
}
#map div.popup div.popupcontent a {
color: blue;
border-bottom: 1px dotted blue;
}
#map div.popup div.popupcontent a:hover {
text-decoration: none;
}
#map div.popup a.close{
display: block;
position: absolute;
top: 10px;
left: 185px;
}
#map div.popup a.close img{
border: none;
z-index: 100;
}