PDA

View Full Version : Open in new window @ exact size

Thee Gandalf
01-31-2005, 10:39 PM
Hi,

In ref to this link (http://www.webdevtips.com/webdevtips/codegen/openwin.shtml)
is it possible to add inline var statements to have particular links open at in different window sizes?

If so, how?

Thanks,
Gändälf
:D
Thee Gandalf
01-31-2005, 10:44 PM
Also, is it possible for the code to generate an opening window automatically to the size of the loading image? (so I don't have to code it for every single image link)

Ty,
G
:D
coothead
01-31-2005, 11:37 PM
Hi there Theee,

have alook at this working example it may give you some ideas...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>variable popups</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<base href="http://coothead.homestead.com/files/"/>

<style type="text/css">
/*<![CDATA[*/

body {
background:#003;
}
div {
width:60px;
border:solid 1px #000;
background:#eef;
}
div img {
width:50px;
height:50px;
border:solid 1px #000;
margin:3px;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var mywindow;

function popUp(w,h,image) {
if(mywindow) {
mywindow.close()
}

var l=(screen.width-w)/2;
var t=(screen.height-h)/2;
var features="left="+l+",top="+t+",width="+w+",height="+h;
var bodystyle="margin:0px;padding:0px";
mywindow=window.open('','',features);
mywindow.document.write('<html><title>'+image+'<\/title><body style='+bodystyle+'>'+
'<img src='+image+'><\/body><\/html>');
mywindow.document.close();
mywindow.focus();
}

//]]>
</script>

</head>
<body>

<div>
<img src="dog.jpg" onclick="popUp(400,432,'dog.jpg')" alt=""/>
<img src="aaa.jpg" onclick="popUp(200,200,'aaa.jpg')" alt=""/>
<img src="ten_quid.jpg" onclick="popUp(445,238,'ten_quid.jpg')" alt=""/>
</div>

</body>
</html>
Thee Gandalf
01-31-2005, 11:43 PM
but wont the link that says "onclick="popUp..." have problems with pop up blockers??
Alcedo
01-31-2005, 11:52 PM
I used a simple script for a candles business I designed awhile back for the purpose you're asking about, although it doesn't fit the requirements you mentioned, it get's the same results...

<SCRIPT language="JavaScript">
; function c3() {
win1=open("popup/c3.html","Popup","width=450,height=260,resizable=0,toolbar=0,directories=0,scrollbars=0,menubar=0");
win1.focus()}
</SCRIPT>
<a href="javascript:c3()"><img src="images/unavailable.gif" height="125" width="125" border="0"></a>
_Aerospace_Eng_
02-01-2005, 12:00 AM
nah cootheads code shouldnt have a problem with popup blockers just tried it popUp is just the name of the function its when a body onload code is used to open a new window is when it will have problems with popup blockers
coothead
02-01-2005, 12:13 AM
Hi there Thee,
but wont the link that says "onclick="popUp..." have problems with pop up blockers??
As I said this is a just a working example :D

It is quite easy to modify the code to use anchors for the onclick handler instead :)
<div>
<a href="javascript:void(popUp(400,432,'dog.jpg'))"><img src="dog.jpg" alt=""/></a>
<a href="javascript:void(popUp(200,200,'aaa.jpg'))"><img src="aaa.jpg" alt=""/></a>
<a href="javascript:void(popUp(445,238,'ten_quid.jpg'))"><img src="ten_quid.jpg" alt=""/></a>
</div>
Thee Gandalf
02-01-2005, 04:00 PM
<a href="#" onclick="javascript:window.open('img/image-name.jpg', 'none', 'width=347,height=400');">+</a>

Is there a way to get the image that opens in the new window to align itself at the top and left? Because currently it's centering itself and half of the image is chopped off.

Thanks,
Gänd
:D
coothead
02-01-2005, 04:27 PM
Hi there Thee,

with the code that I posted you can position the
pop-up wherever your heart desires. I hate having
to repeat myself but...

As I said before, this is a just a working example :D

...and it does not cut of any part of the image.

Set var l=0 and var t=0 and the pop-up will be
positioned top left.

Your link should look like this...
<a href="javascript:void(popUp(347,400,'img/image-name.jpg'))">+</a>
...and ensure that the image-name.jpg dimensions are 347X400.
Thee Gandalf
02-01-2005, 08:26 PM
Okay, some things are being changed here.

Instead of using that lengthy code in the head tag, is it possible to simply use:

<a href="#" onclick="javascript:window.open('img/image-name.jpg', 'none', 'width=347,height=400');">+</a>

Now, if so, where do we add the var info to pass along to the opening window?

Thank you,
Gändälf
:D
coothead
02-01-2005, 10:49 PM
No, your one liner will produce a 10px margin at the
top and left of the new window :rolleyes:
Thee Gandalf
02-04-2005, 12:18 AM
The new problem:

There is a border around the image in the opening window. How can this be fixed?

Code below and thanks,
Gändälf
:D


HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript" src="windowopen.js">
<!--
// -->
</script>
</head>

<body>

<a href="#" onClick="open_win('ss-bz.jpg',347,400,0,0,0,0,0,0,0,0,5,'win1');return false;">+</a>

</body>
</html>






External JS:

/*
windowopen.js
V 1.0
copyright Andrew Holt
This script is free to use provided this notice remains.
Full instructions can be found @ http://www.webdevtips.com/webdevtips/js/openwindow.shtml
*/


function open_win(what_link,the_x,the_y,toolbar,addressbar,directories,statusbar,menubar,scrollbar,resize,his tory,pos,wname){
var the_url = what_link;
the_x -= 0;
the_y -= 0;
var how_wide = screen.availWidth;
var how_high = screen.availHeight;
if(toolbar == "0"){var the_toolbar = "no";}else{var the_toolbar = "yes";}
if(addressbar == "0"){var the_addressbar = "no";}else{var the_addressbar = "yes";}
if(directories == "0"){var the_directories = "no";}else{var the_directories = "yes";}
if(statusbar == "0"){var the_statusbar = "no";}else{var the_statusbar = "yes";}
if(menubar == "0"){var the_menubar = "no";}else{var the_menubar = "yes";}
if(scrollbar == "0"){var the_scrollbars = "no";}else{var the_scrollbars = "yes";}
if(resize == "0"){var the_do_resize = "no";}else{var the_do_resize = "yes";}
if(history == "0"){var the_copy_history = "no";}else{var the_copy_history = "yes";}
if(pos == 1){top_pos=0;left_pos=0;}
if(pos == 2){top_pos = 0;left_pos = (how_wide/2) - (the_x/2);}
if(pos == 3){top_pos = 0;left_pos = how_wide - the_x;}
if(pos == 4){top_pos = (how_high/2) - (the_y/2);left_pos = 0;}
if(pos == 5){top_pos = (how_high/2) - (the_y/2);left_pos = (how_wide/2) - (the_x/2);}
if(pos == 6){top_pos = (how_high/2) - (the_y/2);left_pos = how_wide - the_x;}
if(pos == 7){top_pos = how_high - the_y;left_pos = 0;}
if(pos == 8){top_pos = how_high - the_y;left_pos = (how_wide/2) - (the_x/2);}
if(pos == 9){top_pos = how_high - the_y;left_pos = how_wide - the_x;}
if (window.outerWidth ){
var option = "toolbar="+the_toolbar+",location="+the_addressbar+",directories="+the_directories+",status="+the_statusbar+",menubar="+the_menubar+",scrollbars="+the_scrollbars+",resizable="+the_do_resize+",outerWidth="+the_x+",outerHeight="+the_y+",copyhistory="+the_copy_history+",left="+left_pos+",top="+top_pos;
wname=window.open(the_url, wname, option);
wname.focus();
}
else
{
var option = "toolbar="+the_toolbar+",location="+the_addressbar+",directories="+the_directories+",status="+the_statusbar+",menubar="+the_menubar+",scrollbars="+the_scrollbars+",resizable="+the_do_resize+",Width="+the_x+",Height="+the_y+",copyhistory="+the_copy_history+",left="+left_pos+",top="+top_pos;
if (!wname.closed && wname.location){
wname.location.href=the_url;
}
else
{
wname=window.open(the_url, wname, option);
//wname.resizeTo(the_x,the_y);
wname.focus();
wname.location.href=the_url;
}
}
}