resizing problem...Urgent!

R

riki

Hi,
i have a big problem...i'm using one jscript for resizing of all of my pics
in popUp...in main html i'm having many little pics and clicking on them
they open in popUp and resize to larger version of the same pic.
now, it works fine and sometimes when i click on little one it doesn't
resize well...
this is the code:

main.html

<a href="#" onclick="javascript:
window.open('/html/popUp.html','Malo','toolbar=0,location=0,directories=0,st
atus=0,menubar=0,scrollbars=0,resizable=0');return false;">
<IMG src="/images/thumbs/Malo.jpg" border="0">
</a>

popUp.html

<script language="JavaScript">
var pic = new Image();
var url='/images/pics/'+name+'.jpg'; // name='Malo' from main.html
pic.src = url;
function resizing(){
window.location=url;
var wid=pic.width+30; // sometimes pic.width=0 and wid=30 and
sometimes is OK
var hei=pic.height+50; // sometimes pic.height=0 and hei=50 and
sometimes is OK
alert("wid="+wid+"\n"+"hei="+hei);
window.resizeTo(wid, hei);
}
</script>

</head>

<body onload="javascript: resizing();">

</body>


i don't know what hapens...maybe some pic doesn't have time to load so
pic.width and height is 0 but when i close popUp and open it again for the
same pic, it resizes well...i mean, the pic that resizes wrong second time
resizes well...
If someone know what i'm doing wrong help please!!!
Thank You very much!
 
M

Markus Ernst

riki said:
Hi,
i have a big problem...i'm using one jscript for resizing of all of my pics
in popUp...in main html i'm having many little pics and clicking on them
they open in popUp and resize to larger version of the same pic.
now, it works fine and sometimes when i click on little one it doesn't
resize well...
this is the code:

main.html

<a href="#" onclick="javascript:
window.open('/html/popUp.html','Malo','toolbar=0,location=0,directories=0,st
atus=0,menubar=0,scrollbars=0,resizable=0');return false;">
<IMG src="/images/thumbs/Malo.jpg" border="0">
</a>

popUp.html

<script language="JavaScript">
var pic = new Image();
var url='/images/pics/'+name+'.jpg'; // name='Malo' from main.html
pic.src = url;
function resizing(){
window.location=url;
var wid=pic.width+30; // sometimes pic.width=0 and wid=30 and
sometimes is OK
var hei=pic.height+50; // sometimes pic.height=0 and hei=50 and
sometimes is OK
alert("wid="+wid+"\n"+"hei="+hei);
window.resizeTo(wid, hei);
}
</script>

</head>

<body onload="javascript: resizing();">

</body>


i don't know what hapens...maybe some pic doesn't have time to load so
pic.width and height is 0 but when i close popUp and open it again for the
same pic, it resizes well...i mean, the pic that resizes wrong second time
resizes well...
If someone know what i'm doing wrong help please!!!
Thank You very much!
Click to expand...

Sorry I don't comment your script - the idea of resizing images with
Javascript just seems very strange to me. You should make two different
image files, one for the thumbnail and one for the big view. Resized
pictures always look bad on screen, as pixels are interpolated or even
extrapolated.
And: If you increase the size you don't have enough data, and if you make it
smaller you transfer too much data.
 
R

riki

yes i have two different image files of the same pic...little ones in the
/images/thumbs/ folder and big ones in the /images/pics/ folder...
 
R

riki

acctually i'm trying to resize html popUp window to the widht and height of
the pics dimension that opens in it...
i'm not trying to resize the acctuall pic itself
 
M

Markus Ernst

riki said:
acctually i'm trying to resize html popUp window to the widht and height of
the pics dimension that opens in it...
i'm not trying to resize the acctuall pic itself
Click to expand...

I see... so I had a look at your code. At first sight it is actually strange
that it sometimes works. The url and pic variables are declared as local
(with "var") so they should not be valid inside the function. You can try
the following:
- either remove all appearances of "var"
- or remove the function. Just delete the "function resizing(){" and "}"
lines in the script section and the onLoad handler in the body tag. If the
code is not embedded in the function it will be executed on load
automatically, and all variables will be recognised.

HTH

Markus
 
R

riki

thank you very much Markus...I'll try that later when i'll come home.
tell you results tomorow
 
R

Richard Cornford

Markus Ernst wrote:
I see... so I had a look at your code. At first sight it
is actually strange that it sometimes works.
Click to expand...

It is not that strange. Sometimes working is the best that can be hoped
for from this script but even in a supporting environment the
asynchronous loading of the image file that may result for assigning a
value to the - src - popery of an Image object, combined with the
asynchronous replacement of the current execution context invoked by
assigning a value to the - window.location - object, will mean that the
viability of reading width and height values from the Image object will
depend on many local and network performance and caching variables. If
the image file has not been loaded/processed to the point of making its
dimensions available (assuming the implementation does that anyway, not
all do) or the - pic - global variable is destroyed by the instruction
to replace the current page, then there is little chance of being able
to read the width and height of the image.
The url and pic variables are declared as local
(with "var") so they should not be valid inside the
function.
Click to expand...
<snip>

Those variables are declared in the global context so they will be
global variables and should be available from within the function
(subject to there possibly being freed as a consequence of the
assignment to window.location).

Richard.
 
R

riki

thank you all very much for your answers...
i'll have to think what's the easiest way to solve this...
i'm having about 20 thumbs per page and each big pic that opens in popUp is
7 or 8 kb in size.
if i'm using preloading like this:

//preload image files
image_1 = new Image()
image_1.src = "../images/pics/bigpicname1.jpg"
image_2 = new Image()
image_2.src = "../images/pics/bigpicname2.jpg"
image_3 = new Image()
image_3.src = "../images/pics/bigpicname3.jpg"
etc. etc...

can i call later this pic "bigpicname1.jpg" (by it's name) or just "image_1"
(preloaded img)???
if i must call every pic like "image_#" what hapens if i call "image_20" and
only the first 10 has preloaded???
 
R

Richard Cornford

mscir wrote:
function popup(url,windowname,width,height) {
width=(width)?width:screen.width/3;
height=(height)?height:screen.height/3;
var screenX = (screen.width/2 - width/2);
var screenY = (screen.height/2 - height/2);
Click to expand...

Dimensions and positioning based on screen.width/height are problematic
at best. The - availWidth - and - availHeight - properties, where
available and properly implemented, should take into account details of
the desktop such as taskbars, which have no fixed number, location or
dimensions.

But even then, screen dimensions are meaningless to, for example,
Opera's MDI interface, and positioning based on those dimensions can be
terribly wrong in multi-monitor configurations.
var features= "width=" + width + ",height=" + height;
features += ",screenX=" + screenX + ",left=" + screenX;
features += ",screenY=" + screenY +",top=" + screenY;
var mywin=window.open(url, windowname, features);
if (mywin)
mywin.focus();
return mywin;
}

var myimage = new Image();
var popupwin=null;

myimage.onload=function(){
popupwin=popup(this.src,"pic",this.width+20,this.height+20)
}
Click to expand...
<snip>

It is an unfortunate truth that only a subset of Image object
implementations will trigger an onload event when (and if) the browser
downloads the corresponding image file, and also that only a subset of
Image object implementations will transfer the dimensions of any image
file downloaded into the - width - and - height - properties of the
Image object. Making the whole approach inappropriate outside of an
Intranet. It is also unnecessary to need to dynamically read the image
dimensions as knowing the URL implies knowing the dimensions, trying to
take this shortcut is a route to otherwise avoidable failure with many
browsers.

Adding fixed values to take account of window chrome and default margins
and paddings is not appropriate as all of those properties are variable
under user control and any fixed value can only be the default (possibly
for only a limited range of browsers) on one OS/Window manger. One of
the main reasons that opened windows should not be prevented form being
resizable (as they are in the example - popup - function).

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Timing problem 4
geting hold of image??? 4
popUp dimension... 5
image onload fires too early. 1
Which solution of these two is best 0
Help with my responsive home page 2
ff event problem 1
Javascript, Mozzilla, and img.src 11

Members online

Total: 39 (members: 3, guests: 36)
Robots: 173

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,150
Latest member
MakersCBDReviews

Latest Threads

Top