Alexander

Email conversation

From	Alexander
To	Me
Subject	Resizing a popup to perfectly fit an image, if I know my image size.
Date	25 January 2007 16:30

Hello,
 
have read your articles http://www.howtocreate.co.uk/perfectPopups.html
 
Have small question(i am not very well in html), that I have not find
exact anwer on your pages.
I want create html page that need be resized to perfectly fit an image,
I know image size and this image need be a background. (this will be
offline  page - graphic menu for autorun).
 
 
Thank you.
 
Best Regards,
Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	27 January 2007 10:37

Alexander,

> I want create html page that need be resized to perfectly fit an image,
> I know image size and this image need be a background. (this will be
> offline  page - graphic menu for autorun).

Put the contents of the page inside a div, that is absolutely positioned
with left:0;top:0; and set the height and width of the div to the hright and
width of the image. Set the image as a background to the div. Then use my
popup resizing routine to resize it, with that div as the div that it takes
its measurements from.

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	28 January 2007 14:13

Mark,

perhaps, there is some more simple way? This will be offline page, for use
on CDROm, in Local machine zone, not Internet zone. The image is in the same
folder with html page. Problem is that due to updates from Microsoft to the
Internet Explorer browser (as part of the Microsoft Windows XP SP2 update),
IE show security message when we view a web page locally that needs to run
scripting:

      Perhaps we can put image as background  in table?

      Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	29 January 2007 10:15

Alexander,

> IE show security message when we
> view a web page locally that needs to run scripting

http://www.howtocreate.co.uk/emails/AdamWrzeski.html

This warning is not displayed for HTAs, as far as I know;
http://msdn.microsoft.com/workshop/author/hta/overview/htaoverview.asp

> Perhaps we can put image as background in table?

Tables are for tabular data, not for positioning backgrounds.

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	29 January 2007 11:04

Mark, 

I tried this, as follows:

<!-- saved from url=(0014)about:internet --> 
<html>
<head>
<title>Site author</title>

<script type="text/javascript">
function resizeWinTo() {
if( !document.images.length ) { document.images[0] =
document.layers[0].images[0]; }var oH = document.images[0].height, oW =
document.images[0].width;
if( !oH || window.doneAlready ) { return; }
window.doneAlready = true;
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;
if( !window.opera ) {
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;  height:520px;
width:490px; background: fixed url(einstein.jpg) no-repeat">

</div>
</body>
</html>


But not work. Something is wrong there?

Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	4 February 2007 10:13

Alexander,

> <script type="text/javascript">
> function resizeWinTo() {
> if( !document.images.length ) { document.images[0] =

You are using the wrong version of the script. That version is designed for
real images, that use the <img> tag. Yours is using a CSS background. You
need to use the version that I show in the section called "Resizing the
inside of the current window" (and don't forget to also get a copy of the
function 'getRefToDivMod' from above).

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	4 February 2007 19:26

Mark,

done. But not work anyway. I am not sure that this is right way to make
simple autorun menu, though.

<html>
<head><title></title>

<script type="text/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 + 200 ) - myW ), oH + ( (oH + 200 ) - myH ) );
}
</script>
</head>

<body onload="resizeWinTo();">
<div style="position:absolute; left:0px; top:0px;  width:494px;
height:350px; background-image:url(Setup.bmp);  id="myID">

</div>
</body>
</html>

Perhaps, I can replace all this construction with table, where image is set
as background?

Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	4 February 2007 21:44

Alexander,

> done. But not work anyway.

You need to tell it what div to use as its resize template. Change this:
resizeWinTo()
to this:
resizeWinTo('myID')

You are also missing a quote on the style attribute. Change this:
<div style="position:absolute; left:0px; top:0px;  width:494px;
height:350px; background-image:url(Setup.bmp);  id="myID">
to this:
<div style="position:absolute; left:0px; top:0px;  width:494px;
height:350px; background-image:url(Setup.bmp);"  id="myID">

When I did this, it worked.

> I am not sure that this is right way to make
> simple autorun menu, though.

Neither am I, but you asked how to resize a window to perfectly fit a
background image, so that is what I am helping you do :)

> Perhaps, I can replace all this construction with table, where image is
> set as background?

No, as I said before, a table is totally the wrong thing for this. Tables
are for tabular data only. They can be abused to do other things, but that
is not what they are designed to do. Using tables to do everything is
basically a throwback to the days before we had CSS. We have had CSS for
many years, we do not need to use tables any more, except for tabular data
(and occasionally to work around IE column display limitations).

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	4 February 2007 23:59

Mark,

yes, it works now, thank you.

some clarifications:

to center on screen, I added few lines from your page, is this correct, OK?

<html>
<head><title></title>

<script type="text/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('myID');">
<div style="position:absolute; left:0px; top:0px;  width:494px;
height:350px; background-image:url(Setup.bmp);"  id="myID">

</div>
</body>
</html>

what's not clear and what I not find on site: where to add the attributes to
disable all things, except window name: 'windowName="welcome to setup",
resizable=0,location=0,menubar=0,scrollbars=0,status=0,toolbar=0 ? (I want
only window name will be shown, all other things disabled)

Also, there is no need to use CSS  'background-repeat: no-repeat;' ?

Best Regards,
Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	5 February 2007 11:13

Alexander,

> to center on screen, I added few lines from your page, is this correct

yes, looks ok to me.

> windowName="welcome to setup"

This is done with the <title>foo</title> element as any normal web page.
Yours is currently blank so the browser will probably show the page address.

> resizable=0,location=0,menubar=0,scrollbars=0,status=0,toolbar=0

You need to take care of that when opening the window.
This page may be of use to you:
http://www.howtocreate.co.uk/tutorials/jsexamples/popwin.html

> Also, there is no need to use CSS  'background-repeat: no-repeat;' ?

Since the div is perfectly sized to fit it, there should be no need to use
that. You can still use it if you want to, but it will not have any effect.

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	5 February 2007 17:33

Mark,

I browsed that example, not clear, where exactly should be implemented
this settings in my specific case? I use this for autorun menu(offline
use).


function mypopup()
 {
   mywindow = window.open
("mywindow","resizable=0,location=0,status=0,scrollbars=0,menubar=0,tool
bar=0");
 } 

Regards,
Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	5 February 2007 22:57

Alexander,

> I browsed that example, not clear, where exactly should be implemented
> this settings in my specific case? I use this for autorun menu

At a guess, your (CD) autorun opens the page directly, but this includes all
the extra nonsense that you do not want, such as toolbars and address bar
etc. I do not know how you are starting this, but I guess it is a .htm or
.html file running in IE (autorun generally only works on Windows anyway).
IE denies scripts on local files by default, and if you try to open a popup
immediately, it will trigger the popup blocker. So it is difficult to get
out of that hole.

But if you run it as a .hta instead, it runs as a cross between a Web page
and an executable, in a window without any toolbars at all. It still has a
scrollbar but that can be hidden using this stylesheet (just put it before
the script, and make sure you use a DOCTYPE that triggers IE's standards
rendering mode):

<style type="text/css">
html, body { height: 100%; width: 100%; overflow: hidden; }
</style>

So rename your file to something.hta and put that stylesheet in it, and put
this DOCTYPE in at the top of the file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Then you basically remove the need to open a popup at all. I tried this with
your file and it worked fine. On other systems (assuming they allow
autorun), it will open like a normal Web page.

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	6 February 2007 11:49

Mark,

I use [brand] autorun, it have basic html template(I have attached it).
Template is good, since designed specially for autorun menu. The only
thing is I want adjust it to use CSS, not tables. Calculating tables for
link positioning is difficult.

Could you show how to adjust this template for use CSS, without tables?

 <body text="#FFFFFF" marginheight="0" marginwidth="0" topmargin="0"
leftmargin="0" style="margin:0;padding:0;" link="#FFFFFF"
vlink="#FFFFFF" alink="#FFFFFF">
<table border="0" style="border-collapse: collapse" width="540"
cellpadding="0" cellspacing="0" id="AutoNumber1" height="400"
background="images/bkg.gif">


[URLs]

Best Regards
Alexander

From	Me
To	Alexander
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	12 February 2007 22:10

Alexander,

I recommend you try a few CSS tutorials, yu will find this a lot more easy,
instead of having to rely on other people to create them for you. You could
start by using mine:
http://www.howtocreate.co.uk/tutorials/css/introduction

> Could you show how to adjust this template for use CSS, without tables?
>
>  <body text="#FFFFFF" marginheight="0" marginwidth="0" topmargin="0"
> leftmargin="0" style="margin:0;padding:0;" link="#FFFFFF"
> vlink="#FFFFFF" alink="#FFFFFF">

html, body {
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
}
a {
  color: #fff;
}

> <table border="0" style="border-collapse: collapse" width="540"
> cellpadding="0" cellspacing="0" id="AutoNumber1" height="400"
> background="images/bkg.gif">

We already did that part with the div. As for the cells, I suspect they are
probably better as <ul> lists.


Tarquin

From	Alexander
To	Me
Subject	Re: Resizing a popup to perfectly fit an image, if I know my image size.
Date	12 February 2007 23:44

Mark,

you are right, I need learn CSS more. Problem is that this requires constant
training. Otherwise all is quickly forgotten. Its not always there is a
possibility for permanent training. However I will try.

Alexander

From	Alexander
To	Me
Subject	Resizing the popup to fit image size and centering the popup on the screen
Date	17 January 2009 16:04

Hello,

I read this guide http://www.howtocreate.co.uk/perfectPopups.html
and need a little help to apply this improvements to basic popup code
supplied with [brand](I'm not sure I can do myself without errors). Basic
popup that comes with [brand] is very simple and give us ugly popup
(which for some reason always cut off the bottom part of image), not
centered, not resized to fit image size, and without option to close
popup(by clicking on window or close link).

Here is this popup code itself;


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<title><?php echo $page_title; ?></title>
<script language="javascript"><!--
var i=0;

function resize() {
  if (navigator.appName == 'Netscape') i = 40;
  window.resizeTo(document.images[0].width + 30, document.images[0].height +
60 - i);
}
//--></script>
</head>

<body onload="resize();">

<?php echo $image_source; ?>

</body>

</html>
-------

And here is part of product_info.php page, where this popup called from:

<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo
CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER :
HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript"><!--
function popupWindow(url) {

window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=
no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=10
0,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
</head>
....
....
....

<script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' .
tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) .
'\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'],
addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' .
TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES .
$product_info['products_image']) . '" target="_blank">' .
tep_image(DIR_WS_IMAGES . $product_info['products_image'],
$product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,
'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>


Best Regards,
Alex

From	Me
To	Alexander
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	18 January 2009 09:11

Alex,

> I read this guide http://www.howtocreate.co.uk/perfectPopups.html
> and need a little help to apply this improvements to basic popup code
> supplied with [brand]

My perfect popups code is not designed to enhance someone else's code
like this. It is a complete replacement for it. If you want to remove
their popups code and use mine instead, remove all of their popups code,
replace it with plain HTML links to the images, then follow the
instructions in my article to create image popups.

If you want to enhance their code to perform some of the functionality
from my code, you should be asking them how to adapt their code.
However, given that the first line of the function code is a browser
sniff, showing a serious lack of knowledge about how to do this sort of
thing properly, I doubt they would have the necessary knowledge to help
you. You're best off removing all of the JS popup code from their stuff,
and starting afresh with mine.

That may be too much of a rework (or you may find my article too
difficult to follow - I'm afraid it really is as clear as I can make it,
given all of the information it needs to convey), so if you still want
to try to adapt their code, I suggest you contact them for further help.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Alexander
To	Me
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	23 January 2009 13:33

Hello Mark,

Yes, I wanted to replace basic popup window with your improved popup, here
is what I did:

[Ed. WARNING, do not use the code from the osCoIGNORETHISPARTmmerce product.
Although it contains a brand name, this is only retained as a legal
obligation. This is not an endorsement or a recommendation. The product
is clearly very poorly written, as demonstrated by the browser sniffing
approach. The only recommendation I will make is to stay away from this
code. Do not use the product.]

<?php
/*
  $Id: popup_image.php 1739 2007-12-20 00:52:16Z hpdl $

  osCoIGNORETHISPARTmmerce, OpIGNORETHISPARTen SoIGNORETHISPARTurce E-CIGNORETHISPARTomIGNORETHISPARTmerce SoluIGNORETHISPARTtions
  httIGNORETHISPARTp:/IGNORETHISPART/wIGNORETHISPARTww.oIGNORETHISPARTscIGNORETHISPARTommerce.cIGNORETHISPARTom

  Copyright (c) 2003 osCoIGNORETHISPARTmmerce

  Released under the GNU General Public License
*/

  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">

/*
See http://www.howtocreate.co.uk/perfectPopups.html and
http://www.howtocreate.co.uk/jslibs/termsOfUse.html
for details and terms of use.
To call this script, use something like (the number is a delay before it
closes or 0 for no timed closing -
the true/false says if the window should close when they switch to another
window):
<script type="text/javascript"><!--
//you can style this, but don't try to text-align it to the right, it will
break the resizing effect
//keep it narrow, if it is wider than the image, the window will wrap to
this width
//the makeright class tells the script to automatically align it to the
right
var extraHTML = '<br><a href="javascript:window.close()"
style="text-decoration:none;color:#777;background-color:#bbb;font-weight:bol
d;border-left:2px solid #000;outline:none !important"
class="makeright">Close<\/a>';
//--></script>
<a href="me.jpg" onclick="return popImageExtra(this.href,'Site
author',true,3000,extraHTML);">link</a>
*/

//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth  = 600;
defaultHeight = 400;

//don't touch (except to modify the window contents)
function popImageExtra(imageURL,imageTitle,AutoClose,oTimeClose,extraHTML){
	var imgWin =
window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',he
ight='+defaultHeight+',left='+PositionX+',top='+PositionY);
	if( !imgWin ) { return true; } //popup blockers should not cause
errors
	
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script
type="text\/javascript">\n'+
		'function getRefToDivMod( divID, oDoc ) {\n'+
			'if( !oDoc ) { oDoc = document; }\n'+
			'if( document.layers ) {\n'+
			'if( oDoc.layers[divID] ) { return
oDoc.layers[divID]; } else {\n'+
			'for( var x = 0, y; !y && x < oDoc.layers.length;
x++ ) {\n'+
			'y = getRefToDivNest(divID,oDoc.layers[x].document);
}\n'+
			'return y; } }\n'+
			'if( document.getElementById ) { return
oDoc.getElementById(divID); }\n'+
			'if( document.all ) { return oDoc.all[divID]; }\n'+
			'return document[divID];\n'+
		'}\n'+
		'function resizeWinTo() {\n'+
			'if( !document.images.length ) { document.images[0]
= document.layers[0].images[0]; }'+
			'if( !document.images[0].height ||
window.doneAlready ) { return; }\n'+ //in case images are disabled
			'var oH = getRefToDivMod( \'myID\' ); if( !oH ) {
return false; }\n'+
			'var oW = oH.clip ? oH.clip.width :
oH.offsetWidth;\n'+
			'var oH = oH.clip ? oH.clip.height :
oH.offsetHeight; if( !oH ) { return false; }\n'+
			'if( !oH || window.doneAlready ) { return; }\n'+
//in case images are disabled
			'window.doneAlready = true;\n'+ //for Safari and
Opera
			'if(document.getElementsByTagName) {\n'+
				'for( var l =
document.getElementsByTagName(\'a\'), x = 0; l[x]; x++ ) {\n'+
	
'if(l[x].className==\'makeright\'&&!l[x].style.position){\n'+
	
'l[x].style.position=\'relative\';\n'+
	
'l[x].style.left=(document.images[0].width-(l[x].offsetWidth+l[x].offsetLeft
))+\'px\';\n'+
			'}}}\n'+
			'var x = window; x.resizeTo( oW + 200, oH + 200
);\n'+
			'var myW = 0, myH = 0, d =
x.document.documentElement, b = x.document.body;\n'+
			'if( x.innerWidth ) { myW = x.innerWidth; myH =
x.innerHeight; }\n'+
			'else if( d && d.clientWidth ) { myW =
d.clientWidth; myH = d.clientHeight; }\n'+
			'else if( b && b.clientWidth ) { myW =
b.clientWidth; myH = b.clientHeight; }\n'+
			'if( window.opera && !document.childNodes ) { myW +=
16; }\n'+
			'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH =
oH + ( (oH + 200 ) - myH ) );\n'+
			'var scW = screen.availWidth ? screen.availWidth :
screen.width;\n'+
			'var scH = screen.availHeight ? screen.availHeight :
screen.height;\n'+
			'if( !window.opera ) {
x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
	
(oTimeClose?('window.setTimeout(\'window.close()\','+oTimeClose+');\n'):'')+
		'}\n'+
		'<\/script>'+
		'<\/head><body onload="resizeWinTo();"'+(AutoClose?'
onblur="self.close();"':'')+'>'+
		(document.layers?('<layer left="0" top="0"
id="myID">'):('<div style="position:absolute;left:0px;top:0px;"
id="myID">'))+
		'<img src="'+imageURL+'" alt="Loading image ..." title=""
onload="resizeWinTo();">'+
	
(extraHTML?extraHTML:'')+(document.layers?'<\/layer>':'<\/div>')+'<\/body><\
/html>');
	imgWin.document.close();
	if( imgWin.focus ) { imgWin.focus(); }
	return false;
}

</script>
</head>
<body onload="resize();">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?>
</body>
</html>
<?php require('includes/application_bottom.php'); ?>

Please look at this modified code: am I correct? If no, please correct me.
I want also make few minor changes: to remove auto-close function (from
popup source) - user need close window by clicking on "close" link in the
bottom of popup. 
I want add some extra space around the edge of the image (padding), say
10px. Could you help how to achieve this? (remove auto-close function + add
extra padding around image 10px + put 'close' 'link in the bottom of popup)

Best Regards,
Alex

From	Me
To	Alexander
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	25 January 2009 09:05

Alex,

> <script language="javascript">
> /*
> ...
> <script type="text/javascript"><!--
> ...
> //--></script>
> ...
> */

This is not valid. You cannot open and close a script inside another
script like that, and I suspect that you did not intend to - the first
script should be closed before opening the second one, and you should
not be closing the second one before you have finished writing the JS
code. The JS block comment closing token is clearly misplaced. All the
code in between is being ignored - including the part that specifies the
'Close' link.

Aside from that, you are using the wrong version of the code. You are
using the image popup version (the one that opens a new popup containing
just the image and a link to close the window), but then you are
expecting it to resize the inside of the _current_ window, which it will
not do. You need to choose which version of the script you want to use.
The page describes several different variations. With your current
markup, you need to follow the section 'Resizing the inside of the
current window'.

>  osCoIGNORETHISPARTmmerce, OpIGNORETHISPARTen SoIGNORETHISPARTurce E-CIGNORETHISPARTomIGNORETHISPARTmerce SoluIGNORETHISPARTtions
>   Released under the GNU General Public License

This part worries me. You are producing a derivative work of GPL
software, and part of the output of that software contains JS and HTML
code that is GPL licensed, to it is outputting substantial parts of a
derivative work containing GPL licensed code.

It is up to you to check if the GPL requires you to therefore release
your derived work under the GPL license. (Basically, if their GPL
license covers only the PHP code, you are OK, but if they choose to make
it cover the HTML and JS too, then you must release your derived work).
If this is the case, you would have to release my code under the GPL
too, and that is not permitted. GPL is a license that is intentionally
incompatible with all other licenses, including my own.

So if you are obliged by the GPL to release your derived work, then you
cannot use my code. As far as I can see, this is probably the case here.
This is a very sucky limitation you run into when using GPL-licensed
code, and it's why so many people find that license too restrictive.


Tarquin

From	Alexander
To	Me
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	26 January 2009 15:54

Hello Tarquin,

will this be correct now? Also, how to add small space(padding)10px around
the image?
 

<?php
/*
  $Id: popup_image.php 1739 2007-12-20 00:52:16Z hpdl $
*/
 
  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 resize( 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 + 200 ) - myW ), oH + ( (oH + 200 ) - myH ) );
}
</script>
</head>
<body onload="resize();">
<p class="smallText" align="center">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?>
<a href="javascript:window.close()"><br><u>Close Window</u> [x]</a></p></p>
</body>
</html>
<?php require('includes/application_bottom.php'); ?>



Best Regards,
Alex

From	Me
To	Alexander
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	31 January 2009 09:51

Alex,

> will this be correct now? 

Nearly. However, as described in the article, the "resize" function
expects to be passed the ID of an absolutely positioned DIV, which
should be wrapped around all of the content. You have not passed it
anything, and you have wrapped a paragraph tag, without an ID, around
the contents. Once you fix that part, it looks like it should work,
though obviously this will depend on whatever other content your PHP
adds, that I can't see.

> Also, how to add small space(padding)10px around the image?

Use CSS to apply padding to the DIV.

From	Alexander
To	Me
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	1 February 2009 01:11

Hello Tarquin,

thank you for getting back.

I just confused with this issue,  simply have no enough experience in
javascript/css.
There is only small details remains to finish the improved popup, but really
dont know the way to go. I only added close window link before </body>
Could you add the required mods by right hand, directly into the code? I
have also attached original file.

<?php
/*
  $Id: popup_image.php 1739 2007-12-20 00:52:16Z hpdl $
*/

  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 resize( 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 + 200 ) - myW ), oH + ( (oH + 200 ) - myH ) );
}
</script>
</head>
<body onload="resize();">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?>

<a href="javascript: self.close()">Close Window</a>
</body>
</html>
<?php require('includes/application_bottom.php'); ?>

Best Regards,
Alex

From	Me
To	Alexander
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	7 February 2009 09:11

Alex,

> I just confused with this issue,  simply have no enough experience in
> javascript/css.

You really should be using the tutorials to learn it if you are using it, so
that you can maintain this sort of thing yourself, instead of needing help
for each little change.
http://www.howtocreate.co.uk/tutorials/javascript/important
http://www.howtocreate.co.uk/tutorials/css/introduction

<body onload="resize('wrapper');">
<div id="wrapper">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?>
<a href="javascript: self.close()">Close Window</a>
</div>
</body>

As for CSS, I'd recommend you remove the padding and margin from the HTML
and BODY elements, and make the image and link block display, and make the
DIV be absolutely positioned:

html, body { margin: 0; padding: 0; }
div { position: absolute; top: 0; left: 0; }
img, a { display: block; }

Since you are using PHP includes, there could be loads of other stuff being
added as well, and I cannot see if that is the case. You will need to make
sure that no extra content is added to this document by the PHP
includes.

From	Alexander
To	Me
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	17 February 2009 22:49

Hello,

not work for me - does not resize. Something wrong in this script. (I used
image temporarili instead of PHP just to see picture)

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="LTR" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>[brand]</title>
<base href="http://www.bablas.co.uk/">
<link rel="stylesheet" type="text/css"
href="templates/Babla/stylesheet.css">
<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 resize( 'wrapper' ) {
  var oH = getRefToDivMod( 'wrapper' ); 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 leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0"
onLoad="resize('wrapper');" oncontextmenu="return false;">
<div id="wrapper">
<table width="100%" height="100%">
<tr>
<td valign="center" align="center">
<a href="#" onclick="top.window.close(); return false">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?></a><br />
<a href="javascript: self.close()">Close Window</a>
</td>
</tr>
</table>
</div>
</body>
</html>


B.Regards
Alex

From	Me
To	Alexander
Subject	Re: Resizing the popup to fit image size and centering the popup on the screen
Date	21 February 2009 09:10

Alex,

I gave you code that would work. You then added a load of other changes
that I didn't tell you to make. They broke it.

> function resize( 'wrapper' ) {
>   var oH = getRefToDivMod( 'wrapper' );

No. That's not valid, which means the script engine will reject the
entire script. Put it back like it was.

> <table width="100%" height="100%">

A _table_? The markup I gave you did not contain a table. It certainly
did not break everything by setting 100% widths, and similar nonsense.
Remove the table and all of its associated TR/TD markup. If you want to
centre-align it, you can add the following CSS to the CSS rule that
targets the div:
text-align: center;

I assume you added the CSS I gave you in my last email to your stylesheet.

Lastly, make sure your site opens this page as a non-maximised popup
(using window.open, with the width and height set to some small value
like 100,100). It will not work if it is maximised.

Alexander

Navigation

Search

Site navigation

Email conversation