Is it possible to make a dynamic/variable sized pop-up window [Archive]

View Full Version : Is it possible to make a dynamic/variable sized pop-up window

mat

09-04-2002, 10:01 AM

hi,

Say you have a product gallery of some sort which happens to be a php page that is displaying a gallery of thumnails showing off products in that range (sucking them out of the database)

Now you can click these thumnails, and if so up pops a specified sized window (details.php) with a bigger version image of that product plus a few details. The 'bigger' images are not all the same size though so.... :confused:

http://www.theory1.orcon.net.nz/pop.gif

so becuase the size of the images in the database changes a bit it would not work having one specified size for all pop up windows. I thought hey! i ould ,make a table and just put the variable img src in a cell and not specify the height-width and then it will automatically resize, but then of course i missed the whole javascript pop up specified size window bit?

Is it possibe to do this somehow?

[EDIT] hope i put this in the right forum.

joh6nn

09-04-2002, 11:45 PM

when you make a popup window, you get to do a 3 things.

window.open(first, second, third);

the first thing you get to do is specify the file. the second thing you get to do is name the window. and the third thing you get to do, is specify the windows properties.

when you do this third thing, and specify window properties, you get to set its size. however, there are other ways of setting size in a window, that are easier then setting them here in this third part of window.open(). i'm going to show you the easier way, and if you want, i can come back and explain how to do it with window.open(), and why using window.open() is harder.

so, we'll open a page with window.open(), and name it.

var yourpage = window.open('yourpage.htm','page');

now we have a new window, and we a variable have called 'yourpage', that represents this window. to resize this window, we use the resizeTo() method.

yourpage.resizeTo(500, 300);

your page is the variable that refers to the window. and we want to resize that window. in this case, we've made it 500 pixels wide, by 300 pixels tall.

hope that helps.

skeatt

09-05-2002, 06:17 AM

joh6nn, I notice when using the... yourpage.resizeTo(500, 300);

it doesn't work the same in NS and IE,

What happens to me in IE, is the resizeTo makes the whole window resize to the (500, 300) while NS resizes the internal page size, which is what I was hoping for in IE.

Depending on the features you enable in the window, the internal viewing area could be different for IE.

(basically you could fit the IE window inside the screen area of NS window)

This is an address I found where someone subtracts the chrome to workout the window size,

http://www.faqts.com/knowledge_base/view.phtml/aid/1178/fid/124

Is this what one has to do to get both NS and IE working the same? using resizeTo

joh6nn

09-05-2002, 06:40 AM

skeat, i discovered this as well, and found that it could be a problem at times when the exact size mattered. to compensate for the problem, i wrote the following script, which resizes the inside of the window. to the best of my knowledge, this will work cross browser, in NS4+, and IE5+

http://www.joh6nn.com/script/misc/resizein.htm

skeatt

09-05-2002, 06:58 AM

Thanks Joh6nn, I'll try it later...:thumbsup:
I'm off to a Apple Seminar and Expo, not that they could convince me to give up my PC. :rolleyes:

adios

09-05-2002, 11:04 PM

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var HTML, Gwin = null, pic = new Array();
var path = 'http://www.salon.com/news/feature/2002/'; //images directory

/* URLS below, as shown */

pic[0] = {
src: '07/23/granta/cover.jpg',
obj: null,
width: null,
height: null,
title: 'Sammy',
loaded: false
}
pic[1] = {
src: '09/06/asadabad/cover.jpg',
obj: null,
width: null,
height: null,
title: 'Gulbuddin Hekmatyar',
loaded: false
}
pic[2] = {
src: '09/05/perle/story.jpg',
obj: null,
width: null,
height: null,
title: 'Dicky',
loaded: false
}
//preloader
for (var i=0; i<pic.length; ++i) {
pic[i].obj = new Image();
pic[i].obj.onload = new Function(
'pic['+i+'].width=this.width;' +
'pic['+i+'].height=this.height;' +
'pic['+i+'].loaded=true;'
);
pic[i].obj.src = path + pic[i].src;
}

function graphwin(picObj) {
if (Gwin && !Gwin.closed) Gwin.close();
if (!arguments.length) return;
if (picObj.loaded) {
HTML = '';
HTML += '<html><head><title>'+picObj.title+'</title><script type="text/javascript">';
HTML += 'onblur=function(){setTimeout("self.focus()",1000)};';
HTML += 'onload=function(){self.focus()};';
HTML += '<\/script><style type="text/css">';
HTML += 'a.c{font:200 10px arial;color:white;text-decoration:none;}';
HTML += 'a:hover{color:#ffff00;background:#0000aa;}</style></head>';
HTML += '<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="steelblue">';
HTML += '<img border="0" width="'+picObj.width+'" height="'+picObj.height+'" ';
HTML += 'src="'+ path + picObj.src+'">';
HTML += '<table width="100%" cellspacing="0" cellpadding="0" border="1"><tr>';
HTML += '<td align="center" bgcolor="steelblue">';
HTML += '<a class="c" href="javascript:self.close()">close</a>';
HTML += '</td></tr></table></body></html>';
Gleft = screen.availWidth/2 - picObj.width/2;
Gtop = screen.availHeight/2 - picObj.height/2;
var attr = 'width='+picObj.width+',height='+(picObj.height+16);
attr += ',left='+Gleft+',top='+Gtop+',status=0';
Gwin = window.open('javascript:opener.HTML','Gwin',attr);
}
}

</script>
<style type="text/css">

body, a {
font: 200 16px monospace;
color: orange;
text-decoration: none;
background: olive;
}

</style>
</head>
<body>
<a href="javascript:void graphwin(pic[0])">&#149;Sam&#149;</a><br><br>
<a href="javascript:void graphwin(pic[1])">&#149;Gul&#149;</a><br><br>
<a href="javascript:void graphwin(pic[2])">&#149;Dick&#149;</a><br><br><br>
<a href="javascript:void graphwin()">&#149;&#149;close window&#149;&#149;</a>
</body>
</html>

skeatt

09-07-2002, 01:50 PM

Originally posted by adios
pic[0] = {
src: 'http://www.salon.com/news/feature/2002/07/23/granta/cover.jpg',
adios, I've been studying the code and can understand most of what is happening; however if I change the image source to
src: 'images/cover.jpg',.... to load images from my images folder, the popUp won't open in IE, while NS will open a PopUp but not load the image.

I did the following test and image path seamed correct, and loaded was TRUE.

//preloader
for (var i=0; i<pic.length; ++i) {
pic[i].obj = new Image();
pic[i].obj.src = pic[i].src;
pic[i].obj.onload = new Function (
'pic['+i+'].width=this.width;pic['+i+'].height=this.height;pic['+i+'].loaded=true;' );
alert(pic[i].obj.src)
alert(pic[i].obj.onload)
}

The funniest thing is..in IE without this test no PopUp would open, but with the test, option 2 and 3 opened a window with no image :confused:

Analysing Netscape Page Info indicated....
IMAGE:javascript:images/cover.jpg
so I don't know how this finds the correct path?

I copied the source from NS popUp and executed directly in another HTML and it loaded the image.

IE source only had this...
<HTML><SCRIPT LANGUAGE=javascript>var __w=opener.HTML;
if(__w!=null)document.write(__w);
</SCRIPT></HTML>

What am I missing?

mat

09-08-2002, 01:20 AM

:) thanks for the replies. There is actually a php function to get the size of an image, basically it gets the size and seems to put it into an array (width + height) you can then just output the two varibles into the js pop up code.

you can use it like this, the gallery.php page code:

<?php

include "dbConnect.php";

$sql = "SELECT p.potID, p.potName, p.image, c.collectionID
FROM pots p, collection c
WHERE p.collection = c.collectionID
AND $collection = c.collectionID ";

$result = mysql_query($sql);

while ($row = mysql_fetch_array($result)){

$potName = $row['potName'];
$pic = $row['image'];
$potID = $row['potID'];
$varSize = getimagesize($row['image'] . '_full.jpg');
$varWidth = $varSize[0];
$varHeight= $varSize[1];

echo "name: $potName<br>";

echo "<A HREF='detail.php?pot=$potID' target='popup' onClick=\"window.open('detail.php?pot=$potID','popup','width=$varWidth,height=$varHeight'); return false\"><img src=\"{$pic}_small.jpg\"></a>";

}

?>

mat,

adios

09-08-2002, 02:26 AM

skeatt...

OK, amended the above; try it & let me know. Accidentally assigned the Image object handlers after setting the .src property - if the image was cached, it loaded so quickly that the handler was being assigned after load, thus not setting the flag. I've had problems with Netscape before on its acceptance of relative urls in certain JS properties; see if the change helps. If the images are in different directories, just set var path = ''; and use the full url in the .src property.

cheers, adios

skeatt

09-08-2002, 08:46 AM

ardios, I hope I haven't thrown to many questions.

It worked as written; however it still had problems loading images from a local source. I'm not that experienced at the DOM model, and still find it hard to get my head around the preloader function() but managed to decipher a string that seamed to be doubled up.

This is what I did with your code, I'll list yours first (in red) then the alteration so that images would load from the images folder......starting from the top.

var path = 'http://www.salon.com/news/feature/2002/'; //images directory
var path = 'images/'; //images directory

src: '07/23/granta/cover.jpg',
src: 'cover.jpg'',

HTML += 'src="'+ path + picObj.src+'">';
HTML += 'src="'+ picObj.obj.src+'">';

I can't understand why this didn't affect the loading of images from the Web, but these are the two strings I queried....

pic[i].obj.src = path + pic[i].src; // from the pre-loader
HTML += 'src="'+ path + picObj.src+'">'; // from the graphwin function

I though if we have defined the pic[i].obj.src then why do we add the path to the object again? (it was really an uneducated guess, while trying to understand the DOM) so I used picObj.obj.src directly as the src=" .

Is this OK?

I still look at the PreLoader and get a :confused: look, just when I think I understand it, I have to start over again.

It's trying to get my head around the link between the pic array the .obj entry and the
pic[i].obj = new Image();
pic[i].obj.onload = new Function( .....

What's actually happening here?

On a less important note, what is (Vscript)? and is there an advantage in dynamically defining the PopUp than actually making a separate HTML and referencing to that using javascript?