The issue of Chrome not updating when resizing the window in jQuery

I've encountered an issue while using jQuery to obtain the height of a specific element, as this measurement changes when someone resizes their browser window. Below is the code snippet I am currently using:

$(function() {
    var wheight = $('.home').height(); // Retrieve browser window height
    var wWidth = $(window).width(); // Retrieve browser window width
    if (wWidth >= 992) {
        $('.home').css('height', wheight);
    }
})
$(window).resize(function() {
    var wheight = $('.home').height(); // Adjust height upon browser resize
    var wWidth = $(window).width(); // Adjust width upon browser resize
});

While this solution works perfectly in Firefox, it seems to encounter issues in Chrome specifically when shrinking the browser window. Interestingly, it does work as intended when expanding the browser window. Any suggestions on how I can resolve this inconsistency?

javascriptjquerycssgoogle-chrome

Answer №1

Upon document ready, the .home element is being resized, not when the window is resized. Consider this alternative approach:

var wheight, wWidth;

$(function() {

    wheight = $('.home').height();
    wWidth = $(window).width();

    if ( wWidth >= 992 ) {
        $('.home').css('height', wheight);
    }
});

$(window).resize(function() {

    wheight = $('.home').height(); // Adjust height on browser resize
    wWidth = $(window).width(); // Adjust width on browser resize

    if ( wWidth >= 992 ) {
        $('.home').css('height', wheight);
    }
});

Alternatively:

var wheight, wWidth;

$(function () {

    resizeHome();
});

$(window).resize(function () {

    resizeHome();
});

function resizeHome() {

    wheight = $('.home').height(); // Adjust height on browser resize
    wWidth = $(window).width(); // Adjust width on browser resize

    if (wWidth >= 992) {
        $('.home').css('height', wheight);
    }
}

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

Retrieving the initial entry from a JavaScript ES2015 Map

I am working with a Map structured as follows: const m = new Map(); m.set('key1', {}) . m.set('keyN' {}) The Map may contain one or multiple items. I am wondering if there is a way to retrieve the first item by index, without using m. ...

javascriptdictionaryecmascript-6

Is it feasible to conceal certain parameters within a URL using Angular UI Router?

Looking to pass two values to a new ui-view via parameters: item id list of objects However, I want the new view to display only the id in the browser URL and not the stringified array of objects: http://www.myapp.com/#/my-view/4 INSTEAD OF http://ww ...

javascriptangularjsangular-ui-router

Are Viewmodel contents empty after ajax request?

Currently working on an ASP.NET MVC application, I am in the process of developing a search page that showcases both the search box and the table of results simultaneously. To achieve this functionality, I have utilized Partial Views along with AJAX/JSON c ...

javascriptc#jsonajaxasp.net-mvc

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Attempting to simplify repetitive actions by utilizing commands.ts, such as requesting email and password. However, upon trying to implement this, I encounter an error for the login (Argument of type '"login"' is not assignable to parameter of t ...

javascripttypescriptcypress

What is the method to determine the size of a numbered list?

Currently transitioning from jQuery to plain JavaScript. Previously used this in jQuery: var list = $('.list li'), listLength = list.length; Now attempting to achieve the same with JavaScript, but encountering issues: var list = documen ...

javascripthtmldom

Creating a straightforward timeline with CSS Grid, Vue.js, and moment.js/date-fns

I have created a basic calendar using Vuejs, momentjs, and css-grids layout. However, the calendar currently starts with Sunday (in American style) and I would like to change it to start with Monday (European style). I attempted to modify the column method ...

javascriptvue.jscalendarcss-grid

How can I duplicate a specific row within DataTables?

I have successfully implemented a feature that allows me to delete a selected row in my application. Now, I am looking to add functionality to duplicate or clone the selected row. The process of adding rows to DataTables can sometimes be challenging becaus ...

javascriptjquerydatatablesclone

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

javascripthtmlcssajax

What reasons might lead an object to be passed to a view as the exact term 'object' in Express.js?

Using nodejs, express, and ejs. I have a variable called 'result' which is properly defined. When I use console.log(result) within the router.get function on my index page, it outputs a correctly structured array of objects. After that, I rende ...

javascriptnode.jsexpress

The alignment of Bootstrap table headers in a Vue.js component needs adjusting for better display

Is there a way to ensure proper alignment of headers and column bodies in my Vue.js DataGrid component when utilizing the vuedraggable package for column reordering? Below is the code snippet for my DataGrid.vue component: <template> <div class ...

htmlcssvue.jshtml-tablebootstrap-5

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

Guidelines for securing login access where the "IsApproved" field must be true before authorization

During the account registration process, I initially set the default value to false for the field IsApproved. I need to create security rules that allow login only for users with IsApproved:true, and redirect those with IsApproved:false to the accessdenied ...

javascriptangulartypescriptgoogle-cloud-firestorefirebase-authentication

Share buttons are not updating properly on dynamically refreshed pages

I'm currently using ajax to fetch a new page, but I'm encountering an issue where only the share buttons are being displayed without the share count. $("body a").click(function(e) { $.ajax({ url: ajax_url, type: "GET", dataType: "x ...

javascriptajaxsharesharethis

Troubleshooting port deployment challenges on GCP for a Node.js project

My current Node.js project has one HTTP server running on port 8080, with a service URL generated for it. However, inside the http.createServer function, I have set up another server for an NLP engine that is listening on port 8081. While I am able to ac ...

javascriptnode.js

Troubleshooting: jQuery.load function not functioning properly within ASP.NET MVC

I'm facing an issue with my code setup. Currently, I have the following components in different files: @Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Home/index.html"))) This is included in my Razor file. <li><a href="#">Personal Re ...

javascriptjqueryasp.netasp.net-mvcrazor

Having difficulty linking the Jquery Deferred object with the Jquery 1.9.1 promise

I have been developing a framework that can add validation logic at runtime. This logic can include synchronous, asynchronous, Ajax calls, and timeouts. Below is the JavaScript code snippet: var Module = { Igniter: function (sender) { var getI ...

javascriptjquerypromise

Using Node.js with Express to seamlessly pass objects to EJS templates

I have a scenario where I am passing an object to my template and I want to display the details of that object in HTML. app.get('/', function (req, res) { var user = req.session.passport.user; if ( user != 'undefined' ){ ...

javascriptnode.jsexpressejs

What is a way to activate the onSelectionChange event only when the cursor moves without any changes in the input?

In my React Native app, I have a use case where I want to implement mentions. This requires calling a function on the onSelectionChange event only when the text in the input remains unchanged but the caret position has moved. Currently, the onSelectionCha ...

javascriptreactjsreact-nativeeventsinput

Utilize an array of JSON objects to populate an array of interfaces in Angular/Typescript

I am currently facing a dilemma - my code is functioning without any errors when executed, but my text editor is flagging an issue stating that the property 'categories' does not exist on type 'CategoryInterface[]' (specifically on the ...

javascriptjsonangulartypescript

AJAX's PUT method encountering issues in Google Chrome

I have successfully implemented this in Mozilla and IE, but for some unknown reason, it is not working on Chrome. In Chrome, the error callback is triggered every time with an error code of zero. Numerous posts on Stackoverflow keep mentioning how all majo ...

javascriptjqueryajaxrestgoogle-chrome