Table not resizing in Firefox after I change contained image dimensions

[Dirglemore]

Hello all,

I appologize in advance; I'm not a javascript expert by any stretch.

If a particular image on my page doesn't fit within the browser
window, I shrink it:

ratio = document.images.height/document.images.width;
document.images.width = viewWidth;
document.images.height = ratio*document.images.width;

Using Internet Explorer, the table that contains this image is also
then resized (to the new image size) and the text within the table is
wrapped accordingly. Under Firefox, however, the table dimensions
aren't re-evaluated and the table's text continues to extend beyond
the limits of the browser window (you have to use the horizontal
scrollbar to read the text, which I was trying to avoid).

Does anybody know how I can force Firefox to re-evaluate the table
dimensions after I change this images' dimensions?

Thx in advance!

 

[Dirglemore]

Thanks for the tip Randy, but unfortunately it didn't work. I assume
that's because it's just reloading the page so it's just repeating
exactly the scenario I described. I need to somehow tell the browser
to just redimension the table.

 

[Thomas 'PointedEars' Lahn]

If a particular image on my page doesn't fit within the browser
window, I shrink it:

ratio = document.images.height/document.images.width;
document.images.width = viewWidth;
document.images.height = ratio*document.images.width;

Do you know that browsers usually are not capable of cubic scaling, and so
not of anti-aliasing? Do you know that several recent user agents have
their own feature of resizing images that are too large for the viewport?
Using client-side scripting to resize images automatically is not a wise
approach. Why you just don't publish such large images (that everybody has
to download, resized or not)?

Using Internet Explorer, the table that contains this image is also
then resized (to the new image size) and the text within the table is
wrapped accordingly. Under Firefox, however, the table dimensions
aren't re-evaluated and the table's text continues to extend beyond
the limits of the browser window (you have to use the horizontal
scrollbar to read the text, which I was trying to avoid).

Does anybody know how I can force Firefox to re-evaluate the table
dimensions after I change this images' dimensions?

Maybe. Show some code first.


PointedEars

 

[Dirglemore]

Do you know that browsers usually are not capable of cubic scaling, and so

not of anti-aliasing?

Yeah, I know. But the images aren't huge, so it's tolerable.

Using client-side scripting to resize images automatically is not a wise
approach. Why you just don't publish such large images (that everybody has
to download, resized or not)?

Client-side scripting was fast to implement, the quality if fine for
my purposes and the extra download time is only a fraction of a
second. So I'm not sure why it isn't a wise approach. What is a user
agent? This is a simple site that I don't have a lot of time to spend
tweaking. It's also important that it be broadly compatible (hence
the original question). Please send a link to more information if you
think it will help.

Maybe. Show some code first.

I did. What else would you like to see? It's just a table with a
cell containing an image and another below it containing text. I
didn't think posting html would help much.

thanks

 

[Thomas 'PointedEars' Lahn]

Client-side scripting was fast to implement,

The built-in feature is already implemented (I know of it in IE 6, IE 7 and
Gecko 1.7+) and it works better than and without client-side scripting.

the quality if fine for my purposes and the extra download time is only
a fraction of a second. So I'm not sure why it isn't a wise approach.

Because it needs client-side script support to work.

What is a user agent?

The superset of "web browser".

This is a simple site that I don't have a lot of time to spend
tweaking.

So stop tweaking, it is unnecessary.

It's also important that it be broadly compatible (hence the original
question).

I think you will find more people who use UAs with the aforementioned
feature than people having client-side script support available and the
corresponding DOM feature properly supported.

I did. What else would you like to see? It's just a table with a
cell containing an image and another below it containing text. I
didn't think posting html would help much.

My bad. I read you first as having tried to resize the table with
scripting, so posting that code would have been necessary. However, given
your description, I would regard the observed behavior as a rendering bug;
just one more reason why you should not follow the path taken.


PointedEars

 

[Dirglemore]

Ok, I think I understand what you're suggesting, in principle. But
could you give some sample code? (or at least show me where to look)
I can't seem to find anything that would allow me to resize an image
to ensure that it will fit within the browser's window. Any reference
I've found seems to do it using client-side code, as I did.

much appreciated

 

[Thomas 'PointedEars' Lahn]

Ok, I think I understand what you're suggesting, in principle.

I don't think so.

But could you give some sample code? (or at least show me where to look)

Try http://lxr.mozilla.org/ for Gecko-based UAs like Firefox. IE isn't Open
Source, so you are out of luck.

I can't seem to find anything that would allow me to resize an image
to ensure that it will fit within the browser's window.

As I said, it is a *built-in* feature, so no additional or special code on
your part is necessary. I have named some (probably not all) of the UAs
where it exists -- what else do you need? Move the pointer cursor on a
large `img' element, maybe wait for a few seconds and see what happens.
I'm not kidding here.


PointedEars

 

[Dirglemore]

Ok, now I'm confused. Are you just referring to the feature that both
IE and Firefox have which automatically resizes images? That only
applies if you direclty open an image from either browser. Mine are
embedded within a webpage and, as such, neither browser will touch
their dimensions (as far as I can tell).

 

[dogatemycomputer]

You might not be "kidding here" but you - clearly - missed the boat. Try
reading the thread and try to realize what the OP is trying to do. And
no, what he is trying to do is *not* a "built-in" feature on a web-page.

I'm new to Javascript myself. Would either of you mind stepping down
a few notches and explaining, in detail, exactly what you two are
talking about? I know both of you have probably have a complete
understanding of exactly what the other is talking about (and are
probably getting a good laugh at our collective expense) but both of
you are being utterly unhelpful if not, at the very least, maliciously
ambivalent.

In all honesty if everyone knew everything then nobody would ever both
to ask a question and this newsgroup would cease to exist because it
would be a pointless exercise in futility to ask questions we already
have the answer too. In "your" collective case the answers are simply
restating an obvious point that can only be understood by "your"
collective few who already know the answer to the question. The rest
of us who "troll" (and yes.. I said troll) these newsgroups for
enlightenment need a better guide so if you won't explain the answer
in a context that the rest of us can understand then wouldn't it be
better to not say anything at all? Your like 12 year old children
trying to impress the high schoolers without realizing how silly you
look from this angle.

(and don't bother flaming me because I already have my flame-retardant-
suit firmly attached)

 

[Dirglemore]

Ok, so back to the problem at hand. I've ended up just using a simple
hack which works for now. If anyone has a better suggestion, by all
means, let me know.

I just give the table an id:

<TABLE width="100%" id="funTable">
<IMG src="fun.jpg">
<TABLE>

Then in the function that is called when the resize event is fired:

...
document.getElementById('funTable').width =
document.body.clientWidth - 20;
...

I'd rather just tell the table to redraw/redimension itself, rather
than specify an exact width.

cheers

 

[dogatemycomputer]

What Thomas is referring to is the ability to "resize" an image using
the browser by pointing at an image and then the browser puts up the
magnifying glass that allows you to resize it larger/smaller. It only
works on an image that is loaded directly into the browser, it doesn't
work on images that are loaded as the src of an img tag.

What I was referring to is Thomas' inate ability to totally
misunderstand what he read and come up with something as off the wall as
what he did as a reply to it.

Could you tell me if Dirglemore's solution is appropriate then?

Nah, flame retardant suits don't work around here, we use Kryptonite
instead of flames

Lex would be proud! LOL.

 

[David Mark]

Ok, so back to the problem at hand. I've ended up just using a simple
hack which works for now. If anyone has a better suggestion, by all
means, let me know.

I just give the table an id:

<TABLE width="100%" id="funTable">

Presumably you meant style="width:100%".

<IMG src="fun.jpg">
<TABLE>

Then in the function that is called when the resize event is fired:

...
document.getElementById('funTable').width =
document.body.clientWidth - 20;

Presumably you meant:

var el = document.getElementById('funTable');
if (el && el.style) el.style.width = (document.body.clientWidth - 20)
+ 'px';

And what is the significance of 20?

...

I'd rather just tell the table to redraw/redimension itself, rather
than specify an exact width.

But you did set an exact width. Also, I am confused as to why the
width is initially at 100% and then cropped to the body's width minus
20 pixels on the first resize. What does this solve? It doesn't seem
related to the OQ.

 

[David Mark]

On Aug 7, 7:47 pm, "(e-mail address removed)"[snip]

Could you tell me if Dirglemore's solution is appropriate then?

I don't see it as a specific solution to your problem, but it does
(sort of) illustrate how to resize an element with script.

To better illustrate your issue, post a link to a sample page or post
the complete markup and script.