Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorWill888
    • CommentTimeDec 3rd 2006
     permalink
    Hi - I just created a new site http://www.cheetahcool.com to show the latest news, technology and videos on the net. To proper format the pictures / images associated with the news item, I use Javascript to resize the image with onload event.

    A actual code looks like this: (I removed the "<" at the beginning and the ">" at the end so the following codes does not harm this forum discussion):

    input type=image onload='javascript:if(this.width>30) this.width=30' src="http://www.cheetahcool.com/images/cheetahcool2.jpg"


    Most of time it functions (both in IE and Firefox) and resize the image properly. However, this is not working consistently as many time the browsers seem just simply not executing the onload javascript at all thus causing the image too large on my site content.

    Any one has insight or can offer some advice?
  1.  permalink
    Nice. Read up on the <img> tag and how to apply the width and height attributes.
    • CommentAuthorvarland
    • CommentTimeDec 4th 2006 edited
     permalink
    If you're working on a site like this, with the goal of growing it, you should really get rid of the inline javascript. Give all your images that need to be resized a specific class, and then execute a javascript function on the load event for the window to resize the images.

    You'll probably need the document.getElementsBySelector function to do this, but that isn't a big deal. I think it's included with the Prototype library. After you have it, do something like this:


    window.onload = function()
    {
    // Find all images to resize.
    var images = document.getElementsBySelector('input.thumbnail');
    if (!images || images.length == 0) return;

    // Resize each image (if necessary).
    for (var i = 0; i < images.length; i++)
    {
    if (images[i].offsetWidth > 30) images[i].setAttribute('width', 30);
    }
    }

    If you do that, all you have to do is make sure your javascript function is on the right pages, and then give all your inputs the thumbnail class.
Add your comments
    Username Password
  • Format comments as (Help)