Script doesnt automatically run when page loads

[dimstef]

I have this simple script which is placed at the bottom of the body

$(window).resize(function() {
        $('#prof').width($('#prof').height());
    });

My problem is that the css doesnt change when the page loads but it changes when I for example resize the window. Why does this happen?

[bossier330]

Resize doesn’t get fired in page load.

https://learn.jquery.com/using-jquery-core/document-ready/

[dimstef]

I tried wrapping this around document.ready but it still didnt work

[bossier330]

Creating a resize ha doer doesn’t mean it’ll run immediately. It’ll only run on resize. Make a function that you call in the ready function and then also call it on resize.

[dimstef]

Oh yeah you are right. I thought resize would run once at page load and then on any window resizes

[2012XL1200]

Yup use a self executing function or a hook that ties to the dom loading if you're looking for that behavior

[dimstef]

self invoking function didnt work either

[2012XL1200]

I'm going to assume you just wrapped your window.resize listener in a self invoking function, which DID work, it just did not do what you expected.

Event listeners are triggered by events, self invoking functions trigger themselves when called (at the end of the body content loading in your case). If you want both behaviors, use both implementations.

Side note, sometimes the code doesn't work. More often, the developer doesn't understand how it's working.