Is there a jQuery script available that can keep a div centered in the middle of the window and adjust its position when the window is resized? I am working on a lightbox plugin and it's crucial for the div to stay centered. CSS hasn't been effective in achieving this so far.
Additionally, I need the div to remain centered even when another box with larger dimensions is opened. You can see examples on this page: . When you open an image first, followed by the div, you'll notice that the div isn't centered initially. However, it gets centered when closed and reopened due to the .center() function triggered by clicking on a WowBox link. My goal is to ensure that it always stays centered without any issues.
The code snippet I'm currently using to center the div is as follows:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
I aim to implement a solution where the div remains centered upon window resizing and adapts its position if the box dimensions change. The current implementation falls short in meeting these requirements. Can anyone offer assistance with this?
Thank you in advance,
Nathan