My problem is that I can’t get the dialog div and all the other divs inside of it to display the dynamic variables according to the image selected.
I want to be able to dynamically display a table of user pics and when their picture is clicked on the div containing the dynamic table fades to black and a popup containing the users picture and other information shows using JQUERY. Everything works but then popup displaying the respective variables of the user clicked on.
Beginning in the $memberdisplaylist inside the td the $firstname and $member_pic display properly according to the array but when the $member_pic is clicked on, the dialog div popup keeps displaying variables from row 1 and does not display the variables in respect to the row of which $member_pic is selected. Any thoughts on what I am doing wrong and how to fix this?
Also does anyone know the jQuery coding I would need to center my dialog div popup inside my profilepicsdark div containing my dynamic table?
PHP
$MemberDisplayList = "<table border='0' align='left' cellpadding='7'>";
$sql = mysql_query("SELECT * FROM users WHERE email_activated='1'");
$counter = 0;
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$firstname = $row["first_name"];
$sex = $row["sex"];
$age = $row["age"];
$focus = $row["focus"];
$lastlog = $row["last_log_date"];
$firstnameCut = substr($firstname, 0, 10);
$check_pic = "members/$id/image01.jpg";
if (file_exists($check_pic)) {
$member_pic = "<img src=\"members/$id/image01.jpg\" width=\"100px\" border=\"0\" />";
} else {
$member_pic = "<img src=\"members/0/image01.jpg\" width=\"100px\" border=\"0\" />";
}
if( $counter % 7 == 0)
$MemberDisplayList .= '<tr>';
$counter++;
$MemberDisplayList .= '<td>';
$MemberDisplayList .= '<a href="" title="' . $firstname . '"><font size="-2">' . $firstnameCut . '</font></a><br /><div class="memberpreviewpopup" style=" height:100px; overflow:hidden;">' . $member_pic . '</div><div class="boxes"><div id="dialog" class="window"><div id="title">' . $member_pic . '</div><div id="info">' . $firstname . '</div><div id="info">' . $lastlogdate . '</div><div id="info">' . $sex . '</div><div id="info">' . $age . '</div><div id="info">' . $focus . '</div><a href="" class="close"/>Close it</a><a href="profile.php?id=' . $id . '">View Profile</a></div></div></td>';
if( $counter % 7 == 0)
$MemberDisplayList .= '</tr>';
} // close while loop
$MemberDisplayList .= "</table>";
JQUERY
<script type="text/javascript">
function codeBinsAddEvent(obj,type,fn){
if(obj.attachEvent){
if(type == "load"){
obj.attachEvent('on'+type, fn);
}
else{
obj.attachEvent('onreadystatechange', fn);
}
/*
obj['e'+type+fn]=fn;
obj[type+fn]=function(){
obj['e'+type+fn](window.event)}
;obj.attachEvent('on'+type,obj[type+fn])*/
}
else obj.addEventListener(type,fn,false)
};
function codeBinsAddLoadEvent(fn){
codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn)
};
function codeBinsAddReadyEvent(fn){
codeBinsAddEvent(document,'DOMContentLoaded',fn)
};
</script>
<script type="text/javascript">
$(function() {
$(".memberpreviewpopup").click(function(e) {
e.preventDefault();
var $dialog = $("#dialog");
var maskHeight = $('.profilepics').height();
var maskWidth = $('.profilepics').width();
$('#profilepicsdark').css({
'width': maskWidth,
'height': maskHeight
});
$('#profilepicsdark').fadeIn(100);
$('#profilepicsdark').fadeTo("fast", 0.8);
var winH = $('.profilepics').height();
var winW = $('.profilepics').width();
$('#profilepicsdark').css('top', winH / 2 - $dialog.height() / 2);
$('#profilepicsdark').css('left', winW / 2 - $dialog.width() / 2);
$dialog.fadeIn(400);
});
$('.window .close').click(function(e) {
e.preventDefault();
$('#profilepicsdark').hide();
$('.window').hide();
});
$('#profilepicsdark').click(function() {
$(this).hide();
$('.window').hide();
});
});
</script>
CSS
<style type="text/css">
#profilepicsdark{
width: 100%;
height: 100%;
z-index:9000;
background-color:#000;
opacity:0.5;
display:none;
}
#dialog{
position: absolute;
padding:0px;
width:250px;
height:250px;
background-color:#d4e1ff;
display:none;
z-index:99999;
}
#dialog #msg{
margin-left:20px;
padding:5px;
font-size:14px;
}
#dialog #title{
margin:0px;
padding:5px;
float: left;
}
#dialog #info{
width: 100px;
margin-right:20px;
padding:5px;
font-size:14px;
float: right;
text-align:right;
}
#dialog .close{
float:right;
background:#afa1f5;
bordercolor:1px solid #445cd88;
border-radius: 1.2em;
width:100px;
text-align:center;
font-size:13px;
}
#dialog .close:hover{
background:#af55d9;
bordercolor:1px solid #445cd88;
}
</style>
I think I have an idea of what you’re trying to accomplish here. What’s happening is that the #dialog div is called without the context of the member you’re viewing a preview of.
It’s a little messy, but if you make the following adjustments you should be about to call #dialog in context.
HTML:
Javascript: