I inherited a web part from a client’s old vendor and it has an image size problem.  The images should be 60×50 but for some odd reason, the original vendor forced them into 42×42, so they look squashed:

Good Image	Bad Image

Here’s the markup (somewhat simplified):

<table class=’extended-outlook’>
  <thead>
    <tr>
      <th  width=’100′>3 Tuesday</th>
    </tr>
  </thead>

  <tbody>
    <tr class=’forecast’>
      <td width=’100′>
        <ul>
          <li class=’high’>High: 72&deg;F</li>
          <li class=’low’>Low: 44&deg;F</li>
          <li class=’condition’>Sunny
            <img src=’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width=’42’ height=’42’ alt=” />
          </li>
        </ul>
      </td>
    </tr>

  </tbody>

</table>

You’ll note that even though the path to the image itself shows the proper dimension (60×50) the original vendor forced it in 42×42.  Why?  Crazy.

Anyway, I wanted a quick and easy solution to this issue and I turned to jQuery.  The trick was to locate all of the appropriate <img> tags.  I didn’t want to muck about with any other img tags (of which there are many).  This bit of jQuery did the trick:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
     $(document).ready(function () {

         $(‘li.condition > img’).each(function (index, item)
            {
             $(item).css("width", "60"); 
             $(item).css("height", "50");
            });
     }); // on document load
</script>

That bit of code finds the collection <li> tags whose class is “condition” and <img> children.  It then iterates through all of that.  Worked like a charm.

I could probably streamline it, but I never was a the kind of unix guy that solved π to 18 digits precision using sed and awk and I’m not that kind if jQuery guy either .

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin