Home/ Questions/Q 7759161
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:33:26+00:00

So I have a piece of code: jQuery.fn.center = function(parent) { parent = this.parent();

  • 0

So I have a piece of code: 

jQuery.fn.center = function(parent) {
parent = this.parent();
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}

This code grabs an element and moves it to the center of the parent. Works nicely. There are a couple of things I would like it to do aside of what it’s doing.

  1. I need it to float above all other elements in that parent. A z index more or less. I tried to apply a z-index, but it didn’t seem to work. I dunno if I may have been doing it wrong, or if there is a better way.

  2. I need it to move back to the position it was in. The way this works, is the block is gonna be positioned on the page (via CSS), and when the user clicks, it moves it to the center of the page, as the code is already doing. Is there any way that, if a user clicks an exit button, I can program said button to move it back to where it originally was? i don’t know if I can pass variables around in jQuery.

  3. This option is more for aesthetics, and i don’t deem it necessary, but would like it if you have a little extra time. I would like the block to slide from it’s position to the center of the page, and back, as opposed to just popping there. As I stated, this is just aesthetics and i really don’t need that to happen.

Much appreciated to anyone that can help me out.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tried to implement a similar requirement but It should have all the features that you were looking for. Try DEMO

    I need it to float above all other elements in that parent. A z index
    more or less. I tried to apply a z-index, but it didn’t seem to work.
    I dunno if I may have been doing it wrong, or if there is a better
    way.

    I always use z-index in range of 1001 or greater for such cases. Even in the demo, it works fine. Try this and let us know if you still not working for you.

    I need it to move back to the position it was in. The way this works,
    is the block is gonna be positioned on the page (via CSS), and when
    the user clicks, it moves it to the center of the page, as the code is
    already doing. Is there any way that, if a user clicks an exit button,
    I can program said button to move it back to where it originally was?
    i don’t know if I can pass variables around in jQuery.

    I stored the original position of the element using .data API and restored it back to its original position when close(exit) button is clicked.

    This option is more for aesthetics, and i don’t deem it necessary, but
    would like it if you have a little extra time. I would like the block
    to slide from it’s position to the center of the page, and back, as
    opposed to just popping there. As I stated, this is just aesthetics
    and i really don’t need that to happen.

    You can use .animate instead of CSS which will transcend the element from it original position to the destination position in specified time.

    • 0