Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

jQuery Resizer! – resize objects that are greater than a specified width

Today I launched the new design of Escape From Cubicle Nation, which I’m very proud to have worked on. Props to Brian Morykon for the design, Joseph Hinson for the code.

My last order of business in coding the site was that some of the Youtube videos and embeds had been inserted at a width of 640 pixels, which was 90 pixels wider than the content area. With CSS, the options are really only to choose overflow: hidden;, which then only cuts off the content that is wider, instead of resizing it. So, I wrote a quick little script that some folks might find helpful. May I introduce jQuery resizer.

Here’s the actual function for my fellow geeks:

function resizer( selectors, w ) {
 jQuery(selectors).each(function() {
 var owidth = jQuery(this).width(); var oheight = jQuery(this).height();
 if (owidth > w) {
 var newH = (oheight * w / owidth);
 jQuery(this).attr({
 width: w,
 height: newH
 });
 }; // endif
 });
}

Essentially the function loops through every selector you give it, checks it against the width you give it, and if it’s wider, it will recalculate the attributes of width and height based on their original values to scale the image down, it takes two attributes, the selector, and the width. The function can be called like so:

resizer('.content iframe', 500);

Additionally, you can give it a comma separated list of selectors, like so:

resizer('.content iframe, .content embed, .content object, .content img', 500);

So, the very straightforward, bottom line usage is as follows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="appropriate-path/jq-resizer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
 resizer('iframe, img', 550);
});
</script>

You can see a quick demo here.

Click to download the js file (in a zip).