OpenFL stage height adjustment with steady width

Hello,

I am making a test web page using plainly openfl that targets html5. The page is supposed to have a bunch of rows adding in successive order (top to bottom). My problem is when I reach the bottom of the stage, the html browser is still locked with the stage width and height as provided in the project.xml. Therefore I cannot see the new rows created. How can I make the browser show up side drag bars like a normal web page would do if the page is too long? Likewise, also to maintain its width, while its height increases?

Probably an example for the concept that I am trying to achieve is the haxe website, that has steady footer and header and you can scroll away on its contents.

Any help is highly appreciated.

Our default for HTML5 (if you don’t set <window width="" height="" />) is going to scale to fit the size of it’s DIV parent. The downside is that if it’s parent doesn’t have a locked size, it may resize forever (if anyone has ideas to improve that situation, let me know)

However, this means you could set the DIV containing the OpenFL content to a set size, and resize it later. It will dispatch Event.RESIZE to the OpenFL content, and you can handle accordingly.

So with a little work, I think you should be able to get exactly what you want?

I think I am getting there (with regards to the browser resizing the openfl content)… I changed the style for the body in the output index file. however inside the openfl content, when I add rows and have exceeded the stage height, I’m supposed to increase the stage height as well, but I don’t know if I am doing it right. This is my code for every added row:

if (rows[rows.length - 1].y + row.height > Lib.current.stage.stageHeight)
{
//h is the total height of all rows
	Lib.current.stage.window.resize(1920, h);
	var html5Window:Dynamic = Reflect.getProperty(Lib.current.stage.window, "backend");
	Reflect.setField(html5Window, "setHeight", h);
}

The whole stage and everything in it is getting stretched… all I got was snippets from other blogs. Hope you can point me to where I should look for info regarding openfl canvas or some proper way to handle stage or canvas resize.

Many thanks.

So, you want something like this:

<window width="0" height="0" />

Then you want CSS that doesn’t set the width/height to 100% of window, but instead uses a hard-coded value, like this:

<div id="openfl-content" style="width: 550px; height: 440px;" />

Then you should be able to resize at will by doing something like this:

var element = js.Browser.document.getElementById ("openfl-content");
element.style.height = "800px";

Listen to Event.RESIZE on the stage, and I believe it will trigger for you:

stage.addEventListener (Event.RESIZE, function (e) {
    trace (stage.stageWidth);
    trace (stage.stageHeight);
});

Thanks singmajesty! Actually I think this is what I have been looking for. I’ll try it and I’ll let you know if hits the jackpot.

Thanks!