JavaScript sometimes working ok and sometimes not

[Kamyk]

Hello all!

Could you tell me where is the error on the below code, because the script
is sometimes
working correctly and sometimes is not working correctly. I want my new
window with picture
to be fitted/enlarged to original size. The page on the below address:
http://www.kapy.bydg.pl/~marcinz/stolarnia/.
I have Windows XP and IE 6.0. and everything works correctly. If I run the
page on Win 2000, IE 5.0.
it is not good-working.

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
function funkcja(rysunek)
{

obrazek=new Image()
obrazek.src=rysunek

zmienna_w=obrazek.width+50
zmienna_h=obrazek.height+50

zmienna='toolbar=yes,location=yes,scrollbars=yes,w idth=' + zmienna_w +
',height=' + zmienna_h

return window.open(rysunek,'oknoObr',zmienna)

}

</SCRIPT>
.....
<a href="#"
OnClick="funkcja('WojtStol_files/drzwi/wewnetrzne/100_0114.gif');"><img
src="WojtStol_files/drzwi/wewnetrzne/100_0114.gif" width=150 height=100
border=1></a>
......

[Thomas 'PointedEars' Lahn]

Kamyk wrote:

Could you tell me where is the error on the below code, because the script
is sometimes working correctly and sometimes is not working correctly.
[...]
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
Omit the deprecated `language' attribute. And although HTML is not
generally case-sensitive, you should use lowercase characters only
where possible.
function funkcja(rysunek)
{

obrazek=new Image() ^[1] [2]^^^^^ ^[3]

[1] Variables should always be declared, using the `var' keyword.

[2] Host objects like Image should be tested prior to usage:
<http://pointedears.de/scripts/test/whatami>, paragraph 2.

[3] Do not rely on automatic semicolon insertion but end all
statements with a semicolon.
obrazek.src=rysunek

zmienna_w=obrazek.width+50
zmienna_h=obrazek.height+50
Most certainly it does not work because image loading is done asynchronously
by the UA (while the script engine continues interpretation) and so the
`width' and `height' properties do not return proper values prior. You
should use the `onload' event which should fire once the image has been
loaded and so its dimensions can be obtained:
[...]
<a href="#"
OnClick="funkcja('WojtStol_files/drzwi/wewnetrzne/100_0114.gif');"><img
src="WojtStol_files/drzwi/wewnetrzne/100_0114.gif" width=150 height=100
border=1></a>
The above will not work without script support. The below quick hack
should do:

var obrazek, intv, w;

function funkcja(rysunek)
{
if (typeof Image != "undefined")
{
obrazek = new Image()

if (window.setInterval)
{
intv = window.setInterval(
(function()
{
if (obrazek.loaded && w)
{
window.clearInterval(intv);
if (w.innerWidth)
{
w.innerWidth = obrazek.width + 50;
}
else if (window.clientWidth)
{
w.clientWidth = obrazek.width + 50;
}

if (w.innerHeight)
{
w.innerHeight = obrazek.height + 50;
}
else if (w.clientHeight)
{
w.clientHeight = obrazek.height + 50;
}

if (w.focus) w.focus();
}
}).toString(),
100);
}

obrazek.onload = function()
{
this.loaded = true;
}

obrazek.src = rysunek;

return (w = window.open(
rysunek,
'oknoObr',
'toolbar=yes,location=yes,scrollbars=yes'));
}
}

...

<a href="WojtStol_files/drzwi/wewnetrzne/100_0114.png"
onclick="return !funkcja(this.href);"<img src="WojtStol_files/drzwi/wewnetrzne/100_0114_thumbnail.png"

alt="Alternative text -- required!"
width="150" height="100" border="1"></a>

Another alternative which I consider more reliable than your (improved)
approach is generating an entire HTML document to contain the image in
the popup window and use the `onload' handler of either its `body'
element or the `img' element instead, as implemented in enlargeImg():

<http://pointedears.de/scripts/window.js>
PointedEars

[Thomas 'PointedEars' Lahn]

Kamyk wrote:

Could you tell me where is the error on the below code, because the script
is sometimes working correctly and sometimes is not working correctly.
[...]
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
Omit the deprecated `language' attribute. And although HTML is not
generally case-sensitive, you should use lowercase characters only
where possible.
function funkcja(rysunek)
{

obrazek=new Image() ^[1] [2]^^^^^ ^[3]

[1] Variables should always be declared, using the `var' keyword.

[2] Host objects like Image should be tested prior to usage:
<http://pointedears.de/scripts/test/whatami>, paragraph 2.

[3] Do not rely on automatic semicolon insertion but end all
statements with a semicolon.
obrazek.src=rysunek

zmienna_w=obrazek.width+50
zmienna_h=obrazek.height+50
Most certainly it does not work because image loading is done asynchronously
by the UA (while the script engine continues interpretation) and so the
`width' and `height' properties do not return proper values prior. You
should use the `onload' event which should fire once the image has been
loaded and so its dimensions can be obtained:
[...]
<a href="#"
OnClick="funkcja('WojtStol_files/drzwi/wewnetrzne/100_0114.gif');"><img
src="WojtStol_files/drzwi/wewnetrzne/100_0114.gif" width=150 height=100
border=1></a>
The above will not work without script support. The below quick hack
should do:

var obrazek, intv, w;

function funkcja(rysunek)
{
if (typeof Image != "undefined")
{
obrazek = new Image()

if (window.setInterval)
{
intv = window.setInterval(
function()
{
if (obrazek.loaded && w)
{
window.clearInterval(intv);
if (w.innerWidth)
{
w.innerWidth = obrazek.width + 50;
}
else if (window.clientWidth)
{
w.clientWidth = obrazek.width + 50;
}

if (w.innerHeight)
{
w.innerHeight = obrazek.height + 50;
}
else if (w.clientHeight)
{
w.clientHeight = obrazek.height + 50;
}

if (w.focus) w.focus();
}
},
100);
}

obrazek.onload = function()
{
this.loaded = true;
}

obrazek.src = rysunek;

return (w = window.open(
rysunek,
'oknoObr',
'toolbar=yes,location=yes,scrollbars=yes'));
}
}

...

<a href="WojtStol_files/drzwi/wewnetrzne/100_0114.png"
onclick="return !funkcja(this.href);"<img src="WojtStol_files/drzwi/wewnetrzne/100_0114_thumbnail.png"

alt="Alternative text -- required!"
width="150" height="100" border="1"></a>

Another alternative which I consider more reliable than your (improved)
approach is generating an entire HTML document to contain the image in
the popup window and use the `onload' handler of either its `body'
element or the `img' element instead, as implemented in enlargeImg():

<http://pointedears.de/scripts/window.js>
PointedEars