There are a few components to setting up a Javascript Event box. These include the configuration file, the CSS file and the Javascript code used to display the Event box.

The same configuration file is used for both the Javascript and Flash (deprecated) Event boxes, is located at /xml/defaults/eventbox/mod_flashbox.xml and looks as follows:

<?xml version="1.0" encoding="UTF-8"?>
<flashbox>
  <flashoption>
    <basename>small_2</basename>
    <display_type>js</display_type>
    <display_name><![CDATA[Responsive Eventbox]]></display_name>
    <description><![CDATA[16:9 Image Aspect - Ex: 1280 x 720]]></description>
    <css_file>/css/_eventbox.css</css_file>
    <css_main_class>mysmallbox</css_main_class>
    <default_parameters><![CDATA[
      type: 'fade',
      delay: 5000,
      duration: 1.0,
      order: 'sequential',
      showEmptyDescriptions: false,
      pauseOnMouseOver: true,
      setAsBackground: true
    ]]></default_parameters>
    <version>standard-1.0</version>
  </flashoption>  
</flashbox>

The parameters are as follows:

Here is an example of a responsive event box, assuming "css_main_class" is set to "mysmallbox". The box will adjust to the width of it's container and maintain a 16:9 aspect ratio. This is set by the bottom padding on .mysmallboxWindow and .mysmallboxWindow div.

.mysmallbox {
  position: relative;
  margin: 10px auto;
  padding: 16px;
  width: 100%;
  height: auto;
  background: #333;
}

.mysmallboxContainer {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.mysmallboxWindow {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  z-index: 23;
  background-size: cover;
}

.mysmallboxWindow div { 
  max-width: 100%;
  width: 100% !important;
  max-height: 0;
  padding-bottom: 56.25%;
  background-size: cover;
  background-position: center;
}

.mysmallboxWindow div img { 
  display: block; 
  width: 100%; 
  height: auto; 
}


.mysmallboxNavigation {
  position: relative;
  width: 100%;
  list-style-type: none;
  overflow: hidden;
  height: 44px;
  line-height: 44px;
  margin: 0;
  padding: 0;
  z-index: 30;
}

.mysmallboxNavigation li {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px; 
  margin: 0 6px 0 0;
  padding: 0px;
  font-size: 1px;
  line-height: 11px;
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
}

/* style below however you want */
.mysmallboxNavigation li.on, 
.mysmallboxNavigation li:hover {
  background-color: #ad4f2c;
}


.mysmallboxDescriptions {
  position: relative;
  overflow: hidden; /* highly recommend that the overflow is hidden to prevent image bleeding on the website */
  z-index: 20; /* keep this: it sets the position */

  /* style below however you want */
  width: 100%;
  height: auto;
  color: #ffffff;
  line-height: 1.5;
  text-align: left;
  z-index: 24;
}

/* style below however you want */
.mysmallboxDescriptions div {
  position: relative;
  height: 100%; /* keep this as it ensures there is not a flicker on the text */
  padding: 0;
  margin: 0 auto;
}

.mysmallboxAnchor {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index: 25;
}

.mysmallboxOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  display: none;
  z-index: 22;
}

The CSS for an Event box is stored in an external CSS file, located as defined in the "css_file" parameter. For this example, this location is /css/_eventbox.css. This file must be included in any layout file that will use the specified Event box style.

Note: When a navigation item is active, it will be given the class "on".

Assuming a 'css_main_class' of "mysmallbox", the structure of the HTML is as follows:

<div class="mysmallbox">
  <div class="mysmallboxContainer">
    <div class="mysmallboxWindow">
      <div><img src="images/image1.jpg" /></div>
      <div><a href="http://www.artistrymarketing.com"><img src="images/image2.jpg" border="0" /></a></div>
    </div>

    <ul class="mysmallboxNavigation">
      <li>1</li>
      <li>2</li>
    </ul>

    <div class="mysmallboxDescriptions">
      <div>Lorem ipsum dolor sit amet, enim gravida pulvinar.</div>
      <div></div>
    </div>

    <a href="" class="mysmallboxAnchor"></a>
    <div class="mysmallboxOverlay"></div>
  </div>
</div>

Note: This is just informational. When using the Perpetua Event box module, this HTML is added to the page automatically.

When using the example above for adding an Event box using page content, all of the "div", "ul" and "li" elements are required.