July 30, 2020
Navigation buttons with javascript
Comments
(7)
July 30, 2020
Navigation buttons with javascript
Master 16 posts
Followers: 8 people
(7)

INTRODUCTION

In this blog, I’m continuing to present javascript snippets that add animations to certain screen elements. I previously blogged about creating a swirling cross used for closing tabs. The idea is to give some simple code for those who are not interested in learning JS but want to play around with this Captivate’s functionality and check it out. For those interested in my previous article on this topic go to:

https://elearning.adobe.com/2020/07/a-button-animated-with-javascript-easy/

So I’m just going to give you a code snippet which will animate navigation buttons,  point to some elements you need to change to make it work for you and that’s it! So let’s get to work now.

PRESENTATION

First, look at my example to get the idea of what I’m talking about. The blue triangles in the demo are navigation buttons pointing “forward” and “back”. Take your time to go through the project first.

Play

THE CODE AND HOW TO USE IT

1. First, create navigation buttons and name them. No matter if they are smart shapes, png, or SVG elements. Make the nav buttons last throughout the whole presentation. Because from the first slide you can’t move back (it’s the first slide, isn’t it?) just mask the ‘back button’ (just cover it ) with a smart shape of the same color as the background.  Now use the shapes as buttons with the function “go to the next slide. ” I guess it is a default function anyway.

2. Copy the code below, but copy it from the file I attached below.

JSbuttonsCode

If you copy it from the browser it won’t probably work (The browser inserts hidden elements which we don’t see, but they make the code unreadable for the interpreter).

This is the code included in the file:

window.addEventListener(“mouseover”, function(e) {
if(e.target.id == “myButtonForward“) {

var mov = document.getElementById(“myButtonForwardc”)

var options = {
iterations: 3,
iterationStart: 0,
delay: 0,
endDelay: 0,

duration:300,
fill: ‘forwards’,
easing: ‘ease-in-out’,
}

var keyframes = [
{ transform: ‘translate( 0px)’ },
{ transform: ‘translate(2px)’ },
{ transform: ‘translate(5px)’ },
{ transform: ‘translate(2px)’ },
{ transform: ‘translate(0px)’ },
]
mov.animate(keyframes, options)
}else if(e.target.id == “myButtonBack“) {

var movB = document.getElementById(“myButtonBackc”)

var options = {
iterations: 3,
iterationStart: 0,
delay: 0,
endDelay: 0,

duration:300,
fill: ‘forwards’,
easing: ‘ease-in-out’,
}

var keyframes = [
{ transform: ‘translate(0px)’ },
{ transform: ‘translate(-2px)’ },
{ transform: ‘translate(-5px)’ },
{ transform: ‘translate(-2px)’ },
{ transform: ‘translate(0px)’ },
]
movB.animate(keyframes, options)
}

});

3. Paste the code in the javascript window on the first slide. Properties->actions-> on enter-> execute javascript.

Now the code is ready to do the job for you but…

4. You need to insert the names of your buttons in the places which are written in bold in the code snipped I wrote in point 2. Be careful and don’t remove the letter ‘c’ which you can see in the variable assignments inside the function after if and else if statements. If you want to reverse the situation, paste the code exactly as it is, but copy the names from the code and name your navigation buttons exactly as they are named in the code. I.e.

myButtonForward  and  myButtonBack.  But if you decide to do so, keep the names exactly as they are. Don’t change anything. So it’s up to you. Either use the code as it is and give the buttons the same name as in the code or exchange the names used in the code for your own ones.

4. Now you are ready to play with the code.

I hope you will give this approach a try. Even if you are not javascript enthusiasts, it doesn’t hurt to check it.

Thank you for reading this article.

Stay healthy and take care!

7 Comments
2021-06-08 13:36:33
2021-06-08 13:36:33

Thanks a lot for the post. I want to try JavaScript in designs. This is a good example.

Like
()
2020-11-07 05:47:14
2020-11-07 05:47:14

Very much Thanks for bringing this here with such a detailed step by step explanation.

Like
(2)
(1)
>
instructiond73306749
's comment
2020-11-23 21:48:26
2020-11-23 21:48:26
>
instructiond73306749
's comment

Thank you for reading. I hope you’ll have a chance to use it.

 

Like
()
2020-10-24 20:04:50
2020-10-24 20:04:50

The different aspect of Captivate are awesome. Thank you for showing this!

Like
(2)
(1)
>
tiffanyd2020
's comment
2020-11-23 21:48:55
2020-11-23 21:48:55
>
tiffanyd2020
's comment

You are welcome!.

Like
()
2020-09-23 08:08:37
2020-09-23 08:08:37

Very useful. Thanks

Like
(2)
(1)
>
anandarora
's comment
2021-04-16 11:16:01
2021-04-16 11:16:01
>
anandarora
's comment

Thanks for reading!

Like
()
Add Comment