Skip to main content
omerd80690951
Known Participant
May 18, 2015
Question

moving objects on screen using JS?

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.

This topic is closed to new replies. Start a new post to keep the conversation going.

9 replies

Andrew Allan
Participant
November 18, 2021

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:

Translate
Legend
May 18, 2015

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

Sreekanth

Translate
omerd80690951
Known Participant
May 19, 2015

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.

Translate
TLCMediaDesign
Inspiring
May 19, 2015

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

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

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

Translate