Using Jquery wrap function with absolute placed element

Sooraj

I'm trying to use jQuery wrap function on an element which is positioned absolute. Following is my code.

On clicking the child element I'm wrapping the same with another div , but its not working. Instead the wrapper element appears on the top of the screen. How can I manipulate css or js to wrap the child element.

$(document).ready(function() {
  $("#child").click(function() {
    $(this).wrap("<div class='wrapper'></div>")
  });
});
#container {
  position: relative;
  height: 500px;
  width: 600px;
  background: #ccc
}
#child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #444;
  border: 2px solid red;
  height: 200px;
  width: 200px;
}
.wrapper {
  border: 1px dashed green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="child">

  </div>
</div>

Pawan Nogariya

Just update the wrapper class

$(document).ready(function() {
  $("#child").click(function() {
    $(this).wrap("<div class='wrapper'></div>")
  });
});
#container {
  position: relative;
  height: 500px;
  width: 600px;
  background: #ccc
}
#child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #444;
  border: 2px solid red;
  height: 200px;
  width: 200px;
}
.wrapper {
  border: 1px dashed green;
  height: 200px;
  width: 200px;
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
   margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="container">
  <div id="child">

  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Wrap substring of element content with an element using jQuery

From Dev

Wrap each line text to an element using JQuery

From Dev

How to wrap a string using element from the list using jquery

From Dev

Fade and translate the "position:absolute" element from top to bottom using jquery

From Dev

Replace a single letter wrap with span element using jquery

From Dev

Find parent of unwrapped element and use it in .wrap() using jquery

From Dev

Find parent of unwrapped element and use it in .wrap() using jquery

From Dev

How to add !important in position:absolute using jQuery.css() function?

From Dev

How to add !important in position:absolute using jQuery.css() function?

From Dev

How to wrap the jQuery function

From Dev

Wrap jQuery plugin with a function

From Dev

Wrap function parameters complexType in an element

From Dev

How to wrap an element with a div in jQuery?

From Dev

Wrap element after image with jquery

From Dev

Wrap text inside of an element with jQuery

From Dev

wrap $ in span using jQuery

From Dev

Element with position absolute being placed relative to non-positioned parent element

From Dev

Using jQuery function if element width is valid

From Dev

Is there a way to wrap a jquery function to an object?

From Dev

Wrap function Jquery for multiple elements

From Dev

Wrap Angular App in a jQuery function

From Dev

Floating inside an absolute-positioned div, placed inside a relative positioned element

From Dev

Evaluate absolute value of array element in function

From Dev

Evaluate absolute value of array element in function

From Dev

wrap method using function as parameter

From Dev

wrap method using function as parameter

From Dev

Using jQuery to wrap elements in a hyperlink

From Dev

Wrap groups of elements using jQuery

From Dev

Using jQuery to wrap elements in a hyperlink

Related Related

  1. 1

    Wrap substring of element content with an element using jQuery

  2. 2

    Wrap each line text to an element using JQuery

  3. 3

    How to wrap a string using element from the list using jquery

  4. 4

    Fade and translate the "position:absolute" element from top to bottom using jquery

  5. 5

    Replace a single letter wrap with span element using jquery

  6. 6

    Find parent of unwrapped element and use it in .wrap() using jquery

  7. 7

    Find parent of unwrapped element and use it in .wrap() using jquery

  8. 8

    How to add !important in position:absolute using jQuery.css() function?

  9. 9

    How to add !important in position:absolute using jQuery.css() function?

  10. 10

    How to wrap the jQuery function

  11. 11

    Wrap jQuery plugin with a function

  12. 12

    Wrap function parameters complexType in an element

  13. 13

    How to wrap an element with a div in jQuery?

  14. 14

    Wrap element after image with jquery

  15. 15

    Wrap text inside of an element with jQuery

  16. 16

    wrap $ in span using jQuery

  17. 17

    Element with position absolute being placed relative to non-positioned parent element

  18. 18

    Using jQuery function if element width is valid

  19. 19

    Is there a way to wrap a jquery function to an object?

  20. 20

    Wrap function Jquery for multiple elements

  21. 21

    Wrap Angular App in a jQuery function

  22. 22

    Floating inside an absolute-positioned div, placed inside a relative positioned element

  23. 23

    Evaluate absolute value of array element in function

  24. 24

    Evaluate absolute value of array element in function

  25. 25

    wrap method using function as parameter

  26. 26

    wrap method using function as parameter

  27. 27

    Using jQuery to wrap elements in a hyperlink

  28. 28

    Wrap groups of elements using jQuery

  29. 29

    Using jQuery to wrap elements in a hyperlink

HotTag

Archive