Login/Register
Move an applet without reloading it
Asked Answered
javajavascripthtmlapplet
H

4

7

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.

Hirza answered 22/8, 2012 at 11:4 Comment(8)
What move code triggered a reload? Show us what you have tried. – Bedsore
Thanks, but I don't know a solution either – Bedsore
This might be a related Firefox bug: #3963783 – Backus
@Backus Yes it seems :( i think the sole solution is to use absoule positionning. – Hirza
Did you try moving the div on the whole to another node? – Prepossess
Do you have access to information about the API for the applet or the source code? It looks as though there is no good way to keep the state of the applet intact as it is moved in the DOM (and the other workarounds will present maintenance of flexibility issues) so the best overall solution would likely be to use marshaling for persistence and reduce the need for state. – Ripon
@MattWhipple No i can't modify the applet source code. – Hirza
@MattWhipple no i have no information about the api. – Hirza
M
3

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');
Mingle answered 16/9, 2012 at 18:59 Comment(1)
Yes, i think i will use absolute positionning. Thanks for this contribution. – Hirza
C
2

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.

  1. The solution only works the first time. That is, you can move it to div1 or div2.
  2. The HTML WILL break if you click two buttons or one button more than once.
  3. You have to write 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.

Condemn answered 10/9, 2012 at 9:23 Comment(5)
Thanks for this answer. I tried this fiddle. It works on chrome but not on firefox. – Hirza
Oh but I tested it using firefox 14.0.1 and it works fine. any error you get in firefox? (ctrl+shift+j) – Condemn
I get this error : Div1.outerHTML is undefined. I am running it on Firefox ESR 10. – Hirza
Ah well that fiddle might have compatibility issues but you got the point right? on how to use outerHTML – Condemn
Yes, i understand. But i really need the FF ESR compatibility – Hirza
L
1

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)

Liddie answered 12/9, 2012 at 3:40 Comment(1)
Yes it seems that these bugs are related. I tried the @goldenparrot solution (with firefox but outerHTML) but it did not work with firefox ESR. – Hirza
B
1

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)

Bronchopneumonia answered 4/1, 2013 at 14:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.