Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

auto sizing picture window 1

Status
Not open for further replies.
Ricjd

Ricjd

Programmer
Sep 12, 2002
104
GB
i have a link which opens a image in a new window. what i want it to do is to have the window be sized 30 pixels bigger than the picture. the code i have got is this

[tt]function openPic(pic) {
var Ihight, Iwidth;
BaseImg = new Image;
BaseImg.src = pic;
Ihight = BaseImg.height + 30;
Iwidth = BaseImg.width + 30;
if (Ihight > 550)
{
Ihight = 550
}
if (Iwidth > 750)
{
Iwidth = 750
}
window.open(pic,null,"width="+Iwidth+",height="+Ihight+",status=no,toolbar=no,menubar=no,scrollbars=1,left=25,top=23");
}[/tt]

when i click on the link the window opens and its 30 by 30 pixels wide. but then if i close off the window and click on th SAME link then it opens up in the right size.

Thanking you in adavance, Rick
 
Sort by date Sort by votes
I think this line:
BaseImg = new Image;
should be:
BaseImg = new Image();

I don't think the correct with and height of the image are set just one line after setting the src.
You have to wait untill the image has loaded.

BaseImg.src = pic;
alert(BaseImg.height);
alert(BaseImg.width);

This might be 0 for both alerts.

I don't know how to script it so you will get the correct with and height but you could try this:

<script>
function openPic(pic) {
BaseImg = null;
BaseImg= new Image();
BaseImg.src = pic;
doRest();
}
function doRest(){
if(BaseImg.height==0){
setTimeout('doRest();',200);
}
else{
var Ihight, Iwidth;
Ihight = BaseImg.height + 25;
Iwidth = BaseImg.width + 20;
if (Ihight > 550)
{
Ihight = 550
}
if (Iwidth > 750)
{
Iwidth = 750
}
window.open(BaseImg.src,null,&quot;width=&quot;+Iwidth+&quot;,height=&quot;+Ihight+&quot;,status=no,toolbar=no,menubar=no,scrollbars=0,left=25,top=23&quot;);
}
}
</script>
<body onload=&quot;openPic('my.jpg');&quot;>
 
Upvote 0 Downvote
I think this script would work closely to the same as something I am trying to set up. I have a page with a library of links to different files. I would like the links to GIF files to be set to open in a new 200 x200 window. What would be the easiset way to go about formatting that? THANKS!
 
Upvote 0 Downvote
copy the code in the appropriate files and open the test.html (make sure the my.jpg is in the directory of the 2 html files)

In a test.html
<script>
function openPic(pic) {
BaseImg = null;
BaseImg= new Image();
BaseImg.src = pic;
doRest();
}
function doRest(){
if(BaseImg.height==0){
setTimeout('doRest();',200);
}
else{
var winWidth = 200; // window that opens is 200 X height
var winHeight = 200; // window that opens is with X 200
var targetWidht = 0;
var targetHeight = 0;
var orgHeight = BaseImg.height; // original height
var orgWidth = BaseImg.width; // original widht
if((orgWidth/orgHeight)>(winWidth/winHeight)){
targetWidth=winWidth;
targetHeight = (orgHeight/orgWidth)*winWidth;
}
else{
targetHeight=winHeight;
targetWidth = (orgWidth/orgHeight)*winHeight;
}
var arrArguments = new Array();
arrArguments[0] = BaseImg.src;
arrArguments[1] = targetHeight;
arrArguments[2] = targetWidth;
arrArguments[3] = (winHeight-targetHeight)/2;
arrArguments[4] = (winWidth-targetWidth)/2;
var returnVal = window.showModalDialog(&quot;seeImg.html&quot;,arrArguments,&quot;dialogHeight:&quot;+(winHeight+20).toString()+&quot;px;dialogWidth:&quot;+(winWidth+20).toString()+&quot;px;help:0;resizable:0;scroll:0;status:0&quot;);
}
}
</script>
<body onload=&quot;openPic('my.jpg');&quot;>

seeImg.html
<div id=floatingImg style=&quot;position:absolute;top:-10000;left:-10000&quot;>
<img id=image>
</div>
<script>
if(window.dialogArguments.length!=5){
alert(&quot;Open this the correct way please!!! 0=src,1=imgHeight;2=imgWidth,3=imagetop,4=imageleft&quot;);
}else{
document.getElementById('image').src=window.dialogArguments[0];
document.getElementById('image').height=window.dialogArguments[1];
document.getElementById('image').width=window.dialogArguments[2];
document.getElementById('floatingImg').style.top=window.dialogArguments[3]+5;
document.getElementById('floatingImg').style.left=window.dialogArguments[4]+5;
}
</script>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
740
rogerte
rogerte
bs6600
  • Locked
  • Question
How can I make a window wider?
Replies
1
Views
259
xwb
xwb
emmals
  • Locked
  • Question
Auto Click Button and pass through all data
Replies
0
Views
217
emmals
emmals
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
339
Offera
Offera
damipera
  • Locked
  • Question
Autobrowse in Javascript? 2
Replies
8
Views
365
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top