Coordinate system using percentages?

[MindGamer]

I'm just beginning to get my head wrapped around a project which involves porting some of my Flash applications (built with TweenMax) over to javascript.  

 

I'm trying to understand what the best practice is for translating a fixed-coordinate system (Flash) to a flexible / multiple-resolution environment. (HTML).

 

My Flash applications all run at full screen, so in order to simply account for all mobile environments, I assume that one simply creates a "screen sized" DIV set at height/width 100%.  But since TweenMax uses a numerical coordinate system, I'm wondering if there's a commonly used approach to translate that to a percentage-based coordinate system?  Can TweenMax work with percents instead of fixed coordinates?  The examples I've found seem to use multiple CSS definitions for multiple platform types -- although this seems like a real pain -- particularly if the coordinates don't need to be that precise.   Or is a % based method inadvisable for some reason? 

[Rodrigo]

Hi and welcome to the forums.

 

The JS version does works with percentages for those CSS properties that accept percentages. Be aware that transform matrix properties don't work with percentages, but left, top, margins, etc. work fine.

 

Also keep in mind that document flow is a bit of a puzzle when you start, but once you got the handle of it you shouldn't have any problem.

 

If you set up a simple codepen or fiddle illustrating the issue, we could get a better look to what the problem is.

 

Best,

Rodrigo.

[MindGamer]

'Not a specific problem yet.  Just trying to see my way through the project before jumping in.

 

Mostly the .js version looks like it will be a very clean port as the Flash version is old AS2 (very close to .js), and the TweenMax syntax looks similar -- but the coordinate system on fluid display sizes is what I imagine the biggest difference is for most ports.   No matrix transforms, so percentage coordinates should work just fine.

 

Thanks for the reply.