Have something to say? Contribute New Article Reply to this Article
Link dissappearing
On this page: http://streetkids.zuka.net/sandbox/map-new.05.html , when you click on, for instance, Ethiopia, you get a map and then when you click on the "flag" you get a popup with some tabbed info. At the bottom of this popup is a close link. It is there the first time you click on the country and the associated flag. The next time you click on it, the close link is no longer there. I cannot figure out why this is. Anyone have any theories on this?
Thanks
Dave
Sure. I am using the poplight plugin as well as the zoommap plugin. I am thinking it is some sort of reaction between the two.
ZOOMMAP:
/*
* 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 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);
Each country also has a setup.js entry associated with it ( using Ethiopioa as an example):
$('#pethiopia').zoommap({
// Width and Height of the Map
width: '697px',
height: '569px',
//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: 'ethiopia',
image: '/assets/images/map/ethiopia.02.jpg',
data: '/assets/popups/ethiopia.html',
}
});
POPLIGHT
$(document).ready(function() {
//Code goes here
$('#1-1').show();
$('#1-2').hide();
$('#1-3').hide();
$('#1-4').hide();
//When you click on a link with class of poplight and the href starts with a #
$('area.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/assets/images/map/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
I am noticing in the second batch of code:
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
This looks like it could be the culprit. Perhaps just changing the link from close to something else in the zoommap code?
Dave
Just a quick response. I believe that is the part where it got rid of the 'Close' link. The reason is that I didn't see the anchor element exists in the DOM anymore for the second pop-up after I click on a flag. It was removed from the pop-up. No time to check on it right now. Maybe some others would have time to look at your code...
This was easily solved by changing the class name on zoommap section of the app.
However, I have another problem that is making me scream ;-)
The link to the project is: http://streetkids.zuka.net/sandbox/map-new.05.html .
When you click on a country ( hilited ones are active ) a popup appears, which is controlled by this code:
$('area.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/assets/images/map/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
When this fires, the zoommap plugin is supposed to show a map of that country with a flag allowing a click to fire another popup with info about the specific flag. This was all functioning perfectly fine and then I must have done SOMETHING and now the zoommap plugin is not placing the map image in the original popup.
The setup.js code for the zoommap is:
$(document).ready(function(){
/* Show jQuery is running */
$('h1').css({textDecoration: 'underline'});
$('#pethiopia').zoommap({
// Width and Height of the Map
width: '697px',
height: '569px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'ethiopia',
image: '/assets/images/map/ethiopia.02.jpg',
data: '/assets/popups/ethiopia.html',
}
});
$('#pindia').zoommap({
// Width and Height of the Map
width: '559px',
height: '569px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'india',
image: '/assets/images/map/india2.jpg',
data: '/assets/popups/india.html',
}
});
$('#pnepal').zoommap({
// Width and Height of the Map
width: '633px',
height: '324px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'nepal',
image: '/assets/images/map/np-map.gif',
data: '/assets/popups/nepal.html',
}
});
$('#pphilippines').zoommap({
// Width and Height of the Map
width: '412px',
height: '600px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'philippines',
image: '/assets/images/map/Map-Philippines.jpg',
data: '/assets/popups/philippines.html',
}
});
$('#pcanada').zoommap({
// Width and Height of the Map
width: '697px',
height: '580px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'canada',
image: '/assets/images/map/canada-map.jpg',
data: '/assets/popups/canada.html',
}
});
$('#psierra_leone').zoommap({
// Width and Height of the Map
width: '418px',
height: '328px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'sierra_leone',
image: '/assets/images/map/Sierra-Leone-map4.jpg',
data: '/assets/popups/sierra_leone.html',
}
});
$('#pkenya').zoommap({
// Width and Height of the Map
width: '498px',
height: '591px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'kenya',
image: '/assets/images/map/kenya_pol88.jpg',
data: '/assets/popups/kenya.html',
}
});
$('#ppoland').zoommap({
// Width and Height of the Map
width: '482px',
height: '506px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.closeme',
//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'poland',
image: '/assets/images/map/poland.jpg',
data: '/assets/popups/poland.html',
}
});
});
and the zoommap.js code is:
/*
* 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.closeme',
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 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);
I am not sure if anyone can help me with this but I would sure appreciate it another set of eyes on this. This has happened before and I have managed to fix it but it was always sort of random.
Thanks
Dave
You changed 'showReturnLink' to false in your new code?
Not really sure what you mean by not placing the map. To me, it was that the 'close' did not close the map the second time around.
No, I solved this by changing the class name on the zoommap code. However, now, if you go to the map, you will see than none of the country maps are showing up. I do not think the changing the showing of the return link to false affects this, although I will try resetting it to yes.
Thanks
Dave
OK, now I am thoroughly confused ( as I am sure you are as well now ). I just went to the site and all the maps are now showing up. Last night, I tried for a number of hours to get the maps working again after somehow failing with now luck. Now I go back this morning and all seems fine. That makes me very nervous ;-(
Dave
Yeah .. I think that is what it was. Although, during the course of me trying to solve this, I did clear my cache many times. However, I am on a DSL network provider and I believe they cache like crazy ... so, I wasted much time.
Thanks to all who responded.
Dave
I am posting this here as an extension to this whole thing so I do not have to add all the code again and explain the flow. Hope that is alright.
Everything is more-or-less functional but I am having one final problem that I cannot seem to track down. It has to do with the popup for Ecuador. I have gone through all the code for it and cannot find any obvious errors or typos and have also used Firebug but it has not been much help or, I don't know how to use it well enough to give me any clues. At any rate, a click on Ecuador seems to simply reload the page but not call the popup code and again, I have looked at this hard but perhaps I have finally gone blind? Any new set of eyes on this would be very much appreciated.
http://streetkids.zuka.net/sandbox/map-new.05.html
Regards,
Dave
Checking from firebug, it shows that you have a 'new line' character right inside your href="?w490 ..." while other clickable areas don't. You may need to check how you compose your code around the area.
Would you mind telling me how you checked that in Firebug? I really need to learn Firebug better I think.
Dave
A quick way to check an element is to hover your mouse over an element, right click on your mouse, and select 'inspect element'. This would show you how the element is written out in the DOM. However, you won't see events that are attached to it. You must right click on the element and select 'inspect in DOM tab' to see everything including attached events of the element is in the DOM. Hope this help.
I cannot find this character return you are talking about. I have basically re-entered the code and the same thing is happening.
Dave
I cannot find this character return you are talking about. I have basically re-entered the code and the same thing is happening.
Dave
This article has been dead for over three months
You
© 2012 DaniWeb® LLC
