moving objects on screen using JS?

[omerd80690951]

Is it possible to move objects (text box in this case) on the screen (change the X and Y value) using JS?

I've tried changing the CSS value sof those objects (top and left) but it doesn't seems to work...

Thanks.

[Sreekanth_S]

Unless you are working on a responsive project in CP8, you can use motion path for that.

Sreekanth

[omerd80690951]

Thanks, but that's not what i meant.

I don't want to animate object to it's location, i just want to set it's X and Y to a different location.

[TLCMediaDesign]

This script move a button I have on the screen called next_btn:

var mybutton = document.getElementById("next_btnc");

mybutton.style.left = 300 + 'px';

[omerd80690951]

I have the same code now (with JQuery, but basically the same), but it's not working.

I also tried your code to make sure, but it doesn't work either..

The div style is changed according to the code, but on the screen itself its not moving..

[TLCMediaDesign]

In my test you had to move the contents of the div, not the div itself.

To move the dive you may have to change other properties also.

[omerd80690951]

I'm trying to move a text-box.

The div who represent moves according to the code, but it seems like captivate renders the slide as a picture, so the div is not the "real" text-box.

For example, I can delete all div's inside the main div slide and I will still see the slide as usual (but the interactions wont work as it should of course).

I wonder if there is any way to "re-render" the slide according to the CSS changes..

[TLCMediaDesign]

In the CPM.js try giving the div an id, then you can move it.

[omerd80690951]

I dont want to change the CPM because i will have to do this again every time i'll publish.

I'm trying to learn more about the drag&drop functions to see how the movements works there.

Anyway, thanks again for your help.

[Andrew Allan]

It's true you can't change the top and left values. But you can change the margin and probably padding.

I made a long bar with a dot at the end as a progress indicator, 2000px wide and set left to -1988px (since at least part of it has to be in frame).

I then changed the left margin according to proportion of the way through the slides using a javascript advanced action (prefix your object with "re-" and suffix it with "c":

const elem = $('#re-Progress_dotc');

var currslide = window.cpAPIInterface.getVariableValue('cpInfoCurrentSlide');

var numslides = window.cpAPIInterface.getVariableValue('cpInfoSlideCount');

var margin = (currslide / numslides) * 100;

elem[0].style.setProperty('margin-left', margin + '%', 'important');

Which gives me this, my image being the orange bar with the dot at the end: