Javascript, Mozzilla, and img.src

Robert · Apr 20, 2004

Hi, here's my code to basically make an popup window open with an
image in it and resize to fit it properly. It works in IE, but not in
Mozilla (no picture shows up and it doesn't resize). It would be
opened with window.open('pic.html?'+path,...); Any ideas?? Thanks in
advance!

<body bgcolor="#000000" text="#ffffff" onLoad="loader()"
onBlur="self.close()" topmargin=0 leftmargin=0 marginheight=0
marginwidth=0>

<script language="JavaScript"></script>

<img name="image" src="" alt="" onLoad="resizer()"
style="display:block">

</body>
</html>

Vincent van Beveren · Apr 20, 2004

Hey,

window.resizeTo(document.all.image.width+10,
document.all.image.height+30);
window.focus();

Don't use the all object, its IE only. Instead, give the picture an ID,
like ID='image' and use document.getElementById('image') to retrieve the
object.

myImage = document.getElementById('image');

window.resizeTo(myImage.width+10, myImage.height+30);

Please note that in IE, if you use ID='somename', then you can not use
somename as another variable, so

image = document.getElementById('image');

might go wrong in IE.

The rest should pretty much work.

Good luck

lion · Apr 20, 2004

hi, why not use something like this - works for me...

<script>
function resizeMe(){
if (navigator.appName == 'Netscape'){
adjWidth = document.images[0].width + 0;
adjHeight = document.images[0].height + 30;
} else {
adjWidth = document.images[0].width + 0;
adjHeight = document.images[0].height + 30;
}

window.resizeTo(adjWidth, adjHeight);
window.focus();
}
</script>

Then in the body:
<body onload="resizeMe();" >

any good?

juan zamudio · Apr 20, 2004

Hi, here's my code to basically make an popup window open with an
image in it and resize to fit it properly. It works in IE, but not in
Mozilla (no picture shows up and it doesn't resize). It would be
opened with window.open('pic.html?'+path,...); Any ideas?? Thanks in
advance!

You are using document.all that only works in explorer, you should use
docuemtn.getElementById to access elements.

Mark Preston · Apr 20, 2004

Robert said:
Hi, here's my code to basically make an popup window open with an
image in it and resize to fit it properly. It works in IE, but not in
Mozilla (no picture shows up and it doesn't resize).[snip]

You are using "document.all" which is (basically) for IE only. Switch it
to use "document.getElementById ("imageid")" and give the image an ID.

By the way - it still may not work, since Mozilla and Firefox can (and
usually do) turn pop-up windows off altogether.

Michael Winter · Apr 20, 2004

Hey,

Don't use the all object, its IE only. Instead, give the picture an ID,
like ID='image' and use document.getElementById('image') to retrieve the
object.

myImage = document.getElementById('image');

The simpler approach is to use the document.images collection, which is
supported by the W3C DOM and Netscape browsers as old as v3.0. In general,
you would replace the line above with

myImage = document.images[ 'image' ];

If you need to support NN4, specify both a name and id attribute. However,
as there is only one image in this document, document.images[ 0 ] will
suffice.

window.resizeTo(myImage.width+10, myImage.height+30);

The OP should be wary of relying on the ability to resize windows. Decent
browsers will allow the user to disable that functionality to prevent
author abuse.

Please note that in IE, if you use ID='somename', then you can not use
somename as another variable, so

image = document.getElementById('image');

might go wrong in IE.

I don't think that's correct, but my experiment is based on only one
browser version so I could be wrong myself. I'll take your example of an
IMG element with the id, "image".

Under IE's (rather flawed) global identifier system, using "image" as an
object reference will allow you to directly modify the properties of that
IMG element using the identifier in any scope. As the reference represents
document content, IE won't let you overwrite the value. For example,

image = new Image();

will fail with an error. However, if you declare the variable, it is
created anew and there is no further link between the identifier and the
object it originally represented in that scope. So, using

var image;

in global scope will mean that "image" no longer refers to the IMG element
in any scope. In addition, consider

function a() {
var image;

alert( image );
b();
}
function b() {
alert( image );
}

When function a() is called, it will display "undefined" in the alert box.
That is the value of the local variable, image. When a() calls b(),
"[object]" will be displayed as the variable, image, uses the unaffected
global value.

It would be nice if someone who thoroughly understands IE's idiosyncrasies
could confirm this as behaviour across all IE versions, rather than in
just my copy of IE 6.

Mike

Michael Winter · Apr 20, 2004

hi, why not use something like this - works for me...

<script>

function resizeMe(){
if (navigator.appName == 'Netscape') {

Don't use browser detection. It is a flawed technique. Read

<URL:http://jibbering.com/faq/#FAQ4_26>

and its links.

adjWidth = document.images[0].width + 0;
adjHeight = document.images[0].height + 30;
} else {
adjWidth = document.images[0].width + 0;
adjHeight = document.images[0].height + 30;
}

Why are both of those branches exactly the same?

[snip]

Mike

Please format code when posting it. Clear formatting makes code much
easier to read and understand. Finally, don't use tabs: they won't produce
a consistent layout in all newsreaders. Some might remove them, others may
use large spaces that makes code wrap prematurely.

Robert · Apr 20, 2004

Thanks for all the quick responeses. A combination of the two
solutions fixed it. Thanks again!

Vincent van Beveren · Apr 21, 2004

myImage = document.getElementById('image');

Click to expand...

myImage = document.images[ 'image' ];

Yes, Images is supported, but I wouldn't use it. I guess its a matter of
style. Besides who still uses NN3 or 4? and if they do, they should
consider downloading a more up-to-date site. I'm sure many sites
thesedays would not work anymore with NN4 or 3

It would be nice if someone who thoroughly understands IE's
idiosyncrasies could confirm this as behaviour across all IE versions,
rather than in just my copy of IE 6.

Well, that might be true, but its not like that in Mozilla like
browsers, or Safari... So, the only reason to use var is for
InternetExplorer... therefor I just try to avoid it all-together.

Richard Cornford · Apr 21, 2004

Vincent said:
myImage = document.getElementById('image');

Click to expand...

myImage = document.images[ 'image' ];

Click to expand...

Yes, Images is supported, but I wouldn't use it. I guess its a matter
of style. Besides who still uses NN3 or 4? and if they do, they should
consider downloading a more up-to-date site. I'm sure many sites
thesedays would not work anymore with NN4 or 3

<snip>

It isn't just NN4 here, and some of those less capable browsers that
don't do W3C DOM but understand - document.images - are embedded
browsers that are not to easy to update, and may even be the latest
available on their platform. Given two methods that produce the same
results on the same browsers when they work, but one is known to also
work on many other browsers, cross-browser coding should favour the
wider supported.

If you need some additional reason for using a W3C HTML DOM specified
convenience properties when scripting an HTML document, beyond being a
standard method and support for older browsers, how about execution
speed. Potentially - getElementById will search the entire DOM looking
for a corresponding element (worst case, no optimisation), while the
images collection is unlikely to take anything like as long to search
for a named property.

Richard.

Michael Winter · Apr 21, 2004

myImage = document.getElementById('image');

Click to expand...

myImage = document.images[ 'image' ];

Click to expand...

Yes, Images is supported, but I wouldn't use it.

Any particularly good reason?

I guess its a matter of style. Besides who still uses NN3 or 4?

Hopefully, no-one. However, this isn't the case.

and if they do, they should consider downloading a more up-to-date site.

Examples have been cited in this group of libraries, and similar public
places, that still use old browser versions. Some don't have the
opportunity to change.

I'm sure many sites thesedays would not work anymore with NN4 or 3

Quite true. In any case, this isn't just about old browser support. The
collection will be supported in many browsers. As it is included in the
DOM HTML specifications, the range of browsers will also include modern
DOM-compliant browsers.

Furthermore, as Richard suggested, the collection is likely to be faster.
The document.getElementById() method has no way of knowing where it will
find a match. If it has to negotiate the entire document tree (as a tree),
it could take a significant amount of time, depending on the location of
the node. If the a list of ids is contained more conveniently, in an array
perhaps, it will obviously proceed quicker. However, if you add in the
fact that IE (wrongly) includes named elements in its getElementById()
search, that array will certainly be larger than one which is limited
purely to images.

Well, that might be true, but its not like that in Mozilla like
browsers, or Safari...

Of course not. Mozilla-based browsers (I can't comment on Safari) don't
implement IE's global identifier scheme (a good thing in my opinion).

So, the only reason to use var is for InternetExplorer...

No. The reason to use var is to control the scope of variables. As the
code is likely to be executed in a function, you should be using var to
declare the variable in local scope. You're indulging in bad practice if
you don't.

therefor I just try to avoid it all-together.

If using a particular identifier makes your code easier to understand, for
yourself and others, use it. You shouldn't allow some ridiculous scheme to
dictate how you'd prefer to write your code, especially if using var to
declare your variables (which I always use, for globals and locals) avoids
the issue.

Mike

Mark Preston · Apr 26, 2004

Jim said:
Robert said:

Hi, here's my code to basically make an popup window open with an
image in it and resize to fit it properly. It works in IE, but not in
Mozilla (no picture shows up and it doesn't resize).[snip]

Click to expand...

You are using "document.all" which is (basically) for IE only. Switch it
to use "document.getElementById ("imageid")" and give the image an ID.

Click to expand...

but .all is supported by _more_ types of browsers than gEBI, gEBI's
better for many reasons, perhaps most importantly moz's lack of
support for it and its slowness, but it's unfair to say that it's
bascially IE only.

Jim, I do accept that a lot - indeed most, as you say, - browsers can
and do "spoof" so that they either use or recognise MSIE extensions (or,
in fact, actually even identify themselves as MSIE whatever they might
actually be). But to describe all of that is both awkward and
uneccassary for most users - it is far easier to say "the standard
method is _this_ but Microsoft chose to use _this_" and to leave the
choice of what to use to the writer.

Like it or not, the fact is that the MSIE extensions simply will not
work on some browsers while the real "standards" will work on pretty
much all the browsers _including_ MSIE. It is far easier to "keep it
simple" for questions like that.

Help with code	0	Jun 12, 2022
Javascript and Netscape 4.7	3	Sep 24, 2003
timer problem in javascript	7	Jan 26, 2008
popup error (javascript)	0	Sep 8, 2003
popup error (javascript)	1	Sep 13, 2003
JavaScript and UserControl	1	Oct 17, 2007
Problems with Popup-Windows startet with Java	0	Jul 25, 2006
javascript: window.open ie6 vs ie7	2	Oct 6, 2006

Javascript, Mozzilla, and img.src

Robert

Vincent van Beveren

lion

juan zamudio

Mark Preston

Michael Winter

Michael Winter

Robert

Vincent van Beveren

Richard Cornford

Michael Winter

Mark Preston

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads