Script doesn't work in Firefox

Discussion in 'Javascript' started by niconedz, Oct 14, 2005.

  1. niconedz

    niconedz Guest

    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.
    Can anybody tell me what's wrong?

    Thanks
    Nico

    == btw.. sorry for the long post ==

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

    <script language="JavaScript">
    <!--

    function SymError()
    {
    return true;

    }

    window.onerror = SymError;

    //-->
    </script>

    <script language="javascript"><!--
    function window_resize(o_img, int_offset_h,
    int_offset_w) {
    table_all.style.visibility="hidden";
    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";
    self.o_img.width *= k;
    self.o_img.height *= k;
    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();
    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);"
    onkeypress="on_key_press();">

    <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>
    <img src="assets/magnify_plus.gif" style="cursor:hand"
    onclick="javascript:resize(1.1);" WIDTH="107" HEIGHT="24">
    <img src="assets/magnify_minus.gif" style="cursor:hand"
    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">
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    niconedz, Oct 14, 2005
    #1
    1. Advertising

  2. niconedz

    RobG Guest

    niconedz wrote:
    > 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.


    Not all users or all browsers will let you re-size the window, so expect
    that it won't work at least sometimes.

    > Can anybody tell me what's wrong?


    Normally you should explain what you consider 'wrong'. Did you get any
    errors from the Firefox script console?

    >
    > Thanks
    > Nico
    >
    > == btw.. sorry for the long post ==


    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.

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


    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.

    >
    > <script language="JavaScript">


    The language attribute is depreciated, type is required:

    <script type="text/javascript">

    > <!--


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

    >
    > function SymError()
    > {
    > return true;
    >
    > }
    >
    > window.onerror = SymError;


    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>

    >
    > //-->
    > </script>
    >
    > <script language="javascript"><!--
    > function window_resize(o_img, int_offset_h,
    > int_offset_w) {
    > table_all.style.visibility="hidden";


    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.

    > 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";


    Here it is again.

    > self.o_img.width *= k;
    > self.o_img.height *= k;


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

    > 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();


    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);

    > 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);"


    There is no need for 'javascript:'. Again, self.o_img fails in Firefox,
    use:

    <body onload="window_resize(document.images['o_img'], 135, 50);"

    > onkeypress="on_key_press();">


    onkeypress="on_key_press(event);">

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


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

    > <img src="assets/magnify_plus.gif" style="cursor:hand"
    > onclick="javascript:resize(1.1);" WIDTH="107" HEIGHT="24">


    All your onclick attributes don't need 'javascript:'.

    > <img src="assets/magnify_minus.gif" style="cursor:hand"


    use "cursor: pointer;"


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


    hspace, vspace, etc. are depreciated, use styles instead.


    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >



    --
    Rob
     
    RobG, Oct 14, 2005
    #2
    1. Advertising

  3. niconedz

    niconedz Guest

    Rob.. you are a diamond !!!

    It worked beautifully.

    Thank you ever so much.
     
    niconedz, Oct 14, 2005
    #3
  4. RobG wrote:

    > niconedz wrote:
    >> <!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>

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


    No, they should not cause any problems in _HTML_ (and have none caused
    with me to date). First, they are not "HTML comment tags" but empty SGML
    declarations (delimited by "<!" and ">") containing only SGML comments
    (delimited by "--"). Second, all CSS specifications to date and the
    most recent Working Draft specify them to be allowed and to be ignored
    if present, see

    - CSS1, section 1.1
    <http://www.w3.org/TR/CSS1#containment-in-html>

    - CSS2, section D.2
    <http://www.w3.org/TR/CSS2/grammar.html#q2>

    - CSS2.1 (CR gone WD as of 13 June 2005), section G.2
    <http://www.w3.org/TR/CSS21/grammar.html#q2>

    >> <script language="JavaScript">

    >
    > The language attribute is depreciated, type is required: [...]


    The word you were looking for is "deprecated", otherwise you are correct.

    >> function SymError()
    >> {
    >> return true;
    >>
    >> }
    >>
    >> window.onerror = SymError;

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


    You are correct, however this bad code originates from Norton
    In(ternet)Security by $ymantec. It's better to uninstall
    much-too-expensive nonsense such as "Desktop Firewalls" and learn
    how to use system resources to protect themselves instead (e.g. by
    disabling/uninstalling unnessary networking services instead of
    introducing new ones).

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


    .... or IE < 5.5 on Windows CE (according to MSDN Library).


    PointedEars
     
    Thomas 'PointedEars' Lahn, Oct 18, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Freeman
    Replies:
    8
    Views:
    7,725
    tcena9
    Feb 16, 2011
  2. =?Utf-8?B?U3RldmUgRm9yZA==?=

    BackColor attribute in HyperLink doesn't work in Firefox

    =?Utf-8?B?U3RldmUgRm9yZA==?=, Oct 7, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    585
    =?Utf-8?B?U3RldmUgRm9yZA==?=
    Oct 10, 2005
  3. =?Utf-8?B?VHlsZXIgQ2FydmVy?=

    Programmatic Use of DefaultButton Doesn't Work in FireFox

    =?Utf-8?B?VHlsZXIgQ2FydmVy?=, Mar 9, 2006, in forum: ASP .Net
    Replies:
    5
    Views:
    3,834
    Yuan Ren[MSFT]
    Mar 15, 2006
  4. rigo
    Replies:
    0
    Views:
    189
  5. Loony
    Replies:
    23
    Views:
    392
    Loony
    Aug 1, 2005
Loading...

Share This Page