J'ai deux éléments « src » et « dest »Comment placer un élément exactement à la même position visible, comme un autre?
« src » et « dest » sont dans différents nœuds DOM, qui ne peuvent pas avoir le même parent.
J'ai besoin de placer l'élément "src" dans la même position visible que "dest".
L'élément "src" doit également avoir les mêmes dimensions que "dest".
je code suivant pour le cas, lorsque "src" et "dest" ayant le même 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();
Malheureusement, cela ne fonctionne. L'élément "src" a un déplacement en bas et à gauche, pour cela je ne peux pas trouver la raison.
Peut-être, je fais quelque chose de mal ...
Comment le faire juste pour deux cas?
- "src" et "dest" ayant le même grand-parent
- "src" et "dest" does't ayant le même parent. Peut-être que l'arrière-grand-grand-parent est commun aux deux.
Mise à jour:
J'ai arrangé un simple document HMTL, qui fait d'un simple échange visuel d'un élément à un autre:
<!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>
Il ne fonctionne pas correctement. Après "swapping", l'élément "src" a un déplacement étrange vers la direction haut-gauche sur ~ 30 pixels.
J'utilise la dernière version de Safari 5, si j'ai un sens.
Mise à jour 2:
Malheureusement, cela ne fonctionne pas non plus. Je mis à jour mon exemple:
<!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>
Voir http://stackoverflow.com/questions/683339/how-do-i-find-the-absolute-position-of-an-element-using-jquery/683564#683564 –