/    Sign up×
Community /Pin to ProfileBookmark

Anyone see any problems with this?

Copy linkTweet thisAlerts:
Jun 12.2008

The following code is run in a popup window. The popup display an image. The code loads the image, obtaining the source and alt text from the source window. The code also determines the image dimensions and then resizes the window according to the dimensions. I tried just about every combination of code you could imagine, but always hit problems with the image not actually having been loaded at the time I need the dimensions. onload didn’t work because the entire code needed to be placed in onload or it didn’t seem to function at all, hence the need for the “wait”.
the following code does work, but I have a few points I am slightly concerned about! ( My JS skills are almost non-existent!) I would appreciate some constructive comments on the code:

[QUOTE]

function resize()
{
temp=new Image();
temp.src = window.opener[“imgSrc”];
if (temp.complete){
document.mainImage.src=window.opener[“imgSrc”];
document.mainImage.alt=window.opener[“imgAlt”];
document.getElementById(“textCell”).innerHTML=window.opener[“imgAlt”];
popHeight=temp.height+220;
popWidth=temp.width+120;
window.resizeTo(popWidth,popHeight);
}
else {
window.setTimeout(‘resize()’, 100);
}
}

window.onload=resize;

[/QUOTE]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Logic_AliJun 12.2008 — T. I tried just about every combination of code you could imagine, but always hit problems with the image not actually having been loaded at the time I need the dimensions. onload didn't work because the entire code needed to be placed in onload or it didn't seem to function at all, hence the need for the "wait".

the following code does work, but I have a few points I am slightly concerned about! ( My JS skills are almost non-existent!) I would appreciate some constructive comments on the code:[/QUOTE]The best way is to use an onload handler, then nothing happens until the image is loaded. Dont apply the .src file until the handler is installed.

Try this (untested):

[CODE]
function resize()
{
document.images.mainImage.onload=function()
{

this.alt=window.opener["imgAlt"];
document.getElementById("textCell").innerHTML=window.opener["imgAlt"];
popHeight=temp.height+220;
popWidth=temp.width+120;
window.resizeTo(popWidth,popHeight);
}
document.images.mainImage.src=window.opener["imgSrc"];
}

window.onload=resize;
[/CODE]
Copy linkTweet thisAlerts:
@SuzanneBauthorJun 12.2008 — I almost despair. It took me days to come up with that, and in seconds you came up with something far better.

Ha ha!

Thank you. It works a treat.
Copy linkTweet thisAlerts:
@Declan1991Jun 12.2008 — In seconds you came up with something far better.[/QUOTE]
Practice makes perfect!
Copy linkTweet thisAlerts:
@SuzanneBauthorJun 18.2008 — Apparently not that perfect; it doesn't work under Firefox.

ha ha!, sorry, I couldn't resist the joke. But, seriously, it doesn't work under Firefox. Any clue?
Copy linkTweet thisAlerts:
@Declan1991Jun 18.2008 — <i>
</i>popHeight=temp.height+220+"px";
popWidth=temp.width+120+"px";maybe?
Copy linkTweet thisAlerts:
@SuzanneBauthorJun 18.2008 — Don't think so. It seems to stop IE7 working for sure..
Copy linkTweet thisAlerts:
@Logic_AliJun 18.2008 — Apparently not that perfect; it doesn't work under Firefox.

ha ha!, sorry, I couldn't resist the joke. But, seriously, it doesn't work under Firefox. Any clue?[/quote] What is [I]window.opener["imgSrc"][/I] and can you post the entire code for both documents?
Copy linkTweet thisAlerts:
@SuzanneBauthorJun 22.2008 — Hi Logic Ali,

window.opener["imgSrc"] is defined in the opening window:


[CODE]var imgAlt,imgSrc,pageType;
function zoom(Name)
{

imgSrc=document.images[Name].src;
posDirName= imgSrc.indexOf("images_");
if ( posDirName != -1){
imgSrc=imgSrc.substring(0,posDirName+9)+'_large'+imgSrc.substring(posDirName+9,imgSrc.length);
}
imgAlt=document.images[Name].alt;
popWin=window.open('zoom.php','zoomWindow','width='+500+',height='+400+',scrollbars,resizable');
popWin.focus();
}
function closeZoom()
{
if (popWin){
if (!popWin.closed){
popWin.close();
}
}
}
popWin=null;
pageType=0;
window.onunload=closeZoom;
[/CODE]

All that does is open a window 500 by 400 and sets some data.

Then in the window that is created, the image source and text are set to the information provided by the opening window, then it is all resized to according the image:

function resize()

{

document.images.mainImage.onload=function()

{


this.alt=window.opener["imgAlt"];

document.getElementById("textCell").innerHTML=window.opener["imgAlt"];

popHeight=mainImage.height+220;

popWidth=mainImage.width+120;

if (popWidth>(screen.width*0.6)){

popWidth=screen.width*0.6;

}

if (popHeight>(screen.height*0.80)){

popHeight=screen.height*0.80;

}

if (popWidth<440){

popWidth=440;

}

window.resizeTo(popWidth,popHeight);

}

document.images.mainImage.src=window.opener["imgSrc"];

}

window.onload=resize;[/QUOTE]

It all works in IE, and mostly works in Firefox. The final resize doesn't happen in Firefox. The window remains at 500x400.
×

Success!

Help @SuzanneB spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...