resizing problem...Urgent!

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,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

Subscribe Post Reply

2254

Markus Ernst

"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

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...

Jul 20 '05 #3

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

Jul 20 '05 #4

Markus Ernst

"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

riki

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

Jul 20 '05 #6

Richard Cornford

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

mscir

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

mscir

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

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???

Jul 20 '05 #10

Richard Cornford

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

Similar topics

problem resizing multiple images

by: Alex Hopson | last post by:

I'm using the code below to loop through some images and resize each image twice, once to create a thumbnail and once to create a small image. The page stops loading around the 38th image out of...

PHP

Resizing a form

by: Søren Reinke | last post by:

Hi there I have a little problem. How do i make sure that a graph is not redrawn while the form with the graph is being resized ? I have tried to add a mouse up/down event handler on the...

C# / C Sharp

Left and Right hand splitting and resizing

by: bruno | last post by:

I have a .aspx with a TreeView in the left hand and a GridView or a FormView in the right hand. I would like to resize the two sides like in http://msdn.microsoft.com/library/default.asp, but I...

ASP.NET

Layout tears apart when resizing text

by: tomasio | last post by:

Dear NG, years have passed and I am still more designer than programmer. I build a new version of my website which has a few nasty bugs, especially on my startpage: Resizing text brakes the...

HTML / CSS

Curses and resizing windows

by: Nick ! | last post by:

Chris Share <usenet at caesium.me.ukwrote: http://web.cs.mun.ca/~rod/ncurses/ncurses.html#xterm says "The ncurses library does not catch signal, because it cannot in general know how you want...

Python

Question about handling form resizing events.

by: JDeats | last post by:

I have a WinForms based application written for the .NET Framework 2.0 and in this application I need to be able to be able to take some action in code when the user finishes resizing the form. ...

C# / C Sharp

Help with dynamic table resizing code

by: dli07 | last post by:

Hello, I'm trying to convert a piece of code that creates a dynamic vertical resizing bar in a table from internet explorer to firefox. It's based on a post from...

Javascript

Resizing textboxes

by: Steve | last post by:

Hi All I have written some code to rescale my windows forms application forms depending on the users screen resolution The application is designed for 1024 x 768 but some customers have 19"...

Visual Basic .NET

image resizing does not work for large size images

by: mishrarajesh44 | last post by:

hii all, I am facing a problem currently.. i have a script for image uploading and resizing.. the image uploading takes place properly for every size images.. but, the resizing works for...

PHP

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

Access Europe meeting on Wed 4 Oct - The future of Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

How to find best mobile app development company in usa

by: Aliciasmith | last post by:

In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...

Mobile Development

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

by: tracyyun | last post by:

Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...

Networking - Hardware / Configuration

Send Current Object to PDF

by: NeoPa | last post by:

Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...

Microsoft Access / VBA

Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA

Access Europe Meeting - Wed 6 Dec - Streamline Your Import/Export Spec Workflow with VBA Classes

by: isladogs | last post by:

The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

Microsoft Access / VBA

Take a Database to the Next Level

by: GKJR | last post by:

Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

Microsoft Access / VBA