By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,282 Members | 1,538 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,282 IT Pros & Developers. It's quick & easy.

resizing problem...Urgent!

P: n/a
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,directori es=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!
Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
"riki" <ri******@hotmail.com> schrieb im Newsbeitrag
news:c1**********@ls219.htnet.hr...
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,directori es=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!


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.

--
Markus
Jul 20 '05 #2

P: n/a
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...
Jul 20 '05 #3

P: n/a
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
Jul 20 '05 #4

P: n/a
"riki" <ri******@hotmail.com> schrieb im Newsbeitrag
news:c1**********@ls219.htnet.hr...
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


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
Jul 20 '05 #5

P: n/a
thank you very much Markus...I'll try that later when i'll come home.
tell you results tomorow
Jul 20 '05 #6

P: n/a
Markus Ernst wrote:
<snip>
I see... so I had a look at your code. At first sight it
is actually strange that it sometimes works.
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.

<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.
Jul 20 '05 #7

P: n/a
riki wrote:
thank you very much Markus...I'll try that later when i'll come home.
tell you results tomorow


Here's one way to detect the image dimensions, it requires that images
be preloaded so it won't be useful for sites where preloading would take
too much time:

http://www.fontstuff.com/mailbag/qfrontpage01.htm

From the web page...

"In my tutorial Making a Browser Window Fit an Image I showed how you
can use JavaScript to open an image in its own window, exactly sized to
fit the image. The code uses a hyperlink that calls a JavaScript
function, and provides it with the URL of the image to be displayed, as
well as its height and width in pixels. But can the same thing be
achieved without knowing the size of the image?

The answer is yes - providing the images are preloaded by the browser.
Here's an example:"

<script language="javascript" type="text/javascript">
// preload image files
image_1 = new Image()
image_1.src = "../images/qfrontpage01a.jpg"
image_2 = new Image()
image_2.src = "../images/qfrontpage01b.jpg"
image_3 = new Image()
image_3.src = "../images/qfrontpage01c.jpg"

// DetectImageSize function
function DetectImageSize(picName,picTitle){
picURL=picName.src
newWindow=window.open(picURL,'newWin','toolbar=no,
width='+picName.width+',height='+picName.height)
newWindow.document.write('<html><head><title>'+pic Title+'
<\/title><\/head><body background="'+picURL+'"><\/body><\/html>')
newWindow.resizeBy(picName.width-newWindow.document.body.clientWidth,
picName.height-newWindow.document.body.clientHeight)
newWindow.focus()
}
//-->
</script>

Jul 20 '05 #8

P: n/a
riki wrote:
thank you very much Markus...I'll try that later when i'll come home.
tell you results tomorow


Here's a different way to do it, there is a delay while the image is
loaded before it can be displayed, if you use this I'd let the user know
something is happening while they wait (on slower connections).

http://www.webxpertz.net/faqs/jsfaq/popup.php#popupimg

How can I open a window the size of an image?

You can load the image, find out dynamically what size it is, and then
open a window the size you need.

<html>
<head>
<title> Popup Images </title>

<script type="text/javascript">

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);
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.h eight+20)
}

function foo(what){
if (popupwin && !popupwin.closed)popupwin.close();
myimage.src=what;
}
</script>
</head>

<body>
<a href="IMG_0143.jpg" onclick="foo(this.href);return false;">Her
Indoors</a>
<a href="IMG_0156.jpg" onclick="foo(this.href);return false;">One Little
Angel</a>
</body>
</html>
Jul 20 '05 #9

P: n/a
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???

Jul 20 '05 #10

P: n/a
mscir wrote:
<snip>
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);
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.h eight+20)
}

<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.
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.