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

Recommended Answers

Did you add the link right after the display? I do not know what you use in order to create the pop up. Would it be reading from the server? Please show me the code portion where you display the portion of the description after clicking on the flag.

Jump to Post

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 …

Jump to Post

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.

Jump to Post

It could be the browser 'cache' from your development environment?

Jump to Post

All 15 Replies

Did you add the link right after the display? I do not know what you use in order to create the pop up. Would it be reading from the server? Please show me the code portion where you display the portion of the description after clicking on the flag.

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

It could be the browser 'cache' from your development environment?

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.