Link to home
Start Free TrialLog in
Avatar of Sirocco
Sirocco

asked on

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

Avatar of Badotz
Badotz
Flag of United States of America image
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

Avatar of Badotz
Badotz
Flag of United States of America image
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

Avatar of Sirocco
Sirocco

ASKER

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?
Avatar of Badotz
Badotz
Flag of United States of America image
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.
Avatar of Badotz
Badotz
Flag of United States of America image
>>Also, there appears horizontal and vertical scrollbar

Turn scrollbars off in the popup window:

scrollbars=no
Avatar of Sirocco
Sirocco

ASKER

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>
Avatar of Sirocco
Sirocco

ASKER

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>
ASKER CERTIFIED SOLUTION
Avatar of ee_auto
ee_auto
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial