Examples: Execute JS

examples/execute_js

live demo

Beyond opening a specified URL, DataDocs allows a click on an overlay element to trigger an arbitrary JavaScript function with additional parameters. For the basic setup overview, refer to the instructions above for examples/launch_url. Then adjust the files as below:

1. Open dd_execute_js.html. Towards the bottom of this file, you will find the <div id="external_content"> element with some placeholder text in it. This is the div that our JavaScript function will update when the policy_text overlay is clicked. The layout styles for this div can be found in dd_execute_js.css. Note that the "external_content" div is outside of the "all_info" div that we have specified as our video's fullscreen container (refer to DataDocs structural overview for more details on how the libraries organizes these divs). We have placed "external_content" outside of this because this particular content is "outside" of our main video and should not be included in fullscreen mode. >Note: Other Data Docs overlay divs can also be targeted with these functions.

2. Open main.js and navigate to the addCaramel entry with the target "policy_text". Instead of url, this instance includes two options: function_name, which is assigned the string name of the function that a click on the target div should trigger, and the optional function_params, which is a JSON object containing any other information that the JavaScript function should know about. Try changing the value of the text entry of this object.

3. At the bottom of main.js is the particular JavaScript function this example uses; is called policyClickHandler. Although we do not use it here, the actual click event will always be the first argument passed to any function triggered this way; the second argument will hold the function_params object specified in the addCaramel call (if included). In this simple example, we use the target part of the paramsObject to access our "external_content" div, and then simply set its contents to the value of the paramsObject "text" property.

4. Open up dd_execute_js.html in Firefox or Chrome on your desktop, and watch what happens when you click the "Influence Monetary Policy" text!