Home/ Questions/Q 941843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T22:10:46+00:00

I have two elements src and dest src and dest are in different DOM-nodes,

  • 0

I have two elements “src” and “dest”

“src” and “dest” are in different DOM-nodes, that can not have the same parent.

I need to place “src” element in the same visible position, as “dest”.

“src” element must also have the same sizes, as “dest”.

I have following code for case, when “src” and “dest” having the same parent: 

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 works. “src” element has displacement to bottom and left, for that i cannot find the reason.

Maybe, i do something wrong …

How to do it right for two cases ?

  1. “src” and “dest” having the same grand-parent
  2. “src” and “dest” does’t having the same parent. Maybe grand-grand-grand-parent is the common for both.

Update:

I have arranged a simple HMTL document, that does a simple visual swapping of one element with another:

<!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>

It does not work correctly. After “swapping”, “src” element has a strange displacement to top-left direction on ~30 pixels.

I use latest version of Safari 5, if i makes sense.

Update 2:

Unfortunately, this also does not works. I updated my example:

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tested it here:http://jsfiddle.net/YEzWj/1/

    Using your second example make your CSS like this:

    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; 
}

    EDIT: After playing around with it some, it did not work in all circumstances. I decided to change the javascript. Note: My example toggles the display of src and dest within the holder, making holder the same size as dest so the border shows outside the dest and 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: Remove the src.click() event if you wish it to NOT go back to the dest on src click.

    • 0