Position the div in the center and enhance the function to dynamically adjust when the user attempts to resize the window

Question

Position the div in the center and enhance the function to dynamically adjust when the user attempts to resize the window

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, ((windowHeight - $(this).outerHeight()) / 2) + scrollTop) + "px");
    this.css("left", Math.max(0, ((windowWidth - $(this).outerWidth()) / 2) + scrollLeft) + "px");
    return this;
}

$('div').center();

I attempted to position the div in the center of the page using a specific function.

However, when the window is resized or users zoom in or out, the function does not update the new position.

Is there a way to execute this function when users resize the window or zoom in or out?

javascript jquery css

Answer 1

Answer №1

If you're looking to achieve a specific outcome, the jQuery resize method could be the solution you need:

$(window).resize(function () {
    $('div').center();
});

Alternatively, you can accomplish this using a straightforward DOM approach:

window.onresize = function () { $('div').center(); };

Keep in mind that using the plain DOM method might override existing handlers attached to the window resize event and may not work consistently across different browsers.

It's important to ensure that these lines are within your function so they update properly when the handler is triggered:

var wH = $(window).height();
var wW = $(window).width();
var sT = $(window).scrollTop();
var sL = $(window).scrollLeft();

Answer 2

If you're looking to achieve a specific outcome, the jQuery resize method could be the solution you need:

$(window).resize(function () {
    $('div').center();
});

Alternatively, you can accomplish this using a straightforward DOM approach:

window.onresize = function () { $('div').center(); };

Keep in mind that using the plain DOM method might override existing handlers attached to the window resize event and may not work consistently across different browsers.

It's important to ensure that these lines are within your function so they update properly when the handler is triggered:

var wH = $(window).height();
var wW = $(window).width();
var sT = $(window).scrollTop();
var sL = $(window).scrollLeft();

Position the div in the center and enhance the function to dynamically adjust when the user attempts to resize the window

Answer №1

Similar questions

Adding items dynamically to a React-Bootstrap accordion component can enhance the user experience and provide a

The incremental BR tag counter seems to be malfunctioning, there appears to be a missing element

Setting up VideoJS Flash backup

How can I send a current variable through PHP?

Struggling with my jQuery Ajax call, need some help

Using React to organize content within a material-ui layout efficiently

Discover the process of integrating PWA features into an Express web application

Transformation of JSON output from the controller into a sophisticated entity: Razor

The JavaScript onunload event handler

What is the ideal destination for my Ajax request to be sent?

Establishing the module exports for the NextJS configuration file

Is there a way to retrieve JSON data from a specific URL and assign it to a constant variable in a React application?

I'm having trouble getting the npm install for classnames to work within my li tag

Control the access to shared resources when dealing with asynchronous functions in JavaScript

Localizing Dates in JavaScript

Hide Details tag only on mobile view

How to position two divs in a row using Bootstrap

The jQuery AJAX function encountered an error with the following details: "readyState" is 0, "responseText" is empty, "status" is 0, and "statusText" is "error"

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Troubleshooting: Unresponsive behavior of CSS table