Notification
Newbie
10 posts
OK…I’m on a roll this week with JavaScript questions.
I’m attempting to use JavaScript to move an object off the side of the page and then back on when you select a button.
Here’s the code I used:
var obj = document.getElementById( ‘re-txtField_2c’ );
var posX = parseInt( obj.style.left );
obj.style.transition = “.4s”;
obj.style.left = (posX + 910) + ‘px’;
I had code to bring the button back as well, but it doesn’t seem like I need it. Through troubleshooting one problem, I learned that this will move my object off the screen, and then it slide back to it’s original position.
Here the problem I’m having…select the button the first time and everything works fine. Select it a second time in a row, and it moves the object off the screen but doesn’t bring it back. Select it a third time in a row and nothing happens.
I put the same code on a second button. Now, if I alternate between selecting button One and Two everything seems to work fine….but if I select either button more than once in a row things break….but, they are fixed if I then select the other button.
I’m very, very new to trying to work with JavaScript (especially within Captivate) so I’m sure there is some nuance or rule that I’m unaware of that is causing me difficult.
Thanks in advance for the help!
Jay
OK…I’m on a roll this week with JavaScript questions.
I’m attempting to use JavaScript to move an object off the side of the page and then back on when you select a button.
Here’s the code I used:
var obj = document.getElementById( ‘re-txtField_2c’ );
var posX = parseInt( obj.style.left );
obj.style.transition = “.4s”;
obj.style.left = (posX + 910) + ‘px’;
I had code to bring the button back as well, but it doesn’t seem like I need it. Through troubleshooting one problem, I learned that this will move my object off the screen, and then it slide back to it’s original position.
Here the problem I’m having…select the button the first time and everything works fine. Select it a second time in a row, and it moves the object off the screen but doesn’t bring it back. Select it a third time in a row and nothing happens.
I put the same code on a second button. Now, if I alternate between selecting button One and Two everything seems to work fine….but if I select either button more than once in a row things break….but, they are fixed if I then select the other button.
I’m very, very new to trying to work with JavaScript (especially within Captivate) so I’m sure there is some nuance or rule that I’m unaware of that is causing me difficult.
Thanks in advance for the help!
Jay
You must be logged in to post a comment.
- Most Recent
- Most Relevant
Would be interesting to see the difference in developing time, when you use Advanced or Shared actions for the same purpose? Or edit the XML file for motion effects. Just curious.
OK…took me awhile but, through a combination of the above input and some Googling I found the answer. Here is what finally worked:
function Move() {
$(“#re-imgLsnThreec, #re-imgSeperatec, #re-imgReportIndicc, #re-imgProtScenec, #re-imgPresEvidc, #re-imgMedCarec, #re-imgLsn3KC1c, #re-imgLsn3KC2c”).animate({
left: “1300px”
});
$(“#re-imgLsnThreec”).delay(500).animate({
left: “260px”
});
}
Move();
The first bit of JQuery moves all of my images off of the stage and the second brings back just the one I want. I have my buttons “Executing Javascript” and then I just change the ID of the one I want to come back. I don’t know why I have to preface the objects ID with “re-” or why I have to add the “c” on the end…but another article indicated that was required and the inspector in the browser is showing the elements identified that way.
Thanks for the help all.
Well… so much for the time I spent trying to format this in my 3-line comment box. #ignored
I think the key is that you have to consider the starting position of the image as zero. This is home base – so to speak. Everything else is plus or minus from there but the return trip needs to reference zero again to get it back to the same spot.
Here is how I made it work with my up arrow with the name of “up”. I placed this code on my button and the arrow zips off and back on again.
$(document).ready(function() {
$(“#upc”).animate({left: “-500px”}, 500);
});
setTimeout(function() {
$(“#upc”).animate({left: “0px”}, 500);
}, 2000);
So the first one sets the left margin at 500 pixels to the left of the start position and the second one sets the left margin back to the start which is 0 pixels to the left of the start position after a 2 second timer.
Hope that makes sense.
I think I will do a more detailed blog post on this with examples.
Thanks for the info Greg. I’ll give this code a try as soon as I can and let you know what happened.
Check these out. I did an extended write up.
https://elearning.adobe.com/2018/05/animation-objects-three-examples-part-1/
https://elearning.adobe.com/2018/05/animation-objects-three-examples-part-2/
I did an extended write up on this idea. Here is the link for part 2 which will also link to part one with the example.
https://elearning.adobe.com/2018/05/animation-objects-three-examples-part-2/
Are you looking to have the object go off with a press and then reappear with a second press of the same button or are you looking to have the object go off and then reappear with a single button press?
Greg…sorry for the delayed response. I was off for a couple of days, so just getting back to this.
I want to put this action on a single button. Select the button, and the object slides off and then back on. But, thinking along the lines of what a learner might do, I tried selecting that button multiple times in a row and that’s when the behavior noted above occurred. Put the same code on two different buttons and go back and forth between them and everything works perfectly…but select one button multiple times and I have problems.
