All geek questions in one place

How to place one element in exactly the same visible position as the other?

I have two elements: "src" and "dest"

src and dest are in different DOM nodes that cannot have the same parent.

I need to put the "src" element in the same visible position as "dest".

Element

src must also be the same size as dest.

I have the following code for the case where "src" and "dest" have the same parent element:

src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());

// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();

Unfortunately, it does not work. The src element has left and left offsets because I cannot find the reason.

Maybe I'm something wrong ...

How to do it right for two cases?

  • "src" and "dest" have the same grand-parent
  • "src" "dest" . , - .

Update:

HMTL, :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div>
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>

. "" "src" ~ 30 .

Safari 5, .

2:

, . :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        div {
            margin: 0;
            padding: 0;
        }
        .holder {
            position: relative;
            top: 40pt;
            left: 40pt;
            border: black solid thin;
        }
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.css("position", "absolute");
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div class="holder">
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>
+3
3

: http://jsfiddle.net/YEzWj/1/

, CSS :

div { 
    position:relative;
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute;
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

: , , . javascript. . src dest , , dest, dest src.

jQuery(function($){ 
    // Common items, to deal with 
    var src = $(".src"); 
    var dest = $(".dest");
    var holder=$(".holder");
    holder.width(dest.width()); 
    holder.height(dest.height());
    // Setup 
    src.hide(); 
    // Interaction 
    dest.click(function(){ 
        src.show();
        src.css("position", "absolute"); 
        src.width(dest.width()); 
        src.height(dest.height()); 
        src.offset(dest.offset()); 
        dest.hide();
     }); 
    src.click(function(){ 
        dest.show();
        src.hide(); 
    }); 

});

EDIT2: src.click(), , dest. src.

+1

dest , top left .

src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());

, , p body, . reset, :

p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}
+1

offset , , :

dest.offset(src.offset());
0

Source: https://habr.com/ru/post/1755765/

More articles:


All Articles