Dynamic div position and height

OL Connect Professional Designer
1

I have a div that is supposed to be a timing mark. The div needs to change height and move around the page based on the data set and is supposed to be aligned left or right depending on whether it is an odd or even page.

I have my master pages set up with the mark as follows (offset-x is different on each master)

<div class=“mark” anchor=“page_media_0”
style=“position: absolute; width: 14mm; background-color: cmyk(0%, 0%, 0%, 47%); left: -26.4567px; top: 0px; height: 1mm;” offset-x=“-26.456694” offset-y=“0”>
</div>

I have a standard script as follows:

//Selector is .mark
//MkPos and MkHeight should be mm values (integers) - multiplication is to get value in px
var top = Math.round(record.fields.MkPos * 3.7795296);
var height = Math.round(record.fields.MkHeight * 3.7795296);

results.attr(“offset-y”, top);
results.css(“height”, height);

This does nothing at all, even when I place the div on the actual section. What am I doing wrong?

2

I closed and re-opened Designer and the position part started working. Height still remains the same.

3

Try adding the units. In your case: height + “px”. Note that on the CSS properties you could use units like “mm” so no math needed there.

Erik

4

Thanks Erik, adding units worked.

Not sure if this warrants a bug report, but unless I used the “each matched element” option the options did not get applied consistently on all masters and the layout would break. I also changed offset-y and x to 0, so I can move the elements using CSS instead.

Therefore I ended up with class selector and the following code which works perfectly:

this.css(“top”, record.fields.MkPos + “mm”);
this.css(“height”, record.fields.MkHeight + “mm”);

5

Glad it worked!

It does makes sense to file a bug report for the inconsistancy. Ideally provide a sample file to illustrate the problem.

Erik