/    Sign up×
Community /Pin to ProfileBookmark

Problem with popup script

Copy linkTweet thisAlerts:
Mar 09.2006

Hello,

I am helping a freind with a javascript.

I gave him the code to a popup image script. When you click on the thumbnail image, a larger image should load into the popup.

The script works perfectly with Firefox but when I use Internet Explorer, the popup image is being cut off on the right side of the image.

The popup window is supposed to automatically resize the window the the image but it’s not doing it right with Internet Explorer or Opera. Firefox does work correctly.

Can anyone give me advice on how to fix this?

Aussie

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMar 10.2006 — IE is probably reserving space for scrollbars. When you specify the features for the popup window, are you specifying that the window is not resizeable and should have no scrollbars?
Copy linkTweet thisAlerts:
@aussieauthorMar 10.2006 — Yes. The script is specifying that the window is not resizeable and should have no scrollbars.

I didn't write the script.

If you have time, you could look one image for me. I have set up a page at

http://www.freewebs.com/ricksxstitch/non/zpopup.html

The photo frame surrounding the image is also run by a script.

Aussie
Copy linkTweet thisAlerts:
@phpnoviceMar 10.2006 — Your popup has this code in it:
<i>
</i>function reSizeToImage(){
if (isIE){
window.resizeTo(100,100);
width=[COLOR=Red]100-[/COLOR](document.body.clientWidth-document.images[0].width);
height=[COLOR=Blue]100-[/COLOR](document.body.clientHeight-document.images[0].height);
window.resizeTo(width,height);
}
if (isNN){
window.innerWidth=document.images["George"].width;
window.innerHeight=document.images["George"].height;
}
}

I think the red part should, perhaps, not be there -- or require adjustment. The following is the code I use in a similar type of popup image viewer:
[code=html]
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onload="window.resizeTo(document.images[0].width, document.images[0].height); return true;"
onresize="window.resizeTo(document.images[0].width, document.images[0].height); return true;">
[/code]
Admitedly, this does not work in Mozilla -- because of [b].resizeTo()[/b] -- but this displayes the correct image area in IE.
Copy linkTweet thisAlerts:
@phpnoviceMar 10.2006 — OK... I've tested it further and, you're correct. Even my code is not working correctly. I played with it and found that the following adjustment was necessary in order to achieve the correct image area in a popup that has both a title bar and a status bar showing:

window.resizeTo(document.images[0].width+12, document.images[0].height+60);

Thus, the left and right window borders are approximately 6 pixels in width each and the top and bottom window borders (bars) are approximately 30 pixels in height each. So, what is the solution for an automatic calculation? Got me swinging. ?

On another note... I tried adding cross-browser support for my image_viewer popup and I find that the Firefox window is not being resized -- no errors, but no action either. What is the solution for that?
<i>
</i>function resize2Image(){
if (document.all){
window.resizeTo(document.images[0].width+12, document.images[0].height+60);
} else {
window.innerWidth = document.images[0].width;
window.innerHeight = document.images[0].height;
}
return true;
}
window.onload = resize2Image;
Copy linkTweet thisAlerts:
@aussieauthorMar 10.2006 — Thanks for your help. I don't have the faintest idea what I'm doing with javascript. I find a script, copy and paste it into a html file and it usually works.

I did try making the changes you suggested but when I uploaded the new script I didn't get any popup at all. When I saved the changes all the script ran together, is that supposed to happen? Obviously I did something wrong when following your instructions.
Copy linkTweet thisAlerts:
@phpnoviceMar 10.2006 — I thought about the code you posted, and I came up with this version of it -- which I understand much better how it is supposed to work:
<i>
</i>function reSizeToImage(){
if (isIE){
window.resizeTo(100,100);
var adjWidth = document.images[0].width + (100 - document.body.clientWidth);
var adjHeight = document.images[0].height + (100 - document.body.clientHeight);
window.resizeTo(adjWidth, adjHeight);
}
if (isNN){
window.innerWidth = document.images["George"].width;
window.innerHeight = document.images["George"].height;
}
}

If you make this change, what kind of results do you get?
Copy linkTweet thisAlerts:
@aussieauthorMar 10.2006 — As soon as I make any changes to the script, it doesn't work for me, no popup at all.

Thanks for your help. I am hopeless so please don't waste any more of your time on me.
Copy linkTweet thisAlerts:
@phpnoviceMar 11.2006 — Sorry to hear that. ?
×

Success!

Help @aussie 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...