toomanyairmiles
toomanyairmiles

Reputation: 6485

jQuery based min/max width fix for IE6

Anyone know of a decent, reliable, jQuery based min/max width fix for IE6

Upvotes: 2

Views: 3845

Answers (4)

Mike P
Mike P

Reputation: 2877

I know this is an old thread, but I landed here form a Google search as I had the same issue. I tried using an expression for IE, but my problem is I need to calculate the maximum image size dynamically as the page resizes. I don't have control over the image sizes on the server, so I'm forced to go down this road.

In the end, I added a function which I call when the page has finished loading (using $(document).ready() as this doesn't wait for the images to actually download, just the DOM). I then call the same function when the page resizes. The code I used to set the max-width on images is then;

    // Calculate the max width that the images can be
    var maxWidth = $('#some-container').width();

    // Make sure the div that contains the image is set to this maxWidth
    $('#someDiv').width(maxWidth);

    // Set the max width using CSS for nice standards compliant browsers
    $('#someDiv img').css('max-width', maxWidth);

    // For non-compliant browsers like IE, iterate over all the images and manually set their size (should probably only do this for IE, but doesn't hurt)
    $('#someDiv img').each(function(index) {
        if ($(this).width() > maxWidth){
            $(this).width(maxWidth);
        }
    });

Upvotes: 1

Shipow
Shipow

Reputation: 2447

I saw one on the yaml builder http://builder.yaml.de/

Upvotes: 1

Jason Berry
Jason Berry

Reputation: 2469

Does it have to be a jQuery fix? If it's just the CSS you're trying to compensate for you could use CSS Expressions to solve your IE6 max/min width problems like this:

#wrap {
    width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
}

You could take the same code into your JavaScript if you're really looking for a JS fix. I just try to keep CSS for presentation, JS for additional enhancement.

There are performance issues relating to using CSS Expressions, however if you're using IE6 then you've got bigger problems...

Upvotes: 1

Dan F
Dan F

Reputation: 12052

This one looks decent. I haven't tried it, but it looks to handle browser resizing. Needs adapting though, I highly doubt it's copypasta ready (there's hardcoded stuff in there).

Upvotes: 1

Related Questions