This is the fourth part of the series for adding a slider to your project that will update your variables.

If you have not seen the first three, you may want to get caught up.

Part 1 – Introduction

Part 2 – HTML and CSS

Part 3 – Adding File to the Stage

In this post we are going to add the JavaScript that reads the HTML5 Animation that we added in the last step. I don’t intend to teach this but hopefully I can explain it well enough for you to see what is happening with it.

Setup A Captivate Variable

Let’s begin this by creating a Captivate variable to assign. For this walk-through I will just call it  varSlider.
Go ahead and create a smart shape and have your variable display within the box by using the   $$varSlider$$   format.

Renaming the Web Object

This is not required by I am going to do it because I personally do not like underscores in my naming if I can help it. The HTML5 Animation we added to the stage would have a default name of   Web_1   and I will change it to   web1   which removes the underscore and goes lowercase with the ‘W’.

**The name, however, is very important. Whatever you decide to name yours – remember what it is.**

The JavaScript Itself

The JavaScript will be added to the slide as an  OnEnter action.

setTimeout(function() {
var frame =$(‘#myFrame_web1c’);
var frameRange = frame.contents().find(‘#slideRange’);
frameRange.on(‘change’,function(event)
{
varSlider = frameRange.val();
});
},1000);

As you can see not much is needed but it will be important to explain some of it.

Basically, we just have a single timing event…

setTimeout(function, milliseconds);

which will run the function after a set time of 1000 milliseconds or just one second after we enter the slide. This is important as it allows enough time for the HTML5 Animation to fully render before we try to access it.

The function part has three things to be executed. Two variable assignments and an event handler assignment which does another function. Let’s look at each one separately.

var frame =$(‘#myFrame_web1c‘);

This assigns a variable we are calling  frame  to equal the ID of the iframe that is created when we place the HTML5 Animation on the stage. It seems that Captivate is using the same convention to do the naming. The convention is   myFrame_objectNamec   where objectName is the name we gave the object – in my case it is  web1  (see why we need to remember that?) –  and places a  c  at the end. So the code here is jQuery as indicated by the dollar sign. The hashtag is what we use to refer to an ID name.  So now we have pulled our iframe into a variable.

var frameRange = frame.contents().find(‘#slideRange’);

The next line assigns a variable we are calling  frameRange  to equal the value of our input range that we created. Remember that we gave our input range an ID name of   slideRange?
So we utilize the   frame   variable we just created with   frame.contents().find   which says to go look at that iframe and search the contents to find an ID called   slideRange

frameRange.on(‘change’,function(event)
{
varSlider = frameRange.val();
});

For the final piece to be executed, we reference our last variable again and indicate what is to happen anytime our   frameRange   changes. For this purpose we want to perform another function.  That function is to assign our Captivate variable   varSlider   to be equal to the   frameRange   value.  If you make a different Captivate variable name be sure to change this part accordingly.

Now that the code is in place, we can test this out to see how it works. When we drag the handle and release, we should see our variable update in the smart shape and that means we can do all sorts of other advanced actions based on the value of that variable.

I am sure there is probably a more efficient way to handle this but this worked so I decided to stick with it.
Hopefully you can get this working, too, and find some neat ways to implement it in your own projects. I would be happy to hear about them.
Be sure to check back for the final post where I will share my complete tax calculator code with two working sliders on the stage at the same time along with some additional resources.