Setup and Pre-requisites

The AZARDI Interactive Engine needs correct HTML5 or XHTML5 and links to the AIE javascript to work. This section shows you how to set up a desktop development and testing page with the required links. Modified: 2014-07-19

HTML Setup
Linked files
Guidelines
CSS Positioning
CSS Display

HTML Setup

The AZARDI Interactive Engine and JQuery javascript must be referenced in the head of your HTML file. This applies if it is a web page or a section page in an e-book such as ePub.

When you download the aie-tutorial.zip package the full HTML setup is included.

<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="utf-8" />
    <title>AZARDI Interactive Engine Loading Template</title>
    <link rel="stylesheet" type="text/css" href="css/your.css" />
    <script type="text/javascript" 
            src="js/LAB.min.js"></script>
    <script type="text/javascript" 
        src="js/aie_loader.js"></script>
    <style type="text/css">
    .aie-events {
        display: none;
        }
    body, div {position: relative;
        }
    <style>
</head>
<body>
    <pre class="aie-events">
       AIE script goes here
    </pre>
    <div>Interactive HTML goes here</div>
</body>
</html>

Linked files

The AZARDI Interactive Engine loads the LAB.js (Load And Build) starter file. LAB.js will then load any other Javascript components required for the interactivity you are specifying.

Guidelines

You will inevitably be working with changing the appearance and most likely the position of elements in a panel of some sort. This means you will make extensive use of CSS display and position properties in new and unusual ways. It is a good idea to be familiar and confident with the positioning and display capabilities of CSS.

CSS Positioning

Fixed layout and Interactive scripts generally need explicit positioning to be applied. This is essential for animated objects.

For position properties to work a parent container element must have a position statement, even if it is position:relative;, then child position:absolute; properties will work correctly. Do not forget the z-index attribute for depth control.

Positioning is Tool Number 1 in the fixed layout and interactive toolkit.

Of course like all refined tools, once you go to positioning control in CSS you have to control everything.

CSS Display

If you are not aware of the power of the CSS display attribute you probably shouldn't be using AIE! With CSS any display type in HTML can be changed to any other display type. This is powerful beyond understanding. For example:

You can change a <div> standard block structure to an inline object.
You can change a <span> standard inline style to a block structure and make it display anywhere, and do anything you need.

But display has a lot more than that to do heavy presentation work. Display is Tool Number 2 in the fixed layout and interactive toolkit.