Resize to image

[Michael Satterwhite]

I'm opening a page that has a single image on it. I'd like to resize the
window containing the image to the size of the image (slightly larger OK,
not smaller). The width isn't a problem, but the height is. The window, of
course has things like menu bars, toolbar, navigation, etc. I need to
account for these when I resize the image, but I'm not seeing how to do
that. I'm sure this must be done frequently, but I'm not seeing the
solution.

Would one of you guru's be so kind as to point me in the direction on how to
do this. I'll be eternally grateful.

tia
---Michael

[Michael Satterwhite]

A little more information. The page is being built on the server (with the
single image), and the size may vary. I'd like to pass the image size back
to the main window and have javascript resize it at presentation time to
the size of the image. (All other suggestions gratefully accepted).

I've tried the following:

window.menubar. visible=false;
window.director ies.visible=fal se;
window.statusba r.visible=false ;
window.toolbar. visible=false;
window.location bar.visible=fal se;
window.personal bar.visible=fal se;
window.scrollba rs.visible=fals e;

which I thought would eliminate the distractions at the top - and (I hoped)
the problem, but this code didn't seem to have any effect. All of the
garbage at the top was still there.

Any suggestions?

[Fred Oz]

Michael Satterwhite wrote:

A little more information. The page is being built on the server (with the
single image), and the size may vary. I'd like to pass the image size back
to the main window and have javascript resize it at presentation time to
the size of the image. (All other suggestions gratefully accepted).

I've tried the following:

window.menubar. visible=false;
window.director ies.visible=fal se;
window.statusba r.visible=false ;
window.toolbar. visible=false;
window.location bar.visible=fal se;
window.personal bar.visible=fal se;
window.scrollba rs.visible=fals e;

You can not reliably control any of the above features of a window, nor
can you reliably re-size it. Therefore, do not depend on being able to
do so.

The most common "fix" is to make your background black or some similar
colour sympathetic to your images, then place your image within the
page with a suitable border to frame it.

--
Fred

[Richard]

On Mon, 17 Jan 2005 23:49:41 GMT Michael Satterwhite wrote:

I'm opening a page that has a single image on it. I'd like to resize
the
window containing the image to the size of the image (slightly larger
OK,
not smaller). The width isn't a problem, but the height is. The window,
of
course has things like menu bars, toolbar, navigation, etc. I need to
account for these when I resize the image, but I'm not seeing how to do
that. I'm sure this must be done frequently, but I'm not seeing the
solution. Would one of you guru's be so kind as to point me in the direction on
how to
do this. I'll be eternally grateful. tia
---Michael

Done quite frequently for images.
You can turn off those items like, menu, toolbar, statusbar, etc.
Leave only the part showing the close buttons and that.
This is the basics with popups.

<a href="http://www.google.com" target="_blank" title="That search engine"
onclick="window .open(this.href ,'blank','width =200,height=100 ,menubar=no,too l
bar=no');">Goog le</a>

Here's one of the easiest ways of doing it.

[Josh]

"Fred Oz" <Oz****@iinet.n et.auau> wrote in message
news:Mz******** *********@news. optus.net.au...

You can not reliably control any of the above features of a window, nor
can you reliably re-size it. Therefore, do not depend on being able to
do so.

The most common "fix" is to make your background black or some similar
colour sympathetic to your images, then place your image within the
page with a suitable border to frame it.

I'm working on a site with a similar issue. How do I make the background of
the popup black? Is there any way to have the popup appear in the center of
the screen instead of the top left?

My code looks like this:

<td>
<div align="center">
<a href="javascrip t:;"
onClick="MM_ope nBrWindow('gall ery/photos/hostel-lounge-2.jpg','MiamiHo stelGu
ests6','scrollb ars=yes,resizab le=yes,width=25 5,height=200')" >
<img src="gallery/thumbnails/hostel-lounge-2.jpg" width="75" height="56">
</a>
</div>
</td>

[RobG]

Josh wrote:

"Fred Oz" <Oz****@iinet.n et.auau> wrote in message
news:Mz******** *********@news. optus.net.au... [...] I'm working on a site with a similar issue. How do I make the background of
the popup black? Is there any way to have the popup appear in the center of
the screen instead of the top left?

You can try detecting the available screen width and height, then size
and position your window accordingly. When creating the new window,
write HTML as if you were writing a stand-alone page (which is the
simplest way to develop the code to start with):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>demo</title>
<script type="text/javascript">
function popWin(a){
win = window.open('', 'Gallery Picture','');
var winContent = [
'<html><head><t itle>An Image</title></head>',
'<body style="backgrou nd-color: black;',
' text-align: center; margin-top: 100px">',
'<div style="border: 3px solid gold;',
' padding: 2 2 2 2;">',
'<img src="' + a.href + '"',
' style="border:1 px solid gold; padding: 3 3 3 3;',
' width: 100px; height: 100px;"',
' alt="An image">',
'</div>',
'<br>',
'<a href="javascrip t:window.close( );">Close</a>',
'</body></html>' ]
win.document.wr ite(winContent. join(''));
win.document.cl ose();
}

</script>
</head><body>
<a href="a.gif" border="0" onclick="
popWin(this);re turn false;
"><img src="b.gif" border="0" alt="Link to A"></a>
</body>
</html>

In the start document, the link is made with a standard href. If the
onclick runs, it returns false, canceling the link. If JavaScript is
not enabled or not supported, the link will be shown in the current
page - so the page is not dependent on JavaScript. Users can still
make the choice of opening the link in a new window or tab themselves.

This is just a demo, modify your code to suit. Remember that the HTML
you put in the new window should be just as valid as any other HTML you
write.

--
Rob

[Josh]

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:SR******** *********@news. optus.net.au...

Josh wrote:

"Fred Oz" <Oz****@iinet.n et.auau> wrote in message
news:Mz******** *********@news. optus.net.au...

[...]

I'm working on a site with a similar issue. How do I make the background of the popup black? Is there any way to have the popup appear in the center of the screen instead of the top left?

You can try detecting the available screen width and height, then size
and position your window accordingly. When creating the new window,
write HTML as if you were writing a stand-alone page (which is the
simplest way to develop the code to start with):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>demo</title>
<script type="text/javascript">
function popWin(a){
win = window.open('', 'Gallery Picture','');
var winContent = [
'<html><head><t itle>An Image</title></head>',
'<body style="backgrou nd-color: black;',
' text-align: center; margin-top: 100px">',
'<div style="border: 3px solid gold;',
' padding: 2 2 2 2;">',
'<img src="' + a.href + '"',
' style="border:1 px solid gold; padding: 3 3 3 3;',
' width: 100px; height: 100px;"',
' alt="An image">',
'</div>',
'<br>',
'<a href="javascrip t:window.close( );">Close</a>',
'</body></html>' ]
win.document.wr ite(winContent. join(''));
win.document.cl ose();
}

</script>
</head><body>
<a href="a.gif" border="0" onclick="
popWin(this);re turn false;
"><img src="b.gif" border="0" alt="Link to A"></a>
</body>
</html>

In the start document, the link is made with a standard href. If the
onclick runs, it returns false, canceling the link. If JavaScript is
not enabled or not supported, the link will be shown in the current
page - so the page is not dependent on JavaScript. Users can still
make the choice of opening the link in a new window or tab themselves.

This is just a demo, modify your code to suit. Remember that the HTML
you put in the new window should be just as valid as any other HTML you
write.

Thanks for that tip. I just bought two books on JavaScript today and am
going to learn how to do this stuff...

[Dr John Stockton]

JRS: In article <10************ *@corp.supernew s.com>, dated Wed, 19 Jan
2005 21:29:07, seen in news:comp.lang. javascript, Josh
<jo*****@hotmai l.com> posted :

Thanks for that tip. I just bought two books on JavaScript today and am
going to learn how to do this stuff...

If you had read the newsgroup FAQ, you would almost certainly have
learned that at least one of them was not considered worth recommending.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[RobB]

Michael Satterwhite wrote:

A little more information. The page is being built on the server (with the single image), and the size may vary. I'd like to pass the image size back to the main window and have javascript resize it at presentation time to the size of the image. (All other suggestions gratefully accepted).

I've tried the following:

window.menubar. visible=false;
window.director ies.visible=fal se;
window.statusba r.visible=false ;
window.toolbar. visible=false;
window.location bar.visible=fal se;
window.personal bar.visible=fal se;
window.scrollba rs.visible=fals e;

which I thought would eliminate the distractions at the top - and (I hoped) the problem, but this code didn't seem to have any effect. All of the
garbage at the top was still there.

Any suggestions?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>PicUp</title>
<base href="http://www.johnleeart. com/Europe/" />
<style type="text/css">

body {
margin: 40px 0 0 0;
background: #806030;
}
a.PU img {
display: block;
margin-bottom: 4px;
border: 1px #000 solid;
border-left: 24px #403010 solid;
}

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

PicUp.win = null;
PicUp.sticky = true;
PicUp.clickclos e = true;

function PicUp(url, title)
{
if (PicUp.win && !PicUp.win.clos ed)
PicUp.win.close ();
var plObj = new Image;
plObj.onload = function()
{
var w = this.width;
var h = this.height;
var config = [
'width=' + w , 'height=' + h ,
'left=' + (screen.availWi dth - w - 10) * .5 ,
'top=' + (screen.availHe ight - h - 10) * .5 ,
'status=0'
].join(',');

PicUp.HTML = [
'<html><head><t itle>' + title + '</title></head>' ,
'<body style="margin:0 ;background:bla ck;overflow:hid den;"' ,
((PicUp.sticky) ? ' onblur="setTime out(\'top.focus ()\',200)"' : '')
,
((PicUp.clickcl ose) ? ' onclick="top.cl ose()"' : '') ,
'><img style="border-width:0;cursor: pointer;"' ,
((PicUp.clickcl ose) ? ' title="click to close"' : '') ,
' src="' + this.src + '"></body></html>'
].join('');

PicUp.win = window.open('ja vascript:opener .PicUp.HTML', 'picwin',
config);
if (PicUp.win && !PicUp.win && PicUp.win.focus )
PicUp.win.focus ();
}
plObj.onerror = function()
{
alert('Larger size not available, sorry...');
}
plObj.alt = title;
plObj.src = url;
return false;
}

</script>
</head>
<body>
<div id="container" >
<a class="PU"
title="Afternoo n In Alhambra"
target="_blank"
href="images/AfternoonInAlha mbra01.jpg"
onclick="return PicUp(this.href ,this.title)">
<img
alt="Thumbnail - Click for fullsize image"
src="thumbnails/AfternoonInAlha mbra01.jpg" />
</a>
<a class="PU"
title="Apartmen ts In Muslin Quarter"
target="_blank"
href="images/ApartmentsInMus linQuarter.jpg"
onclick="return PicUp(this.href ,this.title)">
<img
alt="Thumbnail - Click for fullsize image"
src="thumbnails/ApartmentsInMus linQuarter.jpg" />
</a>
<a class="PU"
title="Empire's Glory Days"
target="_blank"
href="images/EmpuriesGloryDa ys.jpg"
onclick="return PicUp(this.href ,this.title)">
<img
alt="Thumbnail - Click for fullsize image"
src="thumbnails/EmpuriesGloryDa ys.jpg" />
</a>
<a class="PU"
title="Merry-Go-Round"
target="_blank"
href="images/MerryGoRound.jp g"
onclick="return PicUp(this.href ,this.title)">
<img
alt="Thumbnail - Click for fullsize image"
src="thumbnails/MerryGoRound.jp g" />
</a>
</div>
</body>
</html>

Might as well cover my ass: this code is bad.
Pop-ups: really bad, may be blocked (bad).
Messing w/window unreliable. Focussing, bad.
Have fun. ~:>)