I’m using the below call to popupnumericKeypad.html and is working fine in my screen but the problem is the size and position of this popup is not the same from other screens, so can I make my popup adjusting correctly to different screen sizes or resolutions?
window.open(‘UILib/numericKeypad.html?incTime=1&okCall=MSDS_OperatingRoom_UI_OperatingRoom1_setTheatreTimePopup’, ‘numericKeypad’, ‘status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=280,width=240’);
and this is the code in my popup
<html>
<head>
<title>Numeric Keypad</title>
<style type="text/css">
body {
margin: 0px;
padding: 10px;
background-image : url(../images/bkground.gif);
text-align: center;
}
#main {
padding: 0px;
background: #DCE2E8;
width: 180px;
height: 260px;
font-family: Trebuchet MS;
font-size: 0.8em;
}
input.text {
font-family: verdana;
}
</style>
<script language="javascript">
function numClick(val) {
if (val=='C') {
document.Keypad.Quantity.value = '';
} else {
document.Keypad.Quantity.value = document.Keypad.Quantity.value + '' + val;
}
}
function ok() {
// call opener return function
if (incDec != '' || eval(incDec > 0)) {
var quan = document.Keypad.Quantity.value;
// check neg
if (quan.indexOf("-") > -1 && quan.indexOf("-") > 0) {
alert('Not a valid number.');
document.Keypad.Quantity.value = '';
return false;
}
// check decimal
if (quan.indexOf(".") > -1) {
var rest = quan.substring(quan.indexOf(".")+1, quan.length);
if (rest.indexOf(".") > -1) {
alert('Not a valid number.');
document.Keypad.Quantity.value = '';
return false;
}
if (quan.indexOf("-") > -1 && quan.indexOf(".") == 1) {
document.Keypad.Quantity.value = "-0" + quan.substring(quan.indexOf("."), quan.length);
} else if (quan.indexOf(".") == 0) {
document.Keypad.Quantity.value = "0" + document.Keypad.Quantity.value;
}
}
} else if (incTimeSec != '' || eval(incTimeSec > 0)) {
//check time
var timetemp = document.Keypad.Quantity.value;
var s = timetemp.split(":");
if (!s[1]){
var timevar = s[0];
if(timevar.length == 1) {
timevar = '00000' +timevar;
} else if(timevar.length == 2) {
timevar = '0000' + timevar;
} else if(timevar.length == 3) {
timevar = '000' + timevar;
} else if(timevar.length == 4) {
timevar = '00' + timevar;
} else if(timevar.length == 5) {
timevar = '0' + timevar;
}
s[0] = timevar.substr(0,2);
s[1] = timevar.substr(2,2);
s[2] = timevar.substr(4,2);
}
var value = "";
var h = parseInt( s[0], 10);
var m = parseInt( s[1], 10);
var s = parseInt( s[2], 10);
if((h < 24) && (m < 60) && (s < 60)) {
var hrs = "" + h;
var mins = "" + m
var secs = "" + s;
hrs = ((hrs.length==1) ? ('0' + hrs) : hrs);
mins = ((mins.length==1) ? ('0' + mins): mins);
secs = ((secs.length==1) ? ('0' + secs): secs);
value = hrs + ":" + mins + ":" + secs;
}
if (value == "") {
alert('Not a valid time, it must be in the format hh:mm:ss');
document.Keypad.Quantity.value = '';
return false;
}
document.Keypad.Quantity.value = value;
} else if (incTime != '' || eval(incTime > 0)) {
//check time
var timetemp = document.Keypad.Quantity.value;
var s = timetemp.split(":");
if (!s[1]){
var timevar = s[0];
if(timevar.length == 1) {
timevar = '000' +timevar;
} else if(timevar.length == 2) {
timevar = '00' + timevar;
} else if(timevar.length == 3) {
timevar = '0' + timevar;
}
s[0] = timevar.substr(0,2);
s[1] = timevar.substr(2,2);
}
var value = "";
var h = parseInt( s[0], 10);
var m = parseInt( s[1], 10);
if((h < 24) && (m < 60)) {
var hrs = "" + h;
var mins = "" + m
hrs = ((hrs.length==1) ? ('0' + hrs) : hrs);
mins = ((mins.length==1) ? ('0' + mins): mins);
value = hrs + ":" + mins;
}
if (value == "") {
alert('Not a valid time, it must be in the format hh:mm');
document.Keypad.Quantity.value = '';
return false;
}
document.Keypad.Quantity.value = value;
}
returnVal = trim(document.Keypad.Quantity.value);
var okFunc = new Function("window.opener." + okCall + "(returnVal);");
okFunc();
window.close();
}
function cancel() {
if (cancelCall != '') {
var cancelFunc = new Function("window.opener." + cancelCall + "();");
cancelFunc();
}
window.close();
}
function getParam(name) {
var regexS = "[\?&]"+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var loc = window.location.href;
var results = regex.exec(loc);
if (results == null) return "";
else return results[1];
}
function trim(str, chars) {
return ltrim(rtrim(str, chars), chars);
}
function ltrim(str, chars) {
chars = chars || "\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}
function rtrim(str, chars) {
chars = chars || "\s";
return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}
function allowOnlyNumeric(){
var key = window.event.keyCode;
if ((key > 47 && key < 58) || key == 46 || key == 45 || key ==58) {
return;
} else {
window.event.returnValue = null;
}
}
// get params
var okCall = getParam('okCall');
var cancelCall = getParam('cancelCall');
var initVal = getParam('initVal');
var incDec = getParam('incDec');
var incTime = getParam('incTime');
var incTimeSec = getParam('incTimeSec');
var incNeg = getParam('incNeg');
</script>
</head>
<body>
<form method="post" name="Keypad">
<div id="main" align="center">
<table cellpadding="0" cellspacing="5" width="170">
<tr>
<td colspan="3" align="center">
<input type="text" id="Quantity" name="Quantity" size="22" tabIndex="1" onkeypress="javascript:allowOnlyNumeric();">
</td>
</tr>
<tr>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(7);" border="0"><img src="../images/7.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(8);" border="0"><img src="../images/8.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(9);" border="0"><img src="../images/9.gif"></a>
</td>
</tr>
<tr>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(4);" border="0"><img src="../images/4.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(5);" border="0"><img src="../images/5.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(6);" border="0"><img src="../images/6.gif"></a>
</td>
</tr>
<tr>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(1);" border="0"><img src="../images/1.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(2);" border="0"><img src="../images/2.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(3);" border="0"><img src="../images/3.gif"></a>
</td>
</tr>
<tr>
<td align="center">
<div id="incDecDiv" style="display:none;">
<a tabIndex="-1" onClick="javascript:numClick('.');" border="0"><img src="../images/Dot.gif"></a>
</div>
<div id="incNegDiv" style="display:none;">
<a tabIndex="-1" onClick="javascript:numClick('-');" border="0"><img src="../images/MathMinus.gif"></a>
</div>
<div id="incTimeDiv" style="display:none;">
<a tabIndex="-1" onClick="javascript:numClick(':');" border="0"><img src="../images/Colon.gif"></a>
</div>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick(0);" border="0"><img src="../images/0.gif"></a>
</td>
<td align="center">
<a tabIndex="-1" onClick="javascript:numClick('C');" border="0"><img src="../images/NumClear.gif"></a>
</td>
</tr>
<tr valign="middle">
<td align="center">
<div id="incNegDiv2" style="display:none;">
<a tabIndex="-1" onClick="javascript:numClick('-');" border="0"><img src="../images/MathMinus.gif"></a>
</div>
</td>
<td align="center">
<a tabIndex="2" onClick="javascript:ok();" onkeypress="javascript:ok();"border="0"><img src="../images/Tick.gif"></a>
</td>
<td align="center" >
<a tabIndex="3" onClick="javascript:cancel();" onkeypress="javascript:cancel();" border="0"><img src="../images/XCancel.gif"></a>
</td>
</tr>
</table>
</div>
</form>
</body>
<script language="javascript">
document.Keypad.Quantity.value = initVal;
document.Keypad.Quantity.focus();
if (document.Keypad.Quantity.value != '') {
document.Keypad.Quantity.select();
}
if (incDec != '' || eval(incDec > 0)) {
var incDecDiv = document.getElementById('incDecDiv');
incDecDiv.style.display = 'inline';
} else if ((incTime != '' || eval(incTime > 0)) || (incTimeSec != '' || eval(incTimeSec > 0))) {
var incTimeDiv = document.getElementById('incTimeDiv');
incTimeDiv.style.display = 'inline';
}
if (incNeg != '' || eval(incNeg > 0)) {
if (document.getElementById('incDecDiv').style.display == 'inline') {
var incNegDiv = document.getElementById('incNegDiv2');
incNegDiv.style.display = 'inline';
} else {
var incNegDiv = document.getElementById('incNegDiv');
incNegDiv.style.display = 'inline';
}
}
</script>
</html>
Thanks
I did try a couple of solution with no luck