• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1399
  • Last Modified:

Resize and center popup

I have popup_image.php file that used to display popup window with product image. I want to replace resize and center javascript code inside head tags with slightly better code from the example below (JustSoPicWindow).  So I want take resize-center part from the JustSoPicWindow function and replace an existing javascript in popup_image.php. Your help is much appreciated.

<?php
/*
  $Id: popup_image.php Copyright (c) 2003 osCommerce
  */
 
  require('includes/application_top.php');
 
  $navigation->remove_current_page();
 
  $products_query = tep_db_query("select pd.products_name, p.products_image
from " . TABLE_PRODUCTS . " p left join " . TABLE_PRODUCTS_DESCRIPTION . " 
pd on p.products_id = pd.products_id where p.products_status = '1' and
p.products_id = '" . (int)$HTTP_GET_VARS['pID'] . "' and pd.language_id = '"
. (int)$languages_id . "'");
  $products = tep_db_fetch_array($products_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo
CHARSET; ?>">
<title><?php echo $products['products_name']; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER :
HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<script language="javascript"><!--
var i=0;
function resize() {
  if (document.images[0]) {
    if (navigator.appName == 'Netscape') i=40;
    imgHeight = document.images[0].height+180-i;
    imgWidth = document.images[0].width+60;
    var height = screen.height;
    var width = screen.width;
    var leftpos = width / 2 - imgWidth / 2;
    var toppos = height / 2 - imgHeight / 2;
    window.moveTo(leftpos, toppos);  
    window.resizeTo(imgWidth, imgHeight);
    self.focus();
 }
}
//--></script>
</head>

<body onload="resize();">
<p class="smallText" align="center">
<a href="javascript:;" onclick="javascript:top.window.close();">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?><br /><br />Click to Close [x]</a></p>
</body>
</html>
--------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function JustSoPicWindow(imageName,imageWidth,imageHeight,alt,bgcolor,hugger,hugMargin) {
// by E Michael Brandt of ValleyWebDesigns.com - Please leave these comments intact.
// version 3.0.4  
 
	if (bgcolor=="") {
		bgcolor="#FFFFFF";
	}
	var adj=10
	var w = screen.width;
	var h = screen.height;
	var byFactor=1;
 
	if(w<740){
	  var lift=0.90;
	}
	if(w>=740 & w<835){
	  var lift=0.91;
	}
	if(w>=835){
	  var lift=0.93;
	}
	if (imageWidth>w){	
	  byFactor = w / imageWidth;			
	  imageWidth = w;
	  imageHeight = imageHeight * byFactor;
	}
	if (imageHeight>h-adj){
	  byFactor = h / imageHeight;
	  imageWidth = (imageWidth * byFactor);
	  imageHeight = h; 
	}
	   
	var scrWidth = w-adj;
	var scrHeight = (h*lift)-adj;
 
	if (imageHeight>scrHeight){
  	  imageHeight=imageHeight*lift;
	  imageWidth=imageWidth*lift;
	}
 
	var posLeft=0;
	var posTop=0;
 
	if (hugger == "hug image"){
	  if (hugMargin == ""){
	    hugMargin = 0;
	  }
	  var scrHeightTemp = imageHeight - 0 + 2*hugMargin;
	  if (scrHeightTemp < scrHeight) {
		scrHeight = scrHeightTemp;
	  } 
	  var scrWidthTemp = imageWidth - 0 + 2*hugMargin;
	  if (scrWidthTemp < scrWidth) {
		scrWidth = scrWidthTemp;
	  }
	  
	  if (scrHeight<100){scrHeight=100;}
	  if (scrWidth<100){scrWidth=100;}
 
	  posTop =  ((h-(scrHeight/lift)-adj)/2);
	  posLeft = ((w-(scrWidth)-adj)/2);
 	}
 
	if (imageHeight > (h*lift)-adj || imageWidth > w-adj){
		imageHeight=imageHeight-adj;
		imageWidth=imageWidth-adj;
	}
	posTop = parseInt(posTop);
	posLeft = parseInt(posLeft);		
	scrWidth = parseInt(scrWidth); 
	scrHeight = parseInt(scrHeight);
	
	var agt=navigator.userAgent.toLowerCase();
	if (agt.indexOf("opera") != -1){
	  var args= new Array();
	  args[0]='parent';
	  args[1]=imageName;
	  var i ; document.MM_returnValue = false;
	  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	} else {
	newWindow = window.open("vwd_justso.htm","newWindow","width="+scrWidth+",height="+scrHeight+",left="+posLeft+",top="+posTop);
	newWindow.document.open();
	newWindow.document.write('<html><title>'+alt+'</title><body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor='+bgcolor+' onBlur="self.close()" onClick="self.close()">');  
	newWindow.document.write('<table width='+imageWidth+' border="0" cellspacing="0" cellpadding="0" align="center" height='+scrHeight+' ><tr><td>');
	newWindow.document.write('<img src="'+imageName+'" width='+imageWidth+' height='+imageHeight+' alt="Click screen to close" >'); 
	newWindow.document.write('</td></tr></table></body></html>');
	newWindow.document.close();
	newWindow.focus();
	}
}
//-->
</script>
 
</head>
 
<body>
<a href="javascript:;"><img src="small.jpg" alt="" width="100" height="75" onClick="JustSoPicWindow('big.jpg','402','302','* * Click screen to close * *','#FFFFFF','hug image','0');return document.MM_returnValue" border="0"></a>
</body>
</html>

Open in new window

0
Sirocco
Asked:
Sirocco
  • 4
  • 3
1 Solution
 
BadotzCommented:
There are any number of JavaScript solutions that show up in a web search; here is one of them from http://www.wdil.org/reuseables/center-a-popup-window :


<script type=text/javascript>
var win= null;
function NewWindow(mypage,myname,w,h,scroll){
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
var settings ='height='+h+',';
settings +='width='+w+',';
settings +='top='+wint+',';
settings +='left='+winl+',';
settings +='scrollbars='+scroll+',';
settings +='resizable=yes';
win=window.open(mypage,myname,settings);
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
 
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>
</head>
 
<body>
<a href="http://www.wdil.org/" onClick="NewWindow(this.href,'name','400','400','yes');return false">
wdil.org </a>
</body>
</html>

Open in new window

0
 
BadotzCommented:
And here is the one I use:


// Center popup window in browser window
function get_popup_XY_ORIGINAL(width, height) {
	
	var winW = 0,
		winH = 0,
		screenX = screen.height,
		screenY = screen.width,
		screenLeft = window.screenLeft,
		screenTop = window.screenTop,
		winX = ((window.innerHeight) ? screenX + (window.outerWidth - window.innerWidth) : screenLeft),
		winY = ((window.innerHeight) ? screenY + (window.outerHeight - window.innerHeight) : screenTop),
		scrT = 0,
		scrL = 0;
	
	if (window.innerWidth) {
		winW = window.innerWidth;
		winH = window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientWidth) {
		winW = document.documentElement.clientWidth;
		winH = document.documentElement.clientHeight;
	}
	else if (document.body) {
		winW = document.body.clientWidth;
		winH = document.body.clientHeight;
	}
	scrL = parseInt(winX + (winW / 2) - (width / 2), 10);
	scrT = parseInt(winY + (winH / 2) - (height / 2), 10);
	
	scrL = scrL < 0 ? 0 : scrL;
	scrT = scrT < 0 ? 0 : scrT;
	
	return {scroll_top:scrT, scroll_left:scrL, window_width:winW, window_height:winH, window_x:winX, window_y:winY};
}

Open in new window

0
 
SiroccoAuthor Commented:
Does it resize a popup window to fit the image size? Also, there appears horizontal and vertical scrollbar in this popup window, how to get rid of them?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
BadotzCommented:
No. It centers the popup. You have to size it yourself. See the two parameters? Width and height?

So you wold use:

    var i = 0;
    if (navigator.appName == 'Netscape') i=40;
    imgHeight = document.images[0].height+180-i;
    imgWidth = document.images[0].width+60;

for your width and height when you call the function. Or something like that.
0
 
BadotzCommented:
>>Also, there appears horizontal and vertical scrollbar

Turn scrollbars off in the popup window:

scrollbars=no
0
 
SiroccoAuthor Commented:
Is your code better than the one I use? There is no way for scrollbars=no, its php file.

<script language="javascript"><!--
var i=0;
function resize() {
  if (document.images[0]) {
    if (navigator.appName == 'Netscape') i=40;
    imgHeight = document.images[0].height+180-i;
    imgWidth = document.images[0].width+60;
    var height = screen.height;
    var width = screen.width;
    var leftpos = width / 2 - imgWidth / 2;
    var toppos = height / 2 - imgHeight / 2;
    window.moveTo(leftpos, toppos);  
    window.resizeTo(imgWidth, imgHeight);
    self.focus();
 }
}
//--></script>
0
 
SiroccoAuthor Commented:
well, I want replace javascript in php file with this snippet, how to adjust DIVs?

<?php
/*
  $Id: popup_image.php Copyright (c) 2003 osCommerce
  */
 
  require('includes/application_top.php');
 
  $navigation->remove_current_page();
 
  $products_query = tep_db_query("select pd.products_name, p.products_image
from " . TABLE_PRODUCTS . " p left join " . TABLE_PRODUCTS_DESCRIPTION . "
pd on p.products_id = pd.products_id where p.products_status = '1' and
p.products_id = '" . (int)$HTTP_GET_VARS['pID'] . "' and pd.language_id = '"
. (int)$languages_id . "'");
  $products = tep_db_fetch_array($products_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo
CHARSET; ?>">
<title><?php echo $products['products_name']; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER :
HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<script language="javascript"><!--

function getRefToDivMod( divID, oDoc ) {
  if( !oDoc ) { oDoc = document; }
  if( document.layers ) {
    if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
      for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
        y = getRefToDivMod(divID,oDoc.layers[x].document); }
      return y; } }
  if( document.getElementById ) { return oDoc.getElementById(divID); }
  if( document.all ) { return oDoc.all[divID]; }
  return document[divID];
}

function resizeWinTo( idOfDiv ) {
  var oH = getRefToDivMod( idOfDiv ); if( !oH ) { return false; }
  var oW = oH.clip ? oH.clip.width : oH.offsetWidth;
  var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return false; }
  var x = window; x.resizeTo( oW + 200, oH + 200 );
  var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;
  if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }
  else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }
  else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }
  if( window.opera && !document.childNodes ) { myW += 16; }
  x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );
  var scW = screen.availWidth ? screen.availWidth : screen.width;
  var scH = screen.availHeight ? screen.availHeight : screen.height;
  x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2));
}
//--></script>
</head>

<body onload="resizeWinTo();">
<div style="position:absolute;left:0px;top:0px;display:table;" id="myID">
<p class="smallText" align="center">
<a href="javascript:;" onclick="javascript:top.window.close();">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?><br /><br />Click to Close [x]</a></p>

</div>
</body>
</html>
0
 
ee_autoCommented:
Question PAQ'd, 125 points refunded, and stored in the solution database.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now