Lectora 17: Accessing shape properties in javascript

nmizer6275 Community Member Posts: 6
With Lectora 16 I could access a shape's position in javascript like this:

var bar = document.getElementById("shape658img");

var yPos = bar.y;

That doesn't work in Lectora 17, and when I look at the elements in Chrome debugger I see that "shape658img" no longer exists within the shape658 div. There is a "shape658path" and "shape658text", and I can see the x and y values inside their "d" properties, but I'm not sure how to get those values into a variable I can use in javascript.

I'm fairly new to javascript, so it may be that the original way I was doing it wasn't very good in the first place.



  • wendymiller
    wendymiller Community Member Posts: 244
    Hi Nick,

    There are two major changes when upgrading to Lectora 17 that are going to affect what I think you are trying to do.

    First, all of the shapes are now rendered as vector-based svgs. I believe there is a fallback to a png if the browser is not capable of rendering an svg, but most modern browsers are. This means that maybe the best way to get the y value of a shape is to get the CSS "top" style value of the div containing the svg. In your case, this div would have an id of "shape658".

    Second, Lectora 17 added the option to publish for Seamless Play. This means that all of the pages in the title are essentially being displayed in the same page within an iframe. If you publish with this option turned on (it is on by default in the HTML Publish options), you will need to change document.getElementById() to getDisplayDocument().getElementById().

    getDisplayDocument() seems to work whether Seamless Play is checked or not. So I'd just use that from here on out. Here is a little sample code that does what I think you want to do. It's not quite as simple as just getting a y property from an image, but it might work for you.

    var bar = getDisplayDocument().getElementById("shape658");
    var yPos = getDisplayWindow().getComputedStyle(bar, null).getPropertyValue("top");

    At this point, yPos will have a value of, for instance, "100px". If you want to strip off the "px" part so that you just have the numeric value, you can add the following to the code.

    var idx = yPos.indexOf("p");
    yPos = yPos.substring(0, idx);

    If you copy and paste this code, remember to change the quotation marks to regular quotes before trying to run it, because the quotes get turned into the "curly" type quotes when you post messages here.

    I hope this helps some.

  • nmizer6275
    nmizer6275 Community Member Posts: 6
    Thanks, that works great!

    The only thing I'm having trouble with now is clipping. I am also changing the width of that shape (using Tweenmax). The shape changes width, but will not display longer than it's original width. I've tried to set the clip property to auto with js and with css.

    JS attempt:

    var container = getDisplayDocument().getElementById("shape658");
    container.style.clip = "auto";

    CSS attempt (with shape set to "selector" in through the appearances panel in Lectora) :

    .selector {
    clip: auto;

  • klaatu
    klaatu Community Member Posts: 988
  • nmizer6275
    nmizer6275 Community Member Posts: 6
    Got pulled away from this project for a bit, but now I'm back to it.

    Thanks, Darrell, it was that post that turned me on to needing to change the clip property, but I can't seem to get it working in 17. I'm trying

    var container = getDisplayDocument().getElementById(“shape658”);
    container.style.clip = “auto”;

    I've also tried "shape658path".

    In both cases, debugging in the browser shows "clip:auto" but the image is still clipped to the original width.