jQuery – sylv3rblade dot com

I had a problem with one of my current projects where I was supposed to have an image enclosed in a div with fixed dimensions.

1<div id="resize-div">
2<img src="someimage.jpg", :id="resize-div">
3</div>

For the dimensions of the div, you can set it inline or use css file:

1#resize-div {
2width:466px;
3height:133px;
4}

Now since not all images will fit this aspect ratio you’ll encounter problems easily enough. With images smaller than the div, I had little problem letting the css to handle it so it’s situated perfectly center in the div. I didn’t include it here to shorten the codes i need to display :).

Judging from the code shown above, you’ll not that if you have larger images that exceeded the div’s set height and width (especially those width different aspect ratios), a pure css solution simply won’t work (or at least I couldn’t make it work…. :/) so I thought of using JQuery to work it out for me.

Here’s my script to autofit images in a div using JQuery.

1$(function(){
2    var divElem = $("#resize-div");
3    var maxht = divElem.height();
4    var maxwdt = divElem.width();
5    var imgElem = $("#resize-image");
6    var ht = imgElem.height();
7    var wdt = imgElem.width();
8    if (ht < wdt){
9        if (wdt > maxwdt)
10            $("#resize-image").css({'height' : "auto", 'width' : maxwdt});
11        else
12            $("#resize-image").css({'height' : "auto", 'width' : wdt});
13    }
14    else if (ht > wdt){
15        if (ht > maxht)
16            $("#resize-image").css({'height' : maxht, 'width' : "auto"});
17        else
18            $("#resize-image").css({'height' : ht, 'width' : "auto"});
19    }
20});

Facebox is an interesting jquery plugin but it’s also one of those annoying things on the web that likes to break stuff around it. For my current project, I needed to use jQuery’s datepicker plugin with facebox. As expected, facebox broke datepicker :(. I wanted to try several other implementations but since jQuery’s datepicker was the simplest one I could find, I didn’t want to waste time trying make another script work. So I took a few minutes to debug my problem.

The problem:

Turns out that datequery relies on an elements ID. The problem? Facebox duplicates all the contents of the div you wanted to display and all hell breaks loose.

The solution:

Quite simple actually.

Just use jQuery to replace the element id within facebox at run time.

Here’s the script:

1$(document).bind('reveal.facebox', function() {
2  $('#facebox .datepicker').each( function(intIndex){
3    $(this).attr('id',jQuery(this).attr('id') + '-2')
4  });
5});

Then just modify your binding for datepicker accordingly:

1$(document).bind('reveal.facebox', function() {
2    $('#date_filed_for-2').datepicker();
3})

And you’re done.

I found this code using google-fu on frenzicmojo.net

Tag: jQuery

Autofit an image in a div using JQuery

Using jQuery datepicker with Facebox