Geek Answers Handbook

Move the applet without rebooting

I want to transfer an applet from a div element to another div element without reloading it. I do not want to use absolute positioning. Is there any way to do this?

I try this, but it does not work:

 <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 to answer this fiddle

The solution proposed by @goldenparrot with outerHTML works, but not in all browsers (at least in Firefox ESR).

As pointed out in @kritzikratzi's answer and in @biziclop's answer, there are known problems in firefox with reloading iframe, flash-object, plug-in in firefox.

I think (but I'm not sure) that the only solution is to use absolute positioning (@cuzzea). However, I asked this question because I wanted to find another way ("I do not want to use absolute positioning"). That is why I do not get an answer.

Thanks for your contributions.

+7
source share
4 answers

I do not think that what you are looking for is possible, but if you want to use positioning, you can try the following:

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 and done better. For this example, you need all nested divs to have a relative position. I also gave the width and height 200, but you can make it dynamic, something like:

 var width = el.width()

or

 var width = el.children('applet').attr('width');
+3
source

Now I came 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 be closed. I mean: <applet></applet>

Also important:

There are several things you should know about the solution.

  • The solution only works for the first time. That is, you can move it to div1 or div2.
  • HTML will break if you press two buttons or one button more than once.
  • You must write the function toDiv2() , replacing the words ( Div1 && Div1 ) in toDiv1() with the words ( Div2 && Div2 ).

I publish this, even if it’s not the best solution, because, I believe, you can understand how to make it work even for a few clicks, if you are on the right track. And you should be seeing this answer.

EDIT:

Here is the main decision that is trying to make:

appendChild will create a new item and add it. And if a new item is created, this is not what you want.

outerHTML is an HTMLElement property that you can change. For a demonstration of outerHTML, see How fiddle Works.

+2
source

may be an example of “just out of luck”, googling shows a bit that there are a lot of browser errors related to sound:

can't move iframe in dom without rebooting:

can't move plugin in dom

your best snapshot can be played using element.adoptNode (...) and the already mentioned outerHtml. good luck :)

(I would like to test, but because of everything java mess on os x I can’t even run the atm java plugin)

+1
source

I tried the following in IE8

 applet=document.getElementById('myapplet'); applet.outerHTML='<div id="my_div">'+applet.outerHTML+'</div>';

and this causes the applet to be stopped, destroyed, entered and started again. So this seems to demonstrate that outerHTML is not working. In addition, outerHTML in Firefox 13 puts a new line as the first character. Just be careful when using the contents returned by outerHTML to search.

Also, the gontard source post seems to work on Firefox 13 (without using outerHTML or other tricks)

+1
source

More articles:


All Articles