Show a Java applet on clicking on HTML Text elements

I am trying to make a jquery plugin for which the description is given below. I haven't had much experience working in jQuery so I really needed some help.

Here is the Java Applet I am talking about http://www.inference.phy.cam.ac.uk/dasher/TryJavaDasherNow.html

The applet does some operation the result is shown in the text box in the applet.

Consider a virtual keyboard whi开发者_运维技巧ch comes up when the user clicks on a text box or a text area element. For eg:

Similarly, I wanted that the applet should appear when the user clicks on TextBox/TextArea element and after some operations, the result in the applet text box should go into the html text element. I hope I am able to make myself clear. Please help me regarding this. I haven't been working with jQuery but this can be done with its use.

Assuming your applet id is id="myapplet" Give it the style display:hidden so it's initially hidden. Place it anywhere in your HTML where you want it to appear when user clicks on a TEXTAERA or text INPUT.

<object id="myapplet" style="display:none;">......</object>

Then with jQuery you can do

$('textarea, input').click(function(){
$('#myapplet').show();
});

This will show the applet when you click TEXTAREA or INPUT.

Update As per your comment below, if you want to open the applet over the page where user can drag it around, you can use jQuery's UI dialog function. Read more at http://jqueryui.com/demos/dialog/

First Put your java object inside an HTML file and name it applet.html. No need to have display:none on your object. Then you can do

$('textarea, input').click(function() {
    var $div = $('<div title="Java Applet"></div>');
    $div.load('applet.html', function() {
        $div.dialog({autoOpen: false});
    });
});

Remember to include the JS and CSS files for jQuery UI in addition to jQuery.

Place this in your head

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 

and place those before closing body tag

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>