Fluid Canvas
Fluid Canvas allows you to expand the size of your app based on the user’s browser dimensions. It left aligns your app in Canvas and takes up the full height and width of the user’s browser. You can see some of the implementations in our games gallery.
Configuring the App Settings
In order to enable Fluid Canvas you will first need to configure the settings for your app within the App Dashboard. Navigate to Settings > Basic > App on Facebook to adjust these settings.
Canvas Width
Set your width to "Fluid" which will set the width of the iframe that contains your app to 100%. Your content will then be left-aligned and and the iframe will resize to fill the page as the user changes the width of their browser.
Canvas Height
Set the Canvas Height to "Fluid" which will set the iframe height is 100%. The iframe will resize to the height of the user's browser and shows scroll-bars if your content exceeds the available height.
Supporting Fluid Canvas in your App
Once you have enabled the Fluid Width and Fluid Height settings your app will need to support variable dimensions as well as dynamic resizing, as a user can resize their browser at any time.
Your app should scale to utilize all available screen space and if necessary listen for the JavaScript onresize event to adjust it's layout dynamically. In many cases HTML and CSS can handle a dynamic layout without the need of JavaScript but if you do need to execute code on resize, use the JavaScript window.onresize event.
HTML example
For an HTML app set the height and width of the apps parent element to 100%. If you need to reorient any UI elements within your HTML app, you can do so via the window.onresize event as with any normal HTML page.
The example code below defines a <div> HTML element, sets the background color to blue and fills the available browser dimensions. It will listen for the window.onresize event and print out the current <div> dimensions if the browser is resized.
<html>
<head>
<title>Fluid Canvas HTML Example </title>
</head>
<body style="margin:0; padding:0; border:0; background-color:#000000">
<div id="allContent" style="background-color: #0000FF; height:100%">
<div id="output" style="color: #FFFFFF;" />
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID',
});
function echoSize() {
document.getElementById('output').innerHTML =
"HTML Content Width: " + window.innerWidth +
" Height: " + window.innerHeight;
console.log(window.innerWidth + ' x ' + window.innerHeight);
}
echoSize();
window.onresize = echoSize;
</script>
</body>
</html>
Flash example
If you are building a Flash app you will first need to set the dimensions of your <object> tag to 100% for both Height and Width, this will allow your Flash SWF to fill the entire space available to it. Next your ActionScript code will need to handle the Event.RESIZE event for the stage object. This event is dispatched every time the user changes the size of the SWF. Use it to orientate your UI elements accordingly.
The example code below defines an <object> HTML element with height and width set to 100% and then loads a Flash SWF with a red background into it. The SWF will listen for the Event.RESIZE event and print out the current <object> dimensions if the browser is resized.
Canvas Page HTML
<html>
<head>
<title>Fluid Canvas Flash Example</title>
</head>
<body style="margin:0; padding:0; border:0; background-color: #000000">
<div id="allContent">
<div id="flashContent">
<h1>Example SWF</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/
download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</div>
<div id="fb-root"></div>
<script
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"
type="text/javascript">
</script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID',
});
//Flash display
var flashvars = {};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FF0000"
};
var attributes = {
id:"ExampleSWF"
};
swfobject.embedSWF(
"example.swf",
"flashContent",
"100%",
"100%",
"10.0.0",
"expressInstall.swf",
flashvars,
params,
attributes
);
</script>
</body>
</html>
ActionScript
Example Flash app has the following properties:
| Name: | example.swf |
| Background Color: | #FF0000 |
| Height: | 300 |
| Width: | 800 |
| FPS: | 24 |
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.text.TextFormat;
public class Main extends Sprite {
private var _textBox:TextField = null;
public function Main():void {
if (stage) {
init();
}
else {
addEventListener(Event.ADDED_TO_STAGE, init);
}
}
private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
this._textBox = new TextField();
this._textBox.x = 10;
this._textBox.y = 10;
this._textBox.textColor = 0xFFFFFF;
this._textBox.width = 200;
this.addChild(this._textBox);
echoSize();
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, this.echoSize);
}
private function echoSize(e:Event = null):void {
this._textBox.text = "SWF Width: " + stage.stageWidth
+ " Height: " + stage.stageHeight;
var myTextFormat:TextFormat = new TextFormat(null, 16);
this._textBox.setTextFormat(myTextFormat);
}
}
}
Updated about 4 months ago