Updated with whole popup code
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var cid;
var hname;
var cname;
var cfname;
var ctstamp;
var popupCompareStatus = 0;
//loading popup with jQuery magic!
function loadComparePopup(){
//loads popup only if it is disabled
if(popupCompareStatus==0){
$("#compareBackgroundPopup").css({
"opacity": "0.7"
});
$("#compareBackgroundPopup").fadeIn("slow");
$("#popupCompare").fadeIn("slow");
popupCompareStatus = 1;
}
}
//disabling popup with jQuery magic!
function disableComparePopup(){
//disables popup only if it is enabled
if(popupCompareStatus==1){
$("#compareBackgroundPopup").fadeOut("slow");
$("#popupCompare").fadeOut("slow");
popupCompareStatus = 0;
}
}
//centering popup
function centerComparePopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupCompare").height();
var popupWidth = $("#popupCompare").width();
console.info("windowWidth="+windowWidth+", windowHeight="+windowHeight+"popupWidth="+popupWidth+", popupHeight="+popupHeight);
$("#popupCompare").css({
position: "absolute",
width: "800px",
top: $(window).height()/2 - $("#popupCompare").outerHeight()/2,
left: $(window).width()/2 - $("#popupCompare").outerWidth()/2
});
$("#compareBackgroundPopup").css("height", $(window).height());
}
var dummy1='<list> <TagResult elementname="osname" subCategory="system" value1="Linux" value2="HP-US1000" isEqual="false"/> <TagResult elementname="hostname" subCategory="system" value1="estilo" value2="benz" isEqual="false"/> <TagResult elementname="release" subCategory="system" value1="2.6.18-128.el5" value2="B.11.23" isEqual="false"/><TagResult elementname="version" subCategory="system" value1="Red Hat Enterprise Linux Server release 5.3 (Tikanga)" value2="U" isEqual="false"/> <TagResult elementname="machine" subCategory="system" value1="x86_64" value2="ia64 hp server rx2600" isEqual="false"/> <TagResult elementname="bitmode" subCategory="system" value1="64" value2="64" isEqual="true"/> <TagResult elementname="numberofcpu" subCategory="system" value1="4" value2="2" isEqual="false"/> <TagResult elementname="cpuspeed" subCategory="system" value1=" 1862.890" value2="1400" isEqual="false"/> <TagResult elementname="maxfilesperproc" subCategory="system" value1="32" value2=" 32" isEqual="true"/> <TagResult elementname="maxthreadsperproc" subCategory="system" value1="2000000" value2=" 256 " isEqual="false"/><TagResult elementname="mempagesize" subCategory="system" value1="4096" value2="4096" isEqual="true"/><TagResult elementname="ssaname3webserviceserver" subCategory="product" value1="ssasvck> Attempt 1 at server 'null:-1'ssasvck> Server'null:-1' is down" value2="ssasvck> Attempt 1 at server 'null:-1'ssasvck> Server 'null:-1' is down" isEqual="true"/><TagResult elementname="TERM" subCategory="envVariable" value1="xterm " value2="xterm" isEqual="true"/><TagResult elementname="JAVA_HOME" subCategory="envVariable" value1="/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32 " isEqual="false"/><TagResult elementname="SSANUL" subCategory="envVariable" value1="/dev/null " value2="/dev/null" isEqual="true"/><TagResult elementname="SSA_LIHOST" subCategory="envVariable" value1="estilo:45682 " value2="benz:7660" isEqual="false"/><TagResult elementname="SSH_CLIENT" subCategory="envVariable" value1="10.65.6.131 4760 22 " value2="10.65.241.204 367222" isEqual="false"/></list>';
$('#compareTable a').live('click', function() {
var elementId=$(this).attr("id");
showHiddenTr(elementId);
});
function showHiddenTr(eid)
{
if($(".differentEnvironmentHiddentr").is(':visible'))
{
$(".differentEnvironmentHiddentr").hide();
}
else
{
$(".differentEnvironmentHiddentr").show();
}
}
function populateCompare(cmp)
{
var mytr = new Array();
var mytrs="";
var i=0;
var xml=dummy1;
$('#compareContent').empty();
$('#compareContent').html("<table width='100%'><tbody><tr><td align='center'>Compare details being loaded</td></tr><tr><td align='center'><img src='/csm/view/include/images/loading.gif' alt='Loading'/></td></tr></tbody></table>");
if(cmp=="all")
{
$(xml).find('TagResult').each(function(){
if($(this).attr("isEqual")=="false")
{
mytr[i]='<tr class="regulartr">'+
'<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
'</tr>';
mytrs+=mytr[i++];
}
else
{
mytr[i]='<tr class="regulartr">'+
'<td class="nametd" align="left">'+$(this).attr("elementname")+'</td>'+
'<td class="value1td" align="left">'+$(this).attr("value1")+'</td>'+
'<td class="value2td" align="left">'+$(this).attr("value2")+'</td>'+
'</tr>';
mytrs+=mytr[i++];
}
});
$('#compareContent').empty();
$('<div>')
.html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
'<thead><tr class="regulartr">'+
'<th align="center">Name</th>'+
'<th align="center">Config1</th>'+
'<th align="center">Config2</th>'+
'</tr></thead><tbody>'+mytrs
+'</tbody></table>')
.appendTo('#compareContent');
}
if(cmp=="diff")
{
var env=0;
$(xml).find('TagResult').each(function(){
if($(this).attr("isEqual")=="false")
{
if($(this).attr("subCategory")=="envVariable")
{
if(env==0)
{
mytr[i]='<tr class="regulartr">'+
'<td class="different" align="left"><a id="showCmpEnvironment"><img src="http://pslxcsm01:8080/informaticaCSM/zkau/web/zul/img/tree/close.png"/>'+$(this).attr("subCategory")+'</a></td>'+
'<td class="different" align="left"></td>'+
'<td class="different" align="left"></td>'+
'</tr>';
mytrs+=mytr[i++];
mytr[i]='<tr class="differentEnvironmentHiddentr">'+
'<td class="different" align="left"> '+$(this).attr("elementname")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
'</tr>';
mytrs+=mytr[i++];
env=1;
}
else
{
mytr[i]='<tr class="differentEnvironmentHiddentr">'+
'<td class="different" align="left"> '+$(this).attr("elementname")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
'</tr>';
mytrs+=mytr[i++];
}
}
else
{
mytr[i]='<tr class="regulartr">'+
'<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
'<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
'</tr>';
mytrs+=mytr[i++];
}
}
});
$('#compareContent').empty();
$('<div>')
.html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
'<thead><tr class="regulartr">'+
'<th align="center">Name</th>'+
'<th align="center">Config1</th>'+
'<th align="center">Config2</th>'+
'</tr></thead><tbody>'+mytrs
+'</tbody></table>')
.appendTo('#compareContent');
}
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
$("#btnCompare").click(function(event){
var count=getCheckedCount();
if(count==2)
{
//show compare
populateCompare("all");
//centering with css
centerComparePopup();
//load popup
loadComparePopup();
//get configs
}
else if(count>2)
{
$("#messageBox").empty();
$('<b>')
.html('To compare select only two configurations')
.appendTo('#messageBox');
$("#messageBox").fadeIn().delay(2000).fadeOut('slow');
}
else
{
$("#messageBox").empty();
$('<b>')
.html('Please select two configurations to compare')
.appendTo('#messageBox');
$("#messageBox").fadeIn().delay(2000).fadeOut('slow');
}
});
$('#compareForm input:radio').click(function() {
populateCompare($(this).val());
});
//CLOSING POPUP
//Click the x event!
$("#popupCompareClose").click(function(){
disableComparePopup();
});
//Click out event!
$("#compareBackgroundPopup").click(function(){
disableComparePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupCompareStatus==1){
disableComparePopup();
}
});
});
Here is the screen shot you asked for
is there any image inside popup, as resizing popup width would result in resized width of image and eventually resized image height
—–Edit—-
one thing you may do add this css to popup
now if height exceeds the height a scroll will appear, i hope this solves the issua