May 7, 2019
Html5 slider and Javascript
Comments
(8)
May 7, 2019
Html5 slider and Javascript
Newbie 1 posts
Followers: 0 people
(8)

I have tried to insert a range slider into captivate using an html animation with the code below. I have added Java script function slideFunction() {   }   to the enter slide action, on the slide that the slider is on.

However,  the captivate variable “slider” does not update as it should can you help?

html code and script:

<div class=”slidecontainer”>
<input type=”range” min=”1″ max=”100″ value=”20″ class=”slider” id=”myRange”>
</div>

<body>

<script>

parent.slider = document.getElementById(‘myRange’).value

var slider = document.getElementById(“myRange”);

slider.oninput = function() {
parent.slider = slider.value
parent.slideFunction();
}

</script>

</body>

8 Comments
2019-05-08 14:55:52
2019-05-08 14:55:52

I did a five part series on setting variables with a slider similar to what you are trying to do here.

Part of the issue is that when you publish that animation, Captivate does some naming you need to be aware of. Your animation would likely have been named Web_1 by default but would need to be accessed using Web_1c. I do not see that you are addressing the animation so the code cannot find it.

Also, instead of calling the script found in the HTML with the onEnter, I  just put all the JavaScript in the onEnter.

You might want to check out the series if you have not already. It will address those items. Here is a link to the first one.

https://elearning.adobe.com/2018/05/set-variables-interactive-sliders-part-1-introduction/

Hope this helps.

Like
(6)
>
Greg Stager
's comment
2019-05-10 10:02:10
2019-05-10 10:02:10
>
Greg Stager
's comment

Greg,

Thank you very much for the reply and the advice, the series was very useful.

I started from scratch and followed your posts  doing everything as directed (except for adding css in the html file). As advised in your reply I also added all the javascript to the onEnter

However, unfortunately, I am still having the same issue. The varSlider variable in captivate is not updating. Attached is a captivate screenshot, to show the naming and Javascript. Any other thoughts on what I might be doing wrong?

Peter

 

Attachment

Like
>
peterj24595479
's comment
2019-05-10 12:04:39
2019-05-10 12:04:39
>
peterj24595479
's comment

Did you remember to make a variable called varSlider?

Did you remember to rename the HTML animation as  web1?

 

Like
>
Greg Stager
's comment
2019-05-14 12:56:35
2019-05-14 12:56:35
>
Greg Stager
's comment

Yes I have created a variable in captivate called varSlider and named the HTML zip file web1.

I have actually tried from scratch again today, but still the same result. It just seems as if either the sliderange is not generating an integer or the  frameRange variable is not passing anything to the varSlider variable in Captivate. I have triple checked the code, as has a colleague, and there does not appear to be any typos. We have even tried ‘ and ” as alternatives for the quotation marks in the java code

Peter

Like
>
peterj24595479
's comment
2019-05-14 21:55:47
2019-05-14 21:55:47
>
peterj24595479
's comment

You would not name the zip file web1.

You would name the HTML5 animation as web1 after it is placed on the stage.

See pic of properties panel. Highlight the slider and rename it there.

 

Attachment

Like
(1)
>
Greg Stager
's comment
2019-05-15 08:09:12
2019-05-15 08:09:12
>
Greg Stager
's comment

Greg,

Thanks very much,- it works!  I appreciate your time and patience. Once again, love the article, very helpful

Peter

Like
>
peterj24595479
's comment
2019-05-15 11:36:25
2019-05-15 11:36:25
>
peterj24595479
's comment

Awesome! Glad we got it figured out.

Like
2019-05-08 07:30:56
2019-05-08 07:30:56

For the JS experts, if they visit your question could you also post a screenshot of the advanced action you are using in Captivate?

Like
Add Comment