Geek asks and answers

Repeat function when resizing window in jQuery

I wrote a function that resizes and positions images of a fixed position. I want to repeat the imgControl function when resizing a window in jQuery. I am sure there is a very simple way to do this, but my searches have so far been fruitless. I may just not know the correct search terms. Any help would be greatly appreciated!

All this works fine if I just copy the function into a resize event, but it seems inelegant and unnecessary. There seems to be a way to just call the function again.

Here is my code:

$(window).load(function imgControl() {
    $('div.lb_img img').each(function () {
        var lb_img_id = '#' + $(this).attr('id');
        /* image size */
        var max_height = $(window).height() - 50;
        var max_width = $(window).width() - 50;
        $(function() { $(lb_img_id).aeImageResize({width:max_width, height:max_height}); });
        /* image position */
        var img_y = ($(this).attr('height') + 14) * -0.5;
        var img_x = ($(this).attr('width') + 14) * -0.5;
        $(this).css('margin-top', img_y).css('margin-left', img_x);
    });
}); 
$(window).resize(function() {
    imgControl();
});
+3
source share
1 answer

Define your function so that it is called from anywhere you need it. For instance:

var imgControl = function() {
    $('div.lb_img img').each(function () {
        ... // etc
    });
};

$(document).ready(function () {
    imgControl();
});

$(window).resize(function() {
    imgControl();
});
+14

More articles:


All Articles