jquery resize function not working the way I'd expect

Question

I have a container element that has an <img> tag in it. The width of the image is 100%, and the height is auto. Overflow on the container is set to hidden and it also has a max-height and min-height. The idea is to have the image determine the height of the container, within the max and min breakpoints.

So, the container has a relative height. In order to have a fluid transition, I reset the height on the resize event (for a complicated reason, the img itself does not set the height, rather it is calculated and then changed via javascript). This works fine, and when I resize the window, it all works right.

But some of the logic that is in the resize event I want to run on the load event as well. So, I thought I would just call resize within load, like so:

$(window).load(function(){
    $(window).resize();
});

But, this did not work. With this code, if I manually resize the window even just one pixel, the containing element will scale properly (it's about a 200px difference from the height calculated on load to the reset, properly scaled height).

Apparently, my understanding of how this works is wrong. I have called other events before like this to fire the event and trigger something else. How can I accomplish what I want?

Works for me http://jsfiddle.net/tarabyte/zpkxY/ – Yury Tarabanko Oct 11 '13 at 16:05 — Yury Tarabanko, Oct 11 '13 at 16:05

score 1 · Answer 1 · answered Oct 11 '13 at 16:06

1

Still wondering what's actually being achieved by re-sizing the window but another way to trigger resize would be :

$(window).load(function() {
    $(this).trigger('resize');
});

answered Oct 11 '13 at 16:06

Vishal

1,236
1
9
16

score 0 · Answer 2 · answered Oct 11 '13 at 16:03

0

Try .ready instead of .load

$(window).ready(function);

Here's a jsfiddle

answered Oct 11 '13 at 16:03

Overcode

3,134
1
18
24

1

I don't think that this is a solution in this case. because load event actually firing after the ready event.(Check this out: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – Alex Art. Oct 11 '13 at 16:11

score 0 · Accepted Answer · answered Oct 14 '13 at 13:52

0

I do not know what the problem was. I changed my approach and found a different solution that does not need the resize event to be called on load.

answered Oct 14 '13 at 13:52

smilebomb

3,883
8
36
71

jquery resize function not working the way I'd expect

3 Answers3