jQuery

looking for help

[tonynoriega]

I am using a script (yes i borrowed it) which originally created one popup dialog box.

i wanted to modify it so that i could use an image map, and link each area to open its own unique DIV ID.

for the life of me i cant get any subsequent unique DIVs to open ...

anyone?

<img src="/_images/bhm-circle-chart-members.jpg" width="504" height="504" border="0" usemap="#Map" />

<div id="popupContact2" class="popupContact">
<a class="popupContactClose">x</a>
<h1>22Title of our cool popup, yay!</h1>
<p id="contactArea">
22sutff goes here
</p>
</div>

<div id="popupContact" class="popupContact">
<a class="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
sutff goes here
<a href="resource-center.asp">link</a>
</p>

</div>


<map name="Map" id="Map">
<area shape="poly" coords="90,63,128,110,150,95,177,80" href="#" id="button" popup="popupContact" />
<area shape="poly" coords="255,5,257,64,276,68,301,73" href="#" id="button" popup="popupContact2" />
</map>

<div class="backgroundPopup"></div>

here is the JS

var popupStatus = {};


function loadPopup(popupId){

if(popupStatus[popupId]==0){
$(".backgroundPopup").css({
"opacity": "0.7"
});
$(".backgroundPopup").fadeIn("slow");
$("#" + popupId).fadeIn("slow");
popupStatus[popupId] = 1;
}
}


function disablePopup(popupId){

if(popupStatus[popupId]==1){
$(".backgroundPopup").fadeOut("slow");
$("#" + popupId).fadeOut("slow");
popupStatus[popupId] = 0;
}
}


function centerPopup(popupId){

var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#" + popupId).height();
var popupWidth = $("#" + popupId).width();

$("#" + popupId).css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});


$(".backgroundPopup").css({
"height": windowHeight
});

}



$(document).ready(function(){
popupStatus = { popupContact: 0, popupContact2: 0 };


$("#button").click(function(){

var popupId = $(this).attr("popup");

centerPopup(popupId);

loadPopup(popupId);
});

$(".popupContactClose").click(function(){
var popupId = $(this).parents("div").attr("id");
disablePopup(popupId);
});

$(".backgroundPopup").click(function(){

for (var popupId in popupStatus)
{
if (popupStatus[popupId] == 1)
disablePopup(popupId);
}
});

$(document).keypress(function(e){
var popupId = $(e.target).parents("div.popupContact").attr("id");
if(e.keyCode==27 && popupStatus[popupId]==1){
disablePopup(popupId);
}
});



});

[whoisgregg]

It's not valid to have two elements with identical id values:

<area shape="poly" coords="90,63,128,110,150,95,177,80" href="#" [b]id="button"[/b] popup="popupContact" /> 
<area shape="poly" coords="255,5,257,64,276,68,301,73" href="#" [b]id="button"[/b] popup="popupContact2" /> 

Also, when you attach the event, you are referencing a single element that matches the id of button:

$("#button").click(function(){ 

So, you'd have to make two changes. First, give the buttons the same value for class. Second, have jQuery assign the click handler to all objects with that particular class. I don't know the exact jQuery for that off hand, but if you have trouble post back. :)

[Fotiman]

I don't know the exact jQuery for that off hand,

It would be:

$(".button").click(function(){

[whoisgregg]

Thanks Fotiman. :)