OpenFL stage height adjustment with steady width


#1

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.


#2

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?


#3

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.


#4

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);
});

#5

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!