HTML5 Tutorial:
Often you will be using Opus Creator or Opus Pro to create interactive elements which will be part of another website. These elements are usually placed in discrete sections of the HTML called a DIV (for division) - see W3Schools for further information.
You will need to use a text editor to edit the HTM file produced by Opus as well as the HTML file you want to include your content. One of the most popular is Notepad++ which will highlight the different elements of HTML so it is easier to spot syntax errors. The illustrations below feature Notepad++ so your editor may look slightly different.
Assuming you have set the resize options in Chapter Properties as described in the preceding tutorial, you simply need to go to the Publish Settings for HTML5 and choose the Single DIV option. Then Publish your content as usual.
When published with the resizable settings the single DIV content will always try to fill the space it is placed in. This means it will need to be surrounded by another DIV which sets the space your Opus content is set to fill. This can either be a fixed size DIV (in which case it will not resize unless that DIV is resized by a script - see below) or (more usually) it will be a section of a grid-based design which sets the size of each DIV as a percentage of the available screen width. The most popular of these grid designs are those based on the Bootstrap grid system.
The Opus Content itself has several DIVS in it - for further details see Understanding Opus HTML5 Output.
Once you have published your Opus content you define a DIV in your main HTML to contain the content. In the example below the style sheet (CSS) for the page sets up a set (or class) of DIVs which are a percentage of the screen size and the opus content is placed inside a div of the class "grid_40" which will use 40% of the available width.
You can then insert your opus content into this DIV in one of two ways.
If you want to use the include tag to load the Opus HTM at run time you will need to type something similar to the following.
You will need to ensure that you upload the Opus HTM file to the same location as the HTML page which continas it, along with all the other elements which the Opus publishing process creates for the page most importantly the opus.js file.
If you have selected all the content and copied it to the clip board then place the text cursor where you want it to go in the main HTML and select paste. As you have already done the job which the include tag would do, you have no need to upload the HTM part of the Opus output but all the other elements produced by Opus will need to be uploaded.
The size of the wrapper div which contains the Opus content can either be a set size (but doesn't have to be the size you designed it at) or can be "responsive" or "adaptive" as in a Bootstrap style page.
For more flexibility you may wish to swap content in and out depending on the device screen size and this measn using javascript to report back the screen width. We shall explain this in more detail in the final part of this tutorial.
For even greater sophsitication there may be times when you want to control the width a DIV using javascript. In our javascript slider example we have provided an interactive simulation of responsive content by creating a JavaScript function (responsive_update) which will sets the width and height and then calls an Opus function _DWPub.onWindowResize() to redraw the Opus content at the new size.
This example includes a separate Opus Pro publication which uses a stepped slider to runs a JavaScript action which calls the responsive_update function with new settings.
creating responsive content in Opus Creator and Opus Pro