niconedz wrote:[color=blue]
> Hi
>
> The following code works fine in IE but not Firefox.
> It's a little script that zooms an image and resizes the window to fit.[/color]
Not all users or all browsers will let you re-size the window, so expect
that it won't work at least sometimes.
[color=blue]
> Can anybody tell me what's wrong?[/color]
Normally you should explain what you consider 'wrong'. Did you get any
errors from the Firefox script console?
[color=blue]
>
> Thanks
> Nico
>
> == btw.. sorry for the long post ==[/color]
That's OK *if* you make it so the code can be copied and pasted into a
file, then run without error. Use 2 or 4 spaces for indents, not tabs
or 8 spaces or so. Manually break lines at about 70 characters to
prevent news readers from automatically breaking them and introducing
errors.
[color=blue]
>
> <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> <title>Aphrodite Hills</title>
> <style type="text/css">
> <!--
> **SNIPPED**
> -->
> </style>[/color]
For the sake of posting sample code, just ditch the style element
completely. Using HTML comment tags inside a style element may cause
problems of itself.
[color=blue]
>
> <script language="JavaScript">[/color]
The language attribute is depreciated, type is required:
<script type="text/javascript">
[color=blue]
> <!--[/color]
Don't use HTML comment tags inside script elements - they are
potentially harmful and have been unnecessary since about Netscape 2 and
IE 3 (let's say 10 years). ;-)
[color=blue]
>
> function SymError()
> {
> return true;
>
> }
>
> window.onerror = SymError;[/color]
Right here you destroy your chance to see the error messages that might
help you - it stops anything useful going to the Firefox script console.
<URL:http://www.mozilla.org/docs/dom/domref/dom_window_ref58.html>
[color=blue]
>
> //-->
> </script>
>
> <script language="javascript"><!--
> function window_resize(o_img, int_offset_h,
> int_offset_w) {
> table_all.style.visibility="hidden";[/color]
Here's one error - using an ID attribute as a global variable:
var table_all = document.getElementById('table_all');
You should not assume support for the style object, so:
if (table_all.style) {
table_all.style.visibility = "hidden";
}
I guess strictly you should also test for getElementById and offer
document.all if it is not available, but that is only really necessary
if you want to support IE 4.
[color=blue]
> var int_max_h = window.screen.availHeight;
> var int_max_w = window.screen.availWidth;
> var int_size_h = o_img.height + int_offset_h;
> int_size_h = (int_size_h > int_max_h) ?
> int_max_h : int_size_h;
> var int_size_w = o_img.width + int_offset_w;
> int_size_w = (int_size_w > int_max_w) ?
> int_max_w : int_size_w;
> //window.moveTo(0,0);
> int_size_w = (int_size_w>390)? int_size_w :
> 390;
> window.resizeTo(int_size_w, int_size_h);
> self.focus();
> table_all.style.visibility="visible";
> }
>
> function resize(k) {
> table_all.style.visibility="hidden";[/color]
Here it is again.
[color=blue]
> self.o_img.width *= k;
> self.o_img.height *= k;[/color]
That method of referring to an image doesn't work in Firefox, though it
does support the images collection (as do nearly all browsers) 'cos it's
part of DOM 0:
var o_img = document.images['o_img'];
o_img.width *= k;
...
[color=blue]
> window.resizeTo(self.o_img.width+50,
> self.o_img.height+135);
> table_all.style.visibility="visible";
> }
>
> function on_key_press() {
> if (event.keyCode == "27") this.close();[/color]
IE has a different event model to other browsers - event is a property
of the global object (window.event), but for others you need to pass the
event to the function. For old Netscape, you need 'which', storing the
value in a local variable saves looking it up multiple times:
function on_key_press(e) {
var e = e || window.event;
var k = e.keyCode || e.which;
if ("27" == k) this.close();
...
and call with:
on_key_press(event);
[color=blue]
> else if (event.keyCode==43) resize(1.1);
> else if (event.keyCode==45) resize(.9);
> }
> -->
> </script>
> </head>
>
> <body onload="javascript
:window_resize(self.o_img, 135, 50);"[/color]
There is no need for 'javascript
:'. Again, self.o_img fails in Firefox,
use:
<body onload="window_resize(document.images['o_img'], 135, 50);"
[color=blue]
> onkeypress="on_key_press();">[/color]
onkeypress="on_key_press(event);">
[color=blue]
>
> <table id="table_all" height="100%" width="100%" border="0"
> cellpadding="0" cellspacing="0">
> <tr>
> <td>
> <table width="100%" border="0" cellpadding="0"
> cellspacing="0">
> <tr>
> <td>
> <div align="left"><nobr>[/color]
'nobr' is not a valid element (unless you use a different DTD to that
specified in your DOCTYPE):
<URL:http://www.cs.tut.fi/~jkorpela/html/nobr.html>
[color=blue]
> <img src="assets/magnify_plus.gif" style="cursor:hand"
> onclick="javascript
:resize(1.1);" WIDTH="107" HEIGHT="24">[/color]
All your onclick attributes don't need 'javascript
:'.
[color=blue]
> <img src="assets/magnify_minus.gif" style="cursor:hand"[/color]
use "cursor: pointer;"
[color=blue]
> onclick="javascript
:resize(.9);" WIDTH="117" HEIGHT="24">
> <a style="cursor:hand" onClick="window.print();"><img
> src="assets/print.gif" width="89" height="24" border="0"></a>
>
> </nobr></div></td>
> </tr>
> </table>
> </td>
> </tr>
> <tr height="1">
> <td bgcolor="#DDDECC"><img SRC="assets/spacer_trans.gif"
> width="1"
> height="1"></td>
> </tr>
> <tr>
> <td align="center" valign="middle">
> <img src="assets/plot239/dev239.jpg" name="o_img" width="390"
> height="310" hspace="5" vspace="5" border="0" align="top" id="o_img">[/color]
hspace, vspace, etc. are depreciated, use styles instead.
[color=blue]
> </td>
> </tr>
> </table>
> </body>
> </html>
>[/color]
--
Rob
