Menu
I want to move an applet from a div element to another div element without reloading it. I don't want to use absolute positioning. Is there a way to do this ?
I try this but it's not working:
<html>
<head>
<script type="text/javascript">
function toDiv1() {
var appletElt = document.getElementById('myApplet');
document.getElementById('div1').appendChild(appletElt);
}
function toDiv2() {
var appletElt = document.getElementById('myApplet');
document.getElementById('div2').appendChild(appletElt);
}
</script>
</head>
<body>
<div id ="myApplet">
<applet width="200" height="200"
codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
code="Smiley.class"
name="Smiley">
</applet>
</div>
<div id="div1"></div>
<div id="div2"></div>
<div>
<button onclick="toDiv1()">toDiv1</button>
<button onclick="toDiv2()">toDiv2</button>
</div>
</body>
</html>
You can try your answer on this fiddle
The solution proposed by @goldenparrot with outerHTML works but not on all the browser (at least Firefox ESR).
As stated in the @kritzikratzi answer and in the @biziclop answer, there are known problems on firefox with the reloading of iframe, flash object, plugin in firefox.
I think (but i am not sure) that the sole solution is to use absolute positionning (@cuzzea). However, i asked this question because i wanted to find another way ("I don't want to use absolute positioning"). This is why i will award no answer.
Thanks for your contributions.
226
I don't think that what you are looking for is posible, but if you want to use positioning you can try this:
http://fiddle.jshell.net/JRZXF/12/
HTML:
<div style="position:relative">
<div>
To test your code, make the smiley sad, then move it to another div. It must be still sad.
</div>
<br>
<div id ="myApplet">
<applet width="200" height="200"
codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
code="Smiley.class"
name="Smiley">
</applet>
</div>
<div id="div1"></div>
<br>
<div id="div2"></div>
<br>
<div>
<button id="button1">toDiv1</button>
<button id="button2">toDiv2</button>
</div>
</div>
Javascript:
function toDiv1() {
$('#div1,#div2').empty();
var el = $('#myApplet'),
div = $('#div1'),
clone_div = $('<div>');
var width = 200,
height = 200;
clone_div.css({width:width,height:height});
div.append(clone_div);
el.css({
position:'absolute'});
el.css({
left:clone_div.offset().left,
top:clone_div.offset().top
});
}
function toDiv2() {
$('#div1,#div2').empty();
var el = $('#myApplet'),
div = $('#div2'),
clone_div = $('<div>');
var width = 200,
height = 200;
clone_div.css({width:width,height:height});
div.append(clone_div);
el.css({
position:'absolute'});
el.css({
left:clone_div.offset().left,
top:clone_div.offset().top
});
}
$('#button1').click(toDiv1);
$('#button2').click(toDiv2);
Of course this code can be improved a lot and made to work nicer. For this example to work you need all the nested divs to have position relative. I also gave the width and height 200 but you can make it dinamic, something like:
var width = el.width()
or
var width = el.children('applet').attr('width');
Now, I have come up with a brilliant( :D ) solution using outerHTML:
function toDiv1() {
var appletElt = document.getElementById('myApplet');
var Div1 = document.getElementById('div1');
var parts = Div1.outerHTML.split(">"+Div1.innerHTML+"<");
// newHTML can also be appletElt.outerHTML
var newHTML = Div1.innerHTML + appletElt.outerHTML;
// Deleting Div1 because you will have multiple divs on page with id='div1'!
Div1.parentNode.removeChild(Div1);
appletElt.outerHTML = parts[0] + newHTML + parts[1];
}
IMPORTANT: First, your applet tag must close too. I mean like: <applet></applet>
Also Important:
There are some things you should know about the solution.
toDiv2() function by replacing words (Div1 && div1) in toDiv1() with words (Div2 && div2).I am posting this even if isn't the best solution because, I believe you can figure out how to make it work even for multiple clicks if you are on right track. And, you should be, after seeing this answer.
EDIT:
Here is the basic thing solution tries to do:
appendChild will create a new element and append it. And if a new element is created, it's not what you want.
outerHTML is a property of HTMLElement that you can change. For demonstration of outerHTML see how this fiddle works.
45
might be a case of "simply out of luck", googling a bit shows there are many browser bugs that sound related:
can't move iframe in dom without reloading:
can't move plugin in dom
your best shot might be playing around with element.adoptNode(...) and the already mentioned outerHtml. good luck :)
(would love to test, but because of all the java mess on os x i can't even run the java plugin atm)
41
I tried the following on IE8
applet=document.getElementById('myapplet');
applet.outerHTML='<div id="my_div">'+applet.outerHTML+'</div>';
and this causes the applet to be stopped, destroyed, initted and started again. So this seems to demonstrates that outerHTML does not work. Also, outerHTML on Firefox 13 puts a newline as the first character returned. Just beware when using it to search for the content returned by outerHTML.
Also, the original post by gontard seems to work on Firefox 13 (without using outerHTML or other tricks)
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
