Create HTML5 Animation Resources

General Information:

  • In-App HTML is only currently available for iOS universal apps. It is available for use in the HTML 5 viewer.
  • Mobile platforms do not support Flash, so the use of Flash content in embedded HTML files will fail.

Creating your animation resources:

  • Limit your memory footprint to roughly 10-15 MB per view. The cumulative total of memory usage for all independent HTML 5 animations on any two facing pages must not exceed 10-15 MB.
  • Use the viewport tag. Include a viewport tag in your HTML. This should always have "user-scalable=0". In addition, it should set the width the number of pixels (not a percent) of 100% of the web width.
<meta name="viewport" content="width=768, user-scalable=0;" />
  • Set body background color to transparent, e.g. rgba(255,0,0,0).
  • jQuery is required for the messagepassing-min.js script below. You will need to host the jQuery script.
<script src="jquery.min.js"></script>
  • In order to use all of the features listed below, the following Javascript file needs to be included in the HTML page:
<script src="http://cdn.coverstand.com/html5_viewer/compiled/messagepassing-min.js"></script>
  • Note: You must host all of the assets yourself on a standard webserver or content delivery network that provides HTTP access. Those assets must be available at all times or the animation will fail. The messagepassing-min.js script is the single exception to the requirement that all your assets be local and contained in a single flat directory.
  • Optionally use the load/unload functions. On loading or showing of the page, the function bt_pageload() is fired. On unloading or hiding of the page, the function bt_pageunload() is fired. You can define these in your HTML page.
  • The application will pass as an argument to the bt_pageload() function an anonymous object with the following attributes (currently only available in the HTML 5 Viewer):
    • issue.id (the globally unique ID for the issue)
    • issue.name (the Issue Name set in the dashboard)
    • page.name (the Page Name set in the dashboard)
    • page.number (the sequential page number of the issue, e.g., “1” for the Cover)
    • publication.id (the globally unique ID for the publication)
    • publication.name (the Publication Name set in the dashboard)
    • publisher.id (the globally unique ID for the publisher)
    • publisher.name (the Publisher Name set in the dashboard)
    • reader.id (the globally unique ID set for the reader for login or registration-required issues)
    • screen.height (the height of the screen or browser window on which the digital edition is currently being viewed)
    • screen.width (the height of the screen or browser window on which the digital edition is currently being viewed)
    • bt_fields.* (“bt_field_name” and “bt_field_value” pair set in the URL, as documented at http://knowledgebase.screenstepslive.com/s/5659/m/16007/l/162548-url-parameters.  For example, if bt_field_name[]=someparam and bt_field_value[]=someval, there would be a corresponding attribute named "bt_field.someparam" set to “someval”.)
  • Optionally use alert functions to communicate with the page. Some alert functions are intercepted by the app for communication.
alert('bt_message:disable_links=1'); //will disable the links in which the HTML 5 animation resides so they do not interfere with the touch events on the page.
alert('bt_message:disable_links=0'); // will re-enable the links in which the HTML 5 animation resides.
alert('bt_message:disable_zoom=1'); // will disable the zoom for the page in which the HTML 5 animation resides.
alert('bt_message:disable_zoom=0'); // will re-enable the zoom for the page in which the HTML 5 animation resides.
  • Link Integration - Allows the Viewer to handle all clicked links, instead of redirecting the page or popping up a new window. This allows increases compatibility across all HTML5 versions of the viewer, including the web-based viewer and Windows 8 app.
  • Page Dragging - The messagepassing-min.js script automatically allows the HTML5 viewer to control all non-interactive areas of the page so that normal navigation is still easy for the user.
  • Interactive elements will need to have the class bt_passthrough when using the messagepassing-min.js script.
  • If your page changes, either automatically or in response to the user, you may need to tell the MessagePassing script about those changes.
  • If you add links to the page, you simply call bindAnchors afterwards to update them to work properly in the HTML5 viewer, like so:
MessagePassing.rebindAnchors ();
  • If your layout changes and you need more or less space to be interactive, simply call bindEventableElements to update the position of all interactive elements in the HTML5 Viewer, as such:
MessagePassing.bindEventableElements ();
  • You'd want to call these functions after doing things like adding or removing links, videos, or slideshows