wilq a écrit :
Now I got new problem - I got problem to appendChild it back to
orgiginal DIV ech... This problem sux so hard ;(
example 1 :
function moveThisDiv(divId, target) {
divId = documentGetElementById(divId);
target = target=='body'?
document.getElementsByTagName('BODY')[0] :
documentGetElementById(target);
target.appendChild(divId);
}
<button onclick="moveThisDiv('darken', 'theDiv');">
move 'darken to the div 'theDiv' </button>
<button onclick="moveThisDiv('darken', 'body');">
move back 'darken' to the end of 'body' </button>
example 2 :
function $(id) { return document.getElementById(id); }
function moveInBottom(divId, target) {
target = target=='body'?
document.getElementsByTagName('BODY')[0] :
$(target);
target.appendChild($(divId));}
function moveBefore(divId, target) {
$(target).parentNode.insertBefore($(divId), $(target));
}
<button onclick="moveInBottom('darken', 'theDiv');">
move 'darken to the end of div 'theDiv' </button>
<button onclick="moveInBottom('darken', 'body');">
move 'darken to the end of the 'body' </button>
<button onclick="moveBefore('darken', 'theDiv');">
move back 'darken' before 'theDiv' </button>
Thanks for reply and for scriptings. I made my own solution meanwhile.
The problem with copying content back was that the applyChild used on
document.getElementById('someDiv') movies all content of this element
with "<DIV id='someDiv'> </div>" that this content was IN. So I just
have to make own function that copies all content of DIV leaving a
braces <DIV id(...)</div> in place. It's done via those functions:
childrens=document.getElementById('d1').childNodes;
while(childrens[0])
document.getElementById('d3').appendChild(childrens[0]);
or in optimized, variable-less version:
while(document.getElementById('d1').childNodes[0])
document.getElementById('d3').appendChild(document.getElementById('d1').childNodes[0]);
The rest make new DIV positioned and sized the same as its parent. It
works well in FF, Opera, IE 7.0. I hope that it will help someone in
future. Have nice bugtracking in future heh!.
<html>
<head>
<script type="text/javascript">
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
function zmien()
{
var childrens;
if (document.getElementById('d1').innerHTML)
{
childrens=document.getElementById('d1').childNodes;
while(childrens[0])
document.getElementById('d3').appendChild(childrens[0]);
document.getElementById('d3').style.width=document.getElementById('d1').offsetWidth
+'px';
document.getElementById('d3').style.height=document.getElementById('d1').offsetHeight
+'px';
document.getElementById('d3').style.top=findPos(document.getElementById('d1'))
[1]+'px';
document.getElementById('d3').style.left=findPos(document.getElementById('d1'))
[0]+'px';
}
else
{
childrens=document.getElementById('d3').childNodes;
while(childrens[0])
document.getElementById('d1').appendChild(childrens[0]);
}
}
</script>
</head>
<body marginheight="0" marginwidth="0"><DIV id="d3"
style="position:absolute;z-index:4;backgroud-color:#00ff00"></DIV>
<Center><table><tr><td width="200" height="40" bgcolor="blue"
align="left"><BR><BR><BR>
<DIV id="d1">
Tu tresc pierwszego div-a asdf as dfsa fsf das fad s
<table><tr><td>tutaj tabelka</td></tr></table>
<P> KOLEJNY PARAGRAF</P>
</DIV>
</td></tr>
<tr><td width="200" height="40" bgcolor="red">
<DIV id="d2"></DIV>
</td></tr>
</table>
<input type="button" value="zmien miejscami" onclick="zmien()">
<div id="x"></div><div id="y"></div>
</center>
</body>
</html>
)). Second: I