How can trigger the window resize event manually in JavaScript?

Votes : 4.7
For example, auto re-adjust my web page styles when the browser window will be resized.  But sometimes not fit styles, when i append html content.  however i can trigger window resize event somehow. styles will be fit. Any other solution trigger window resize event without browser refresh ?

Your Answer

1 Answer

if you use javascript, you can trigger window resize event by using javascript dispatchEvent() function.
window.dispatchEvent(new Event('resize'));
Eg:<button onclick="window.dispatchEvent(new Event('resize'));">Resize</button>

But This method not works for some browsers,
function ESresize(){
 * Trigger window resize function in javascript
 * source path :
    if (typeof (Event) === 'function') {
        // modern browsers
        window.dispatchEvent(new Event('resize'));
    } else {
        //This will be executed on old browsers and especially IE
        var resizeEvent = window.document.createEvent('UIEvents');
        resizeEvent.initUIEvent('resize', true, false, window, 0);

This method can use on many browser.

Eg:<button onclick="window.dispatchEvent(new Event('resize'));">Resize</button>

If you use jQuery library, You can use jQuery trigger() function to trigger window resize event


What is the codrate ? is a standard, fast cross browsing and highly versatile site. It is useful for many large number of Program Development Industries. So you can get support form Codrators , who are the codrate's joiners around world to help your program developments, You can answer other codrator's questions. Communicate with them. Share your knowledge with them. Do you have an interest in programming, So publish your articles about programming. It will help to maintain your professional co-profile. Actually is not such as a regular web site. It will be gave new experience, best narrow cross-browser view, reduce processing time to receive browsing request, it's mean do not wasting your time to browsing codrate's web pages because it has been upgrade always modern coding ways. So, what do you waiting for ?. Try your own.

Copyright 2015 Pride - Company. Design by Esila