Issue with api.onresize

Tokyonono

unread,

Nov 15, 2012, 8:15:37 PM11/15/12

to mel...@googlegroups.com

Hi everyone,

In video.js, I think there is an error in api.onresize

While debugging I found that the way we get the parent's width/height is not correct:

node.width and node.height are always undefined.

We could use node.offsetWidth or node.clientWidth or node.scrollWidth depending on what you think is best.

Here is the code I use to test:

api.onresize = function(event){

if (auto_scale) {

// get the parent container max size

var parent = me.video.getScreenCanvas().parentNode;

console.log(parent);

console.log("width : "+parent.offsetWidth+" height : "+parent.offsetHeight);

console.log("width : "+parent. width +" height : "+parent. height);

var max_width = parent.width || window.innerWidth;

var max_height = parent.height || window.innerHeight;

Tokyonono

unread,

Nov 16, 2012, 12:40:52 AM11/16/12

to mel...@googlegroups.com

video.js should be edited like this:

1/ Replace "var max_width = parent.width || window.innerWidth;"

With "var max_width = parent. offsetWidth || window.innerWidth;"

2/ Replace "var max_height = parent.height || window.innerHeight;"

With "var max_height = parent. offsetHeight || window.innerHeight;"

Then, in the HTML file (for full-screen game):

<head>

<!--

html,body{height:100%;margin:0;padding:0;}

body{background-color:black;overflow: hidden;}

#info{position:absolute;top:0;left:0;bottom:0;width:100%;text-align: center;}

#jsapp{width:100%;height:100%;}

-->

</style>

</head>

<body>

</div>

<body>

If you want to add a header (an ad, for example :-) ):

<head>

<!--

html,body{height:100%;margin:0;padding:0;}

body{background-color:black;overflow: hidden;}

#my-ad{position:absolute;top:0;left:0;width:100%;height:50px;text-align:center;}

#info{position:absolute;top:50px;left:0;bottom:0;width:100%;text-align: center;}

#jsapp{width:100%;height:100%;}

-->

</style>

</head>

<body>

</div>

</div>

</body>

Cheers~~

melonJS

unread,

Nov 16, 2012, 1:32:49 AM11/16/12

to mel...@googlegroups.com

seriously ?

I'm confused, i'm pretty sure that I tested it with the current code and that it was working !

But now that I read your post, and check on google, what you're saying all makes sense ... :)

Tokyonono

unread,

Nov 16, 2012, 1:39:36 AM11/16/12

to mel...@googlegroups.com

Well it was working because it was always using full size of the window... I discovered it when I wanted to put an ad on top of the canvas.

melonJS

unread,

Nov 16, 2012, 1:58:14 AM11/16/12

to mel...@googlegroups.com

yes for sure, but I what I meant si that I tested it with a fixed size div in the HTML and it was working... but now that I think again about it, that's maybe because I actually had a width and height property defined ? while offsetWidth and offsetHeight are actually set" by the "browser", does it makes sense ?

Tokyonono

unread,

Nov 16, 2012, 2:41:16 AM11/16/12

to mel...@googlegroups.com

Yeah, it does ^^ Then it wasn't dynamic... and it required width and height to be hard-coded in the HTML (no CSS).

Cian Games

unread,

Jan 30, 2013, 6:36:33 PM1/30/13

to mel...@googlegroups.com

Hi

I have an html with two banners, left and right, with code below:

<head>

<!--

html,body{height:100%;height:100%;margin:0;padding:0;}

body{background-color:black;overflow:hidden;}

#left-banner{position:absolute;width:120px;height:50px;margin:auto;left:15px;}

#right-banner{position:absolute;width:120px;height:50px;margin:auto;right:15px;}

#info{position:absolute;top:50px;left:50%;}

#jsapp{width:100%;height:100%;}

-->

</style>

</head>

<body>

</div>

</div>

</div>

</body>

With the change in video.js, my autosize function not work properly, the width from game go off screen from right. If after the game load I resize the browser, the autosize works again.

Using the old code below, the problem is over.

var max_width = parent.width || window.innerWidth;

var max_height = parent.height || window.innerHeight;

See the game http://vibrantrecycling.ciangames.com

Any hints about this issue?

Thanks!

melonJS

unread,

Jan 30, 2013, 9:32:23 PM1/30/13

to mel...@googlegroups.com

Hi,

Honestly, I have no idea why this code is not working (may I say "in your case").

Does anyone else experienced any issue with the auto-resize feature, or have it correctly working and can share his experience ?

the way (using parentNode) to get a reference to the parent container is correct, and after checking that's also the way used by JQuery, and the way to get the parent container size is also correct (including the fallback to the window size if not defined)

On my side after a quick testing, I don't see any issue with Chrome (W7) and on mobile (iPad), the canvas is resized and centered correctly.

I do however remember reading somwhere about some issue if no style is defined for the parent container, maybe you could add an empty one (style="").

Else, on an unrelated topic (but after I tried the mobile version), you should have a look at question 3 at the following URL :

https://github.com/obiot/melonJS/wiki/Frequently-Asked-Questions

cheers !

Olivier.

Cian Games

unread,

Jan 31, 2013, 8:58:34 PM1/31/13

to mel...@googlegroups.com

Hi

I tried the hint of question 3 above, but the problem remains and the parent container has an style defined.

I have mixed the original code with the new code, originated the code below:

var max_width = parent.offsetWidth || parent.width || window.innerWidth;

var max_height = parent.offsetHeight || parent.height || window.innerHeight;

And has worked. I have put an log:

console.log(parent.offsetWidth + " " + parent.width + " " + window.innerWidth);

And the result:

0 728 1440

I init the engine with me.video.init("canvasGame", 1024, 768, true, "auto", true).

Any hints?

Thanks!

melonJS

unread,

Feb 2, 2013, 12:17:21 AM2/2/13

to mel...@googlegroups.com

so I gave myself more testing on this, and effectively I noticed that in certain cases (i don't know precisely yet which one), parent.offsetWidth and parent.offsetHeight, just don't have any value... so weird...

the most annoying one being that if the the browser is in fullscreen mode when the game is loaded, no scaling is applied.

based on all this feedback I will for now revert to the previous code (parent.width || window.innerWidth), at least until a better solution/explanation is found :)

Now it's maybe a matter of wrong html code, but I have no clue on this...

Tokyonono, if you are there your feedback would be greatly appreciated :)

Message has been deleted

Cian Games

unread,

Feb 3, 2013, 8:13:09 PM2/3/13

to mel...@googlegroups.com

Hi Olivier

Tested with the lastest version of melonJS from GitHub (0.95) and all worked fine!

Thanks again!

melonJS

unread,

Feb 3, 2013, 9:01:33 PM2/3/13

to mel...@googlegroups.com

my pleasure !

by the way, I've been waiting for the weekend to be over, and since we got no further (negative) feedback, I will publish the new version tonight, or tomorrow latest :)

Reply all

Reply to author

Forward