Question

With jQuery how can I see if a div is less than 75px, and if it is add 1/2 (half) the difference as left padding?

So if an image is 75px or bigger, then nothing happens, but if it’s 71px then 2px of left-padding is applied.

Note, the size is defined by CSS, the actual images are bigger.

Thanks

The following didn’t work for me:

$(window).load(function() {
    $(function(){ 
        var img= $('#views_slideshow_singleframe_pager_product_slideshow-node_content_1 .pager-item img');
        if(img.width() <75)
        {
            img.css("padding-left", (img.width() -75)/2);
    });
});

UPDATE – I need to target several images on a page with this.

UPDATE – I’m adding the code suggestions locally so you cant see it live, but a non-js version of the site is here: link – click on one of the thumbnails under the ‘SIZE’ drop down box to see a thumbnail that’s too small. This version is a little out of date so I’ll come back with a newer one as soon as its uploaded. Thanks

UPDATE – the thumbnail images are themselves generated by javascript, so the code needs to be run after they’re created. I’ve used window load for this reason.

Answer 1

Try this jQuery, I’m not sure how bug-proof it is, though:

$('img').live('click', function() {
  $.each($('img'), function() {
    var image = $(this);

    if (image.width() < 75) {
      image.css('padding-left', ((75 - image.width()) / 2)); 
    }
  });
});

EDIT : This code will fire each time any image is clicked. You can make this more specific by using a selector to find clicked images within a certain container, such as a “div”.

I hope it helps, though,
spryno724