/    Sign up×
Community /Pin to ProfileBookmark

new window dimensions

Copy linkTweet thisAlerts:
Sep 25.2005

Hello everyone.
i am writting a function (imgWindow(url), located on an external .js file ) where you pass the url of an image and it will open a new window with the image’s dimensions, the problem is that the [B]first[/B] time it runs, the dimensions of the window are not correct, however the[B] second, third[/B] and so on times it runs, the dimensions of the window are correct. This happens in ff and ie.

the second function tryClose(), tries to prevent multiple instances of the window, and to close all the opened windows when the main page is unloaded. (so far it does what it is supposed to)

[CODE]var win=””
function imgWindow(url)
{
var img = new Image();
img.src = url;
var w = img.width;
var h = img.height;

//alert(w+”,”+h);//testing purposes
tryClose();
win = window.open(url,”,config=”height=”+h+”,width=”+w+”,location=no,status=no,resizable=yes,toolbar=no,menubar=no,scrollbars=no,directories=no”);
win.document.write(“<html><head><title>My Image Viewer</title></head><body style=’margin:0′><img src='”+url+”‘ title=”+url+” ></body></html>”);
}

function tryClose()//this will be executed at onUnload too
{
if(!win.closed&&!win==””)
{
win.self.close();
}
}[/CODE]

I believe this has to do with some sort of cache, since it only happens the first time the image is used.
any help will be very appreciated.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzSep 25.2005 — The image probably needs to finish downloading before you can get its dimensions.

Try this.
function imgWindow(url)
{
var img = new Image();
img.src = url;
[b]img.onload = function() {[/b]
var w = img.width;
var h = img.height;

<i> </i>//alert(w+","+h);//testing purposes
<i> </i>tryClose();
<i> </i>win = window.open(url,'',config="height="+h+",width="+w+",location=no,status=no,resizable=yes,toolbar=no,menubar=no,scrollbars=no,directories=no");
<i> </i>win.document.write("&lt;html&gt;&lt;head&gt;&lt;title&gt;My Image Viewer&lt;/title&gt;&lt;/head&gt;&lt;body style='margin:0'&gt;&lt;img src='"+url+"' title="+url+" &gt;&lt;/body&gt;&lt;/html&gt;");
[b]}[/b]
}
Copy linkTweet thisAlerts:
@saulssauthorSep 25.2005 — thanks^^ i will try that
Copy linkTweet thisAlerts:
@saulssauthorSep 25.2005 — the script works fine in ff, but in ie it doesnt ?

ive tried modyfing it to this:
[CODE]var win=""
var img=""
function imgWindow(url)
{
img = new Image();
img.src = url;
img.onload = doIt(url)
}
function doIt(url)
{
var w = img.width;
var h = img.height;

//alert(w+","+h);//testing purposes
tryClose();
win = window.open(url,'',config="height="+h+",width="+w+",location=no,status=no,resizable=yes,toolbar=no,menubar=no,scrollbars=no,directories=no");
win.document.write("<html><head><title>My Image Viewer</title></head><body style='margin:0'><img src='"+url+"' title="+url+" ></body></html>");
}[/CODE]
it should be the same right?

well, it works fine on ie and ff, but [B]if[/B] i clear the cache im back to the same old problem *plus* when i check the status bar of ie i get an error saying "Error:Not implemented" (which i never had with the first code)

also if you noticed, with the first code i posted, when you uncomment the the alert showing the width and height AND we open the image for the first time, we get the right dimensions on ie, and 0,0 for ff

im soo lost!
Copy linkTweet thisAlerts:
@KravvitzSep 25.2005 — img.onload = doIt(url)
That executes the function and stores the result in img.onload. That is not what you want.

Try this.
img.onload = function(){ doIt(url); }
Copy linkTweet thisAlerts:
@saulssauthorSep 25.2005 — thanks, i get that part.

now it works on ff again, but not ie.
[code=html]<html>
<script>

///////////////////////////////////////////////////////////////////
var win=""
var img=""
function imgWindow(url)
{
img = new Image();
img.src = url;
img.onload = function(){ doIt(url); }
}
function doIt(url)
{
var w = img.width;
var h = img.height;

alert(w+","+h);//testing purposes
tryClose();
win = window.open(url,'',config="height="+h+",width="+w+",location=no,status=no,resizable=yes,toolbar=no,menubar=no,scrollbars=no,directories=no");
win.document.write("<html><head><title>My Image Viewer</title></head><body style='margin:0'><img src='"+url+"' title="+url+" ></body></html>");
}

function tryClose()//this will be executed at onUnload too
{
if(!win.closed&&!win=="")
{
win.self.close();
}
}
///////////////////////////////////////////////////////////////////
</script>

<input type="button" value="test 1" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-001.jpg')">
<input type="button" value="test 2" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-002.jpg')">
<input type="button" value="test 3" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-003.jpg')">
<input type="button" value="test 4" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-004.jpg')">
<input type="button" value="test 5" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-005.jpg')">
<input type="button" value="test 6" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-006.jpg')">
<input type="button" value="test 7" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-007.jpg')">
<input type="button" value="test 8" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-008.jpg')">
<input type="button" value="test 9" onclick="imgWindow('http://www.crummy.com/pix/2001/07_utah/utah-009.jpg')">

</html>[/code]
ive chosen some random images on the internet (hopefully they will not be in you cache) to show the examples, i set up a page to see that code run:

http://myarea.com.sapo.pt/tests/openWtest.html

try it on ff and ie to see what happens please

thank you soo much
Copy linkTweet thisAlerts:
@saulssauthorSep 25.2005 — ohh nvm, ive changed the line
[CODE]win = window.open(url,'',conf...[/CODE]
to
[CODE]win = window.open('','',conf...[/CODE]
now it lets me work on the window (ie denied me the ability to write on the opened window with the src as an image)

the page linked above has been updated and it works fine!

thank you soo much for your help ? (again)
×

Success!

Help @saulss 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.24,
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,
)...