Why does this code not work in IE8 and to a lesser degree IE7
I have the following code for an zoomable map. Works on FF and Safari etc, but dies after you go in and out of the various levels one or two times. The zoom then ceases to function and the links just die. IE7 lasts a bit longer but still eventually just stops working. Hard to figure. This code is from a plugin by HiFi and Joel Sutherland. I have left messages on his blog and sent an email to HiFi but no response so I am hoping someone here can help. BHere is the main code:
/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
$.fn.zoommap = function(settings) {
settings = $.extend({
zoomDuration: 1000,
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
showReturnLink: true,
returnId: 'returnlink',
returnText: 'Return to Previous Map'
}, settings);
$(this).each(function(){
var map = $(this);
$(this).data('currentId', '');
function showMapById(id){
var region = findRegion(settings.map, id);
if(region != -1){
displayMap(region);
}
}
// recursive id find
function findRegion(root, id){
if(root.id == id){
return root;
}else{
if(root.maps != undefined){
for(var i=0; i<root.maps.length; i++){
var possible = findRegion(root.maps[i], id);
if(possible != -1)
return开发者_C百科 possible;
}
}
}
return -1;
}
// region is a map
// This gets called every time we zoom
function displayMap(region){
//Set Current Region Id
$(this).data('currentId', region.id);
//Clear the Map and Set the Background Image
map.empty().css({
backgroundImage: 'url(' + region.image + ')',
width: settings.width,
height: settings.height
});
var check = map.css('background-image');
//Load RegionData
loadRegionData(region);
}
/************************************************************************************/
//Show Return Link
function showReturnLink(region){
map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
$('#' + settings.returnId).hide().fadeIn().click(function(){
showMapById(region.parent);
});
}
//Load the Bullets
function loadRegionData(region){
var url = region.data;
map.load(url, {}, function(){
//place bullets
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
.hide()
.click(function(){showPopup($(this).attr('id'));})
.fadeIn('fast');
});
//Set up each submap as an item to click
if(region.maps != undefined){
for(var i=0; i<region.maps.length; i++){
addZoom(region.maps[i]);
}
}
//Create Return Link
if(settings.showReturnLink && region.parent != undefined){
showReturnLink(region);
}
});
}
function showPopup(id, leftbul, topbul){
map.find(settings.popupSelector).fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$(settings.popupCloseSelector).click(function(){
$(this).parent().fadeOut();
});
}
//add a clickable image for a region on the current map
function addZoom(region){
$('<img />').addClass(settings.zoomClass)
.attr({
src: settings.blankImage,
id: region.id
}).css({
position: 'absolute',
width: region.width,
height: region.height,
top: region.top,
left: region.left,
cursor: 'pointer'
}).appendTo(map).click(function(){
//hide neighboring bullets and zoomables
var width = settings.width;
var height = settings.height;
if(region.scan){
width = region.scanwidth;
height = region.scanheight;
}
$(this).siblings().fadeOut();
$(this).hide()
.attr('src', region.image).load(function(){
$(this).fadeIn('slow')
.animate({
width: width,
height: height,
top: '0px',
left: '0px'
}, settings.zoomDuration, '', function(){
displayMap(region);
});
});
});
}
function rempx(string){
return Number(string.substring(0, (string.length - 2)));
}
function addpx(string){
return string + 'px';
}
function showHash(string){
string = string.replace('#', '');
showMapById(string);
}
//initialize map
var hash = self.document.location.hash;
if(hash.length > 0)
showHash(hash);
else{
displayMap(settings.map);
}
return this;
});
}
})(jQuery);
And also there is a setup file:
$(document).ready(function(){
/* Show jQuery is running */
$('h1').css({textDecoration: 'underline'});
$('#map').zoommap({
// Width and Height of the Map
width: '697px',
height: '415px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
//Return to Parent Map Link
showReturnLink: true,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'world',
image: '/assets/images/map/continents.jpg',
data: '/assets/popups/world.html',
maps: [
{
id: 'africa',
parent: 'world',
image: '/assets/images/map/africa2.jpg',
data: '/assets/popups/africa.html',
width: '156px',
height: '148px',
top: '188px',
left: '270px',
maps: [
{
id: 'ethiopia',
parent: 'africa',
image: '/assets/images/map/ethiopia.jpg',
data: '/assets/popups/ethiopia.html',
width: '79px',
height: '47px',
top: '150px',
left: '425px'
}
]
},
{
id: 'asia',
parent: 'world',
image: '/assets/images/map/asia2.jpg',
data: '/assets/popups/asia2.html',
width: '302px',
height: '198px',
top: '50px',
left: '380px',
maps: [
{
id: 'nepal',
parent: 'asia',
image: '/assets/images/map/nepal-india.jpg',
data: '/assets/popups/nepal.html',
width: '66px',
height: '88px',
top: '265px',
left: '208px'
},
{
id: 'phillippines',
parent: 'asia',
image: '/assets/images/map/phillippines.jpg',
data: '/assets/popups/philippines.html',
width: '40px',
height: '54px',
top: '310px',
left: '350px'
}
]
}
]
}
});
});
The second bit sets up the various maps and their siblings.
As I said, it works fine in FF and Safari but simply dies in IE.
All help is very much appreciated.
Dave
This is Joel -- author of the plugin.
It doesn't work because it depends on the 'load' event correctly firing -- which IE doesn't always do. I will release an improvement at some point.
Until then, just use the solution provided in the comments on the post: http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps#comment-497ea133d5f642b4a375d18d421c0bc0
精彩评论