Highlighted

Unable to Retrieve Object's Position Using JavaScript

Explorer ,
Feb 12, 2020

Copy link to clipboard

Copied

I want to be able to change an object's position using JavaScript. I thought I found the answer here:

https://community.adobe.com/t5/captivate/captivate-scripting-change-x-y-position-of-object/td-p/8606... 

When I tried it, I got a blank. I'm not sure what the reason is.

var obj = document.getElementById( 'Image_12c' );
var posX = parseInt( obj.style.left );

alert(posX);
TOPICS
Advanced, Advanced actions

Views

379

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Unable to Retrieve Object's Position Using JavaScript

Explorer ,
Feb 12, 2020

Copy link to clipboard

Copied

I want to be able to change an object's position using JavaScript. I thought I found the answer here:

https://community.adobe.com/t5/captivate/captivate-scripting-change-x-y-position-of-object/td-p/8606... 

When I tried it, I got a blank. I'm not sure what the reason is.

var obj = document.getElementById( 'Image_12c' );
var posX = parseInt( obj.style.left );

alert(posX);
TOPICS
Advanced, Advanced actions

Views

380

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 12, 2020 0
Engaged ,
Feb 13, 2020

Copy link to clipboard

Copied

I think it's just because posX has the value 0 at this stage. Try console.log intead of alert and check in the browser's console. 

If you fired obj.style.left = ( posX + 10 ) + 'px'; at it now like advised in the post you cited, your image should jump 10 pixels over to the right as expected.

If you run this script on slide enter, you might have to wrap it in a timeout to give the image time to load.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0
Explorer ,
Feb 13, 2020

Copy link to clipboard

Copied

When I check console.log, it says NaN.

 

When I use this:

var obj = document.getElementById( 'Image_12c' );
console.log(obj);

 

I get this:

(unknown) 
<canvas id=​"Image_12c" class=​"cp-shape" width=​"196" height=​"156" style=​"left:​ 0px;​ top:​ 0px;​ right:​ 0px;​ bottom:​ 0px;​ width:​ 100%;​ height:​ 100%;​">​

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0
Most Valuable Participant ,
Feb 13, 2020

Copy link to clipboard

Copied

Will not help with JS, but are yuu busy with a responsive project (Fluid Boxes)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0
Explorer ,
Feb 13, 2020

Copy link to clipboard

Copied

I also tried a shape that was unlocked from any fluid box and the left and top were 0 also, which made no sense.

<canvas id="Tri1c" class="cp-autoShape" width="17" height="11" style="left: 0px; top: 0px; right: 0px; bottom: 0px; width: 17px; height: 11px; margin-left: 0px; margin-top: 0px; display: block; visibility: visible; position: absolute;"></canvas>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0
Explorer ,
Feb 13, 2020

Copy link to clipboard

Copied

Yes, it is a responsive project. I want more control over the objects that are unlocked from the fluid box.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0
Explorer ,
Feb 13, 2020

Copy link to clipboard

Copied

This is what shows in Captivate while working this object:

Capture3.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0