Controlling the size of an applet based on browser window size.

terahurtz

Controlling the size of an applet based on browser window size.

in Integration and Hardware • 1 year ago

Hello.

I'm trying to create an applet that will essentially be the website itself. The only question I have at this point is about resizing applets. Is it possible to make an applet take up the entire browsing window? And from there, is it possible to resize the browsing window and have the applet follow based on the browser window's dimensions?

To do so, I would need some command to get the width and height of the window.

I'm pretty sure I can do that with the "document.width" and "document.height" commands in JavaScript, but how would I allow that to talk to processing, or is there something I can do in processing to access that information?

Thanks for any and all help.

Replies(5)

a__g

Re: Controlling the size of an applet based on browser window size.

1 year ago

I certainly didn't think this was possible, but after checking up on the APPLET tag, it actually has attributes for width and height. So, if you create a JavaScript and hook a listener to the right event this should work... so I tested:

Here's the code I tested with... I've only tested this with FF.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize processing applet</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<applet id="myapplet" height="200" width="200" archive="sketch_feb02b.jar" code="sketch_feb02b.class">
</body>
</html>

$(document).ready(function(){
$(window).resize(function() {
$('#myapplet').attr( 'width', $(window).width() );
$('#myapplet').attr( 'height', $(window).height() );
});
});

terahurtz

Re: Controlling the size of an applet based on browser window size.

1 year ago

Eek! JQuery! I was actually trying to avoid having to use that stuff lol. I don't know why, but I just can wrap my head around it. I really need to just have someone teach me.

Thank you for the feedback though. It did give me some perspective. I'll see what I can do.

a__g

Re: Controlling the size of an applet based on browser window size.

1 year ago

I had the same problem at first, but after some time with plain javascript I had no problem with it. Here's the non-JQuery script. (Be aware, this is not IE safe! Then you'll have to use attachevent..)

function myfunction(){
var applet = document.getElementById( 'myapplet' );
applet.setAttribute('width', window.innerWidth );
applet.setAttribute('height', window.innerHeight );
}
window.addEventListener( 'resize', myfunction, false );

terahurtz

Re: Controlling the size of an applet based on browser window size.

1 year ago

So here's just an update of what I have.

This is the processing code.

int WIDTH = 600;
int HEIGHT = 600;
void setup()
{
size(600,600);
frame.setResizable(true);
}
void draw()
{
background(0);
fill(255,0,0);
rect(WIDTH/2,HEIGHT/2,30,30);
reSize();
}
void reSize()
{
WIDTH = getSize().width;
HEIGHT = getSize().height;
}

This is the html file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize processing applet</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<applet id="myapplet" height="100%" width="100%" archive="GHM.jar" code="GHM.class">
<script type="text/jabascript">
<!--
function getMyWidth()
{
return document.body.clientWidth;
}
function getMyHeight() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
//window.alert( 'Width = ' + myWidth );
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
$(document).ready(function(){
$(window).resize(function() {
$('#myapplet').attr( 'width', $(window).width() );
$('#myapplet').attr( 'height', $(window).height() );
});
});
-->
</script>
</body>
</html>

All I want is to have the applet assume full browser window resolution, and the ability to resize. The application should draw a small red box in the center of the screen. When I run this code, I don't even see the applet. I was seeing it for a little bit, but then .. IDK. I broke it I guess. Any suggestions?

patakk

Re: Controlling the size of an applet based on browser window size.

1 year ago

I asked the very same question few days ago and I came up with this solution (last post).

Top Reply