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

Display visual information without requiring the parameters to be filtered beforehand in vue.js

Retrieval of each single row from a PHP-generated JSON dataset

Obtaining a compressed file via a specified route in an express API and react interface

Troubleshooting head.js and jQuery problems in Chrome/Firefox 5

Dropzone failing to verify the maximum file limit

All browsers experiencing issues with autoplay audio function

Stop clicks from interfering with dragging in three.js

What are some methods to prevent cookies from being overridden?

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

Printing in ASP.Net without displaying a dialog box

What is the best way to target specific text within the DOM without including text within attributes?

Leverage the router through the getServerSideProps method

Transform a Mongoose object into a specific JSON schema

Guide to running code repeatedly in node.js

Using JavaScript to locate and emphasize specific words within a text, whether they are scattered or adjacent

"The controller's $scope isn't being updated within the DIV following a routing change

Preventing child element clicks in Angular 5: A helpful guide

What is the best way to refresh a page during an ajax call while also resetting all form fields?

Filter the specific output in a generator function

how to use serializeArray() to create an array with named keys