HAniS Example 1d - Two HAniS animations on one page without iframes

Example 1d: Two HAniS animations on one page using the "function" code (hanisf_min.js)

Here we again have two animations on one page, but unlike the previous example, we do not use <iframe>. Instead, we invoke HAniS as a function, thus creating two independent instances.

The HTML inside the <body> looks like this:

<div id="handiv" style="display:inline-block;width:500px;"> </div>
<div id="handiv22" style="display:inline-block;width:500px;"> </div>

<script>
function init() {
  var a = new HAnisF();
  a.setup('hanist1.txt','handiv')

  var b = new HAniSF();
  b.setup('filenames = TIR1.GIF, TIR2.GIF, TIR3.GIF \n imagecan_style=border-radius:30px; \n'+ 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n active_zoom=t \n controls = startstop, speed, step, looprock, overlay \n' + 
  ' overlay_labels=Map \n controls_style = display:flex;flex-flow:row; \n buttons_style = flex:auto;margin:2px;' , 
  'handiv22'); 

} 

window.onload = init();
</script>

(Note also in the 2nd instance, the overlay_filename need only be given once, since it applies to all frames.)

If you needed to reference one of the public methods/functions, you might say:

a.setWindowSize(300,400)

for example. Just be certain that the variable "a" is in scope...

Go To Front Page
Next Example