Ways to prompt a window resize event using pure javascript

I am attempting to simulate a resize event using vanilla JavaScript for testing purposes, but it seems that modern browsers prevent the triggering of the event with window.resizeTo() and window.resizeBy(). I also tried using jQuery $(window).trigger('resize');, but it only works for events that are attached using jQuery, like $(window).on('resize', handler);. Unfortunately, the project I am currently working on requires plain JavaScript.

Here is an example:

window.addEventListener('resize', function(){
    console.log('Window has been resized!');
});

// Alternatively, you can use global onresize
window.onresize = function() {
    console.log('Window has been resized!');
};

Answer №1

It is possible that you are receiving downvotes because some users may perceive your question or answer as a duplicate. However, according to information from the you might not need jQuery website:

For IE9 and above:

Triggering native events:

// For a complete list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
var element = document; // This can be the specific element on which you want to trigger the event
var event = document.createEvent('HTMLEvents');
event.initEvent('resize', true, false);
element.dispatchEvent(event);

Triggering custom events:

var element = document; // This can be the specific element on which you want to trigger the event
if (window.CustomEvent) {
  var customEvent = new CustomEvent('my-custom-event', {detail: {some: 'data'}});
} else {
  var customEvent = document.createEvent('CustomEvent');
  customEvent.initCustomEvent('my-custom-event', true, true, {some: 'data'});
}

element.dispatchEvent(customEvent);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Date selection tool in Bootstrap showing blank field

I am currently working on implementing a bootstrap datepicker to update layer dates on my website. However, I am facing an issue where the calendar dropdown does not appear when I click on the datepicker box and instead it just shows an empty box. My goal ...

Struggling with repeatedly traversing characters in a string to solve the Palindrome challenge

I am working on a recursive solution for a Palindrome problem, but it seems that my code is only considering the first recursive call instead of the second one which should analyze all characters in the string. I suspect there might be a logical error in ...

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

Ending a timer from a different function in a React component

Currently, I am delving into the world of React and attempting to create a timer component. While I have successfully implemented the start function for my timer, I am now faced with the challenge of stopping the timer using an onclick handler from another ...

What is the best way to invoke an external JavaScript source using another JavaScript source?

I am trying to connect 2 different files together. file1.php and document.html file1.php has the following code in it: document.writeln('< script src="https://www.googletagservices.com/tag/js/gpt.js"> googletag.pubads().definePassback ...

Obtain the specific key's value from a new Map state

In my code, I've defined a variable called checkedItems as a new Map(); When I try to console.log(checkedItem), the output is as follows: Map(3) {"1" => true, "1.5" => true, "2" => false} Is there a way ...

Finding all parent IDs from a given child ID within a nested JSON structure that contains children can be achieved by recursively

function loadKendoTreeView() { if ($("#treeview").data("kendoTreeView") != null) { $("#treeview").data("kendoTreeView").destroy(); $("#treeview").empty(); } var jsonData = [{ "Id": "239297d8-5993-42c0-a6ca-38dac2d8bf9f", ...

The error "ReferenceError: process is not defined in vue 3" is being

<script setup> import puppeteer from 'puppeteer'; const onChange = async () => { // Initializing the puppeteer library const browser = await puppeteer.launch(); // Creating a new page const page = await browser.newPage(); / ...

Disable the stack label in a specific column of a stacked column chart using Highcharts

Looking at this stacked column graph in the fiddle link, you'll notice that one column is in grey color to indicate that it is disabled. I am trying to figure out how to hide the total from the top of the column that is grey or belongs to the 'Pe ...

Best practices for authenticating methods with Google signin in Angular projects

I have made significant progress towards getting the Google signin feature to work, reaching 95% completion. However, I am currently facing two issues with the code. Here is a simplified version of my current implementation: loginWithGoogle(): void { //t ...

A guide on dynamically sending data to a PHP script when an input is changed and displaying the results in a

I am trying to implement a feature where the data inputted into a text field is sent to posttothis.php and then the result is displayed in a content div. However, I am encountering difficulties in making it work. testscript.html <html> <head> ...

Converting dates in Javascript

I have retrieved a date/time value of "20131218" from an API response. My goal is to transform this date into the format "2013-12-18". In PHP, this can be easily achieved with the following code: echo date("Y-m-d", strtotime('20131218')); The ...

When using AngularJS in conjunction with Karma-Jasmine, it is important to note that the functions verifyNoOutstandingExpectation() and verifyNoOutstandingRequest() may not

There is an unresolved HTTP request that needs to be flushed. When I use the following code afterEach(function(){ $httpBackend.verifyNoOutstandingExpectation(); $httpBackend.verifyNoOutstandingRequest(); }); The code functions correctly and I ...

Implementing bind to invoke a function during an onClick Event

Here is a code snippet I have been working on that demonstrates how to handle click events on hyperlinks. The code features two hyperlinks named A and B. When hyperlink A is clicked, the console will log 'You selected A', and when B is clicked, ...

Can JavaScript be used to identify if the current browser is the default one being used?

It would be incredibly helpful for my application to determine if the current browser is set as the default browser. Is it feasible, utilizing JavaScript, to ascertain whether the browser in which my page is open is the default browser (i.e. the browser t ...

When it comes to iterating through arrays in nodejs

Can someone assist me with using a for loop on an array to search for titles? I have a basic ADD TODO form input that submits and adds todos or titles to the array: todos.push({ title: req.body.add_todo_input, complete: false }); I am pushing user input ...

What is the best way to access a variable from a different function in JavaScript?

In my current project, I have implemented a function that fetches a JSON string from an external URL. The JSON data is being retrieved successfully and is functioning as expected. However, I am facing an issue with the variable 'procode'. I need ...

Guide to installing angular-ui-bootstrap through npm in angularjs application

My goal is to incorporate angular-ui-bootstrap into my project using the following steps: 1. npm install angular-ui-bootstrap 2. import uiBootstrap from 'angular-ui-bootstrap'; 3. angular.module('app', [      uiBootstrap    ]) I ...

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

Ways to conceal components of an external widget on my site

I'm attempting to add a chat widget to my website and I'm looking to hide specific elements within the widget. The chat function is provided by Tidio, but I believe this applies to most widgets. My main goal is to conceal a button that minimize ...