Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Javascript to proportionally resize images in IE - searching for script errors

    I am in the process of setting up an image gallery for the website at work, written in HTML, CSS with javascript used to show the full size image in a quasi-pop up window when a thumbnail is clicked.

    The test gallery can be seen at www.sillytrouts.co.uk/test_gallery/page7.htm

    The problem I am having is in resizing the images for the thumbnail page. In the html I have used max-width and max-height to set the longest side of each image to 200px. In FF this works perfectly, but of course in IE (6 or 7), the images do not resize but appear in their actual size.

    After a great deal of online research, I have found two javascripts that might do the trick. These are saved on the web as imagesize1.js and imagesize.js. I have saved the scripts in separate files and tried to call them up in the <head> using <code><script src="imagesize.js"> type="text/javascript"></script></code>.

    Sadly, neither of the scripts has any effect in IE (any version), so I was wondering (and hoping), please, if any of you could look at the scripts and say how I should change them to get them working.

    The scripts as I have them are as follows:

    Here is imagesize1.js:
    <code>
    var w = offsetWidth;
    var h = offsetHeight;
    if (w > 200) {h = h * 200 / w; w = 200;}
    if (h > 200) {w = w * 200 / h; h = 200;}
    {width = w + 'px';
    height = h + 'px';}
    </code>

    and here is imagesize.js:
    <code>
    {for (i=1;i<document.images.length;i++)
    {if (document.images[i].width > 200)
    {document.images[i].width = 200;
    }
    }
    }
    </code>

    I am sorry if the errors are rather elementary, but I am a newbie to javascript and have only succeeded thus far in implementing complete scripts on the website. You might say it has been a very steep learning curve since starting my job as a website administrator in May!

    Thanks ever so much for any help you might be able to offer.

    Cheers

    Stuart W

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Setting a DOCTYPE will solve the problem in IE7. Add <!DOCTYPE html> to the beginning of your file.

    Otherwise, this article has a nice way of solving it for IEn using dynamic expressions.

  • #3
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi CyanLight - thanks for the info.

    It is a really silly question, but do you mean add the DOCTYPE to the page7.htm file or the javascript files?

    Thanks

    Stu

  • #4
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,642
    Thanks
    2
    Thanked 405 Times in 397 Posts
    JavaScript files don't use DOCTYPEs.

  • #5
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Inigoesdr, I think I knew that really - I am just unconfident!

    Have added the DOCTYPE to the page and it is great in IE7, but no joy in IE6.

    Does anyone have any other ideas please?

  • #6
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Solved it - thanks for help

    Thanks very much to everyone who suggested ideas to solve my image resizing.

    In the end, I did it without using the javascript I was toying with, but using the IE proprietary CSS attribute, expression, in a nested if statement as follows:

    <code>

    expression(this.scrollWidth > this.scrollHeight? '200px' : 'auto'); height: expression(this.scrollHeight > this.scrollWidth ? '200px' : 'auto' );

    </code>

    Many thanks to CyanLight for the link to the article about using them.

    Best wishes,

    Stu


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •