How do I get this function to not only run on window resize but also on initial page load?
$(window).resize(function() {
...
});
This solution is now deprecated since jQuery 3.0: https://api.jquery.com/bind/#bind-eventType-eventData-handler
You'll want to use:
$(document).ready(function() { /* your code */ });
To make something happen onload. If you want something to work onload and onresize, you should do:
onResize = function() { /* your code */ }
$(document).ready(onResize);
$(window).bind('resize', onResize);
I think the best solution is just to bind it to the load and resize event:
$(window).on('load resize', function () {
// your code
});
This behavior is by design.
You should put your code into a named function, then call the function.
For example:
function onResize() { ... }
$(onResize);
$(window).resize(onresize);
Alternatively, you can make a plugin to automatically bind and execute a handler:
$.fn.bindAndExec = function(eventNames, handler) {
this.bind(eventNames, handler).each(handler);
};
$(window).bindAndExec('resize', function() { ... });
Note that it won't work correctly if the handler uses the event
object, and that it doesn't cover every overload of the bind
method.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With