Image width & height lost in Firefox

Discussion in 'Javascript' started by emma.sax@gmail.com, Aug 1, 2006.

  1. Guest

    My script is as follows:

    function setImageSizes() {
    var staticHeight = 70;

    if(!document.getElementsByTagName || !document.images) return false;
    var thumbnail = document.getElementsByTagName("img");

    for(var i=0; i<thumbnail.length; i++) {
    if(thumbnail.className=="thumbnail_img") {
    var tempImage = document.createElement("img");
    tempImage.src = thumbnail.src;

    //problem here
    var theWidth = tempImage.width;
    var theHeight = tempImage.height;

    //scale new width
    theWidth = Math.round((theWidth/theHeight)*staticHeight);

    thumbnail.style.width=theWidth;
    thumbnail.style.height=staticHeight;
    }
    }

    }
    window.onload=setImageSizes;

    The problem is that Firefox (I'm using 1.5) shows tempImage width and
    height as 0 - shows correctly in IE.

    I can't just use getAttribute on the image in the page as they have
    been set incorrectly and this code can not be changed, therefore am
    trying to get the dimension of the original image on the server.

    Does anyone know what I can use instead?

    Thanks

    M
    , Aug 1, 2006
    #1
    1. Advertising

  2. wrote:
    > function setImageSizes() {
    > var staticHeight = 70;
    >
    > if(!document.getElementsByTagName || !document.images) return false;


    This is no rational. While the rest of the script does depend upon -
    document.getElementByTagName -(though it doesn't need to) it never used
    - doucment.images - and so the absence of that feature is not
    significant here and should not be subject to testing here. On the
    other hand the - document.createElement - is used (again
    unnecessarily), but no effort has been made to verify its availability
    in the environment (nor that the version available is a W3C DOM
    standard version rather than the pre-DOM version of IE 4 and the dummy
    version in late Opera 6 browser).

    > var thumbnail = document.getElementsByTagName("img");


    As the - document.images - is already a collection of IMG elements in
    the current document it is perverse to set about creating a new
    nodeList that represents exactly the same collection.

    > for(var i=0; i<thumbnail.length; i++) {
    > if(thumbnail.className=="thumbnail_img") {
    > var tempImage = document.createElement("img");
    > tempImage.src = thumbnail.src;
    >
    > //problem here
    > var theWidth = tempImage.width;
    > var theHeight = tempImage.height;


    When a value is assigned to the - src - of an IMG element an
    asynchronous request for a resource is made. If that resource does
    supply dimension information for an image that information will not be
    available until the response has arrived and has (at least) started to
    be processed as an image. Attempting to read width and height
    properties from the IMG element fractions of a millisecond after the
    request is made will tend to be unsuccessful.

    > //scale new width
    > theWidth = Math.round((theWidth/theHeight)*staticHeight);
    >
    > thumbnail.style.width=theWidth;
    > thumbnail.style.height=staticHeight;
    > }
    > }
    >
    > }
    > window.onload=setImageSizes;
    >
    > The problem is that Firefox (I'm using 1.5) shows tempImage width and
    > height as 0 - shows correctly in IE.


    You can consider yourself extremely lucky if IE shows the correct
    dimensions anywhere but sourcing the images from the local hard disk
    (and not always then).

    However, reading the widths and heights from IMG elements and Image
    objects following the loading of an image file has never been
    universally successful. There were always browsers that did not
    transfer the information form the image to the properties.

    > I can't just use getAttribute on the image in the page as they have
    > been set incorrectly


    How, why?

    > and this code can not be changed,


    Why?

    > therefore am
    > trying to get the dimension of the original image on the server.
    >
    > Does anyone know what I can use instead?


    Have the server insert the data directly into the javascript?

    Richard.
    Richard Cornford, Aug 1, 2006
    #2
    1. Advertising

  3. Guest

    > it never used
    > - doucment.images - and so the absence of that feature is not
    > significant here and should not be subject to testing here.


    left in from previous tries, i tend to clean up the code once i've
    found the solution. thanks tho.

    > > var thumbnail = document.getElementsByTagName("img");

    >
    > As the - document.images - is already a collection of IMG elements in
    > the current document it is perverse to set about creating a new
    > nodeList that represents exactly the same collection.


    i wouldn't say it was perverse, i'd say it was an oversight. thanks
    again.

    > You can consider yourself extremely lucky if IE shows the correct
    > dimensions anywhere but sourcing the images from the local hard disk
    > (and not always then).


    the images are on the server, not local disk - so i guess i'm lucky.

    > However, reading the widths and heights from IMG elements and Image
    > objects following the loading of an image file has never been
    > universally successful. There were always browsers that did not
    > transfer the information form the image to the properties.


    so is there no other way of doing this? this is all I wanted to know
    from this posting.

    > > I can't just use getAttribute on the image in the page as they have
    > > been set incorrectly

    > How, why?


    if you really want the whole story.... the company i work for uses
    external programmers to code the main stuff - this takes about 4 week
    turn around. so i was hoping to get something together in a few days
    that we can just add in. the images have been set as a fixed height and
    width (70x80px) but the images are different sizes and so are out of
    proportion in the main.

    > > and this code can not be changed,

    > Why?


    see above

    > > Does anyone know what I can use instead?

    > Have the server insert the data directly into the javascript?


    i don't know what this means, but doubt i can do it as i have no
    control over server side code.

    thanks for you advice.

    M
    , Aug 2, 2006
    #3
    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. AndrewF
    Replies:
    1
    Views:
    758
    Bruce Barker
    Oct 10, 2005
  2. Sean Jorden
    Replies:
    1
    Views:
    591
    laurie
    Aug 19, 2003
  3. Lois
    Replies:
    1
    Views:
    3,214
    Ryan Stewart
    Dec 27, 2004
  4. cera
    Replies:
    1
    Views:
    1,259
    Neredbojias
    Aug 18, 2007
  5. Bernd Meier
    Replies:
    6
    Views:
    506
    GTalbot
    Jan 14, 2008
Loading...

Share This Page