How to use a callback function for MSOs and/or interactive elements?

Question

Hi and thank you for this awesome in5 script! It has made my life soo much easier!

I am working with a client who uses a platform for REMOTE presentations.
This platform, in order to work for cobrowsing between the presenter and the viewer requires all interactive elements / actions to be handled via js and only through their own function. 

Example with parameters typed as string:

<script type="text/javascript">
    function my_function(param_1,param_2){
        // your code
    }
</script> 
<div onclick="action('my_function','param_1','param_2');"></div> 

or

Example with parameters typed as string or integer:

<div id="1" class="target_func"</div>
<div id="2" class="target_func"</div>
<script type="text/javascript">
    $('.target_func’).click(function(e) {
        action('my_function', ++this.id, 'value');
    });
    function 'my_function'(param_1, param_2) {
        // Add your code here
    };
</script>

How do you suggest I work-around this with the type of code exported from in5?
I am building applications with popups, active/inactive elements on the page, menus that I need to open or hide, so, MSOs and buttons are all over the place. 

I am exporting as a multi-page web with text rendering as SVG (client has their own fonts and brand guidelines which I cannot risk losing with fallback fonts) and Rectangles as CSS. 
Also all “hover” events can be used only if they are placed in the javascript area. They won’t be cobrowsed if they are used in the CSS part, but hover events are not my main concern. 

The 2nd issue is with the 'nav.to' function in5 exports, because they have their own navigation (link) function which replaces the <a href> tag:

<img src=”img/MyImage.jpg” onclick="link('next_slide.html');">
I managed to replace all the nav.to functions with the platform's action, and that is not such a big issue, but if I could find a better way instead of using the search and replace method, I would love that too.. 

However, the 1st issue is the most important for me to solve. Any suggestions or ideas would be greately appreciated. 

Thank you in advance,
 

Answer 1

Hi,

So glad to hear that in5 is making your life easier! 

For attaching functions to buttons. I would suggest using Hyperlink Button Actions.

To call JavaScript with a link, all you have to do is to start the link with "javascript:", e.g.,
javascript:action('my_function','param_1','param_2');

For ease of publishing, you can also overwrite the nav functions with you own, e.g.,
nav.next = function(){ link('next_slide'); }

That would allow to create a single re-usable JavaScript file that you could simply attach in the Resources section of the in5 export dialog.

Place all your code in there (instead of in the InDesign pages).

If you need to target specific objects, you can do so with class names.

Hope that helps!