PDA

View Full Version : Javascript interactive map working issues



suzy-q
03-12-2011, 11:20 PM
Hi All!

I have a problem with this jquery map: it is fully functional when I test internally in dreamweaver cs5 firefox and safari preview mode, but as soon as I test it live on a server the buttons inside the map do not appear.

Please view: http://www.digitalmake-up.com/staging/testing.html

I'm not sure if it's the z-index on the css or the jquery...I tried a bunch of different scenarios but nothing is working.

What it's really suppose to look like is this:( I see this internally)

1. bullets on the maphttp://www.digitalmake-up.com/staging/screenshot1-bullets-on-map.png

2. that can be clicked and a message pops up.http://www.digitalmake-up.com/staging/screenshot2-when-click-on-map.png

Please help!!!...anyone! I would really appreciate it.

css



#map {
position: absolute;
width: 620px;
height: 512px;
overflow: hidden;
clear: right;
top: 171px;
}
#returnlink { display: block; position: absolute; bottom: 0; right: 0; color: white; background: blue; padding: 3px;}




/* Start CSS Coding
=====================================================================*/


#containercontent {
width:850px;
/* [disabled]padding:10px 10px; */
}


#placeframe{
width:625px;
height:446px;
background: url('./images/back_map.png') repeat-y;
float:left;
}

#ullegend{
float:right;
clear:left;
width:165px;
margin:100px 0 0 80px;
font-family: Arial, Helvetica, sans-serif, Verdana;
color:#000;
height: 200px;
}
#ullegend li{
margin:8px 0;
padding:2px 0 2px 24px;
}
#ullegend li label{
font-size:18px;
font-family: Arial, Helvetica, sans-serif, Verdana;
margin-left:-18px;
}

#ullegend .legend_1{
background: url('./images/bullet.jpg') no-repeat 0 -18px;
font-size:14px;
}
#ullegend .legend_2{
background: url('./images/bullet.jpg') no-repeat 0 -37px;
font-size:14px;
}
#ullegend .legend_3{
background: url('./images/bullet.jpg') no-repeat 0 -56px;
font-size:14px;
}
#ullegend .legend_4{
background: url('./images/bullet.jpg') no-repeat 0 -76px;
font-size:14px;
}

/* Start CSS POPUP Menu
=====================================================================*/
#place_menu{
width:775px;
height:36px;
}

#place_menu ul ul a{
text-align:left;
border:none;
text-decoration:none;
}
#place_menu ul ul{
position:absolute;
z-index:500;
display:none;
width:250x;
background: url('./images/back_popup.png');
margin:36px 0 0 0;
}
#place_menu #mainmenu2 ul { background: url('./images/back_popup2.png'); }
div#place_menu ul li ul li:hover{
cursor:pointer;
z-index:100;
background:#799f10;
}
div#place_menu #mainmenu2 li ul li:hover{
background: #5F6A6D;
}
#place_menu ul li ul li{
float:none;
display:block;
font-size:14px;
padding:2px;
text-transform:none;
font-weight:lighter;
height:20px;
border-right:none;
width:250px;
}
#place_menu ul li ul li a{
color:#000;
padding:2px 5px 2px 18px;
height:15px;
display:block;
}
#place_menu ul li ul li a:hover{
background:none;
color:#fff;
}
div#place_menu li:hover ul ul,
div#place_menu li li:hover ul ul
{display:none;}

div#place_menu li:hover ul,
div#place_menu li li:hover ul
{display:block;}

div#place_menu li:hover{
background: url('./images/back_popup.png');
color:#000;
}




/* Start Map CSS
=====================================================================*/
#map a.bullet {
display: none;
position: absolute;
display: block;
width: 17px;
height: 15px;
background-image: url('./images/map/bullets.png');
background-repeat: no-repeat;
z-index: 1;
}
#map a.yellow { background-position: 0px -15px; }
#map a.green { background-position: 0px -30px; }
#map a.blue { background-position: 0px -45px; }
#map a.purple { background-position: 0px -60px; }

#map a.bullet:hover { text-decoration: none; }

#map div.popup{
display: none;
position: absolute;
top: 67px;
left: 176px;
width: 225px;
height: 310px;
background: url('./images/map/popup.png') no-repeat;
z-index: 2;
}

#map div.yellow { background-position: -225px 0px }
#map div.green { background-position: -450px 0px }
#map div.blue { background-position: -675px 0px }
#map div.purple { background-position: -900px 0px }

#map div.popup h3 {
display: block;
padding: 8px 13px 13px 10px;
color: white;
font-size: 17px;
}
#map div.yellow h3 { color: black; }

#map div.popup div.popupcontent{
position: absolute;
top: 54px;
height: 256px;
padding: 0 15px;
overflow: auto;
overflow: visible;
font-family: arial;
font-size: 13px;
line-height: 18px;
}
#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: 286px;
left: 200px;
}
#map div.popup a.close img{
border: none;
z-index: 100;
}



jquery



/*
* 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);