And the overlay looks really good but the image is not centered. And I'll pull up one of these images, resize my window. I'm going to make my window smaller again. (SOUND) And we also need to adjust the position of the top and left of the overlay. (SOUND) Of course, it's going to be inner height. (SOUND) We're going to do a similar thing with the height.

So, my overlay style, we're going to change the style attributes width and we're going to make that to the window inner width plus the pixel measurement. Once again, we're going to make sure that the overlay exists. So this time, the event that I want to look for is called resize and, of course, like before, I want to execute a function and pass it along false to make sure that it bubbles properly. I'm going to go enter my code and, right over here, I'm going to add a listener for another window event. But if I resize my window now, you can see that it doesn't look good because the overlay doesn't stretch to the whole width of the window. If you resize this window for any reason and then I'm going to click on one of these, it looks great. But there's a slight problem that we need to take care of. You can also simulate events on a specific element.This project is working and looking great. trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event. JQuery has the trigger method, which works like this: $(window).trigger('resize') Īlthough. ResizeEvent.initUIEvent('resize', true, false, window, 0)

This doesn't work in Internet Explorer, where you'll have to do the longhand: var resizeEvent = ('UIEvents') In your modern browsers, you can trigger the event using: window.dispatchEvent(new Event('resize')) In this example, you can call the doALoadOfStuff function without dispatching an event. This works well if you have control over the code you want to run, but see below for cases where you don't own the code. Where possible, I prefer to call the function rather than dispatch an event.

Javascript window resize