Using Transparent JQueryMobile on top of OpenGLES

Using Marmalade 6.0, we now have the ability to serve HTML directly from the device.  This raises the serious possibility of using HTML for non performance critical parts of game, such as menus.

Out of the box, JQuery mobile, is pretty damn cool but needs a couple of modifications to run as a transparent layer on top of your GL content.

1 – Modify CSS.  JQuery by default fills the view-port with CSS gradient, this prevents us using the layer as a transparent overlay.  Grab a modified CSS file here, with the gradients removed.  NB you may want to minimise this file again later:

https://gist.github.com/2843567

2 – Add Meta data to HTML to disable ZOOM on IOS

<meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

3 – Disable Zoom in the Marmalade ICF file for Android

[S3E]
AndroidWebViewZoomControlsEnable=0

And thats it.  Just create a new web view in Marmalade and Navigate yo your content.  It will appear transparently over your Game :)

  panel = s3eWebViewCreate(true);

  const int width  = IwGxGetScreenWidth();

  const int height = IwGxGetScreenHeight();

  const int y = 0;

  s3eWebViewShow(panel, 0, y, width, height);

  s3eWebViewNavigate(panel,  "http://freesome.com/");