Change the coordinates of a div (absolute) dynamically

OL Connect Professional Designer
1

Hi all,

I try with the following script to change the top style property of a div but I have no effect. Perhaps I forget something ?

var fond = record.fields.FONDPAGE;
var y=results.css(“top”); /* the value of top is correct */
if (fond == “GOLD”){
y=“200px”;
}
results.css(“top”,y);

Thanks for your help.

Eric,

2

Hi Eric,

I assume you are working in the Print context. The coordinates of absolute positioned objects in the Print context are set via special attributes hence their relation to the page (e.g. paginated pages). The following sets the position via scripting.

results.attr('offset-x','96');
results.attr('offset-y','96');

The measurements are in pixels (e.g. 96px = 1in). Note that you do not need to set the units.

Hope this helps,

Erik

1 Like
3

I’m trying to dynamically set the location of a DIV based on the coordinated from a find in the datamapper.

data.find("KEYVALUE.:", 0, 216);

Here is my script…

// Function to parse the coordinates string into an object
function parseCoordinates(coordString) {
    var coords = {};
    coordString.split(',').forEach(pair => {
        var [key, value] = pair.split('=');
        coords[key.trim().replace('[', '')] = parseFloat(value.trim());
    });
    return coords;
}

// Function to convert millimeters to pixels
function mmToPixels(mm) {
    var MM_PER_INCH = 25.4;
    var DPI = 96; // Assuming a standard DPI of 96
    return (mm / MM_PER_INCH) * DPI;
}

// Parse the coordinates
var coords = parseCoordinates(record["BatNo-POS"]);

// Debugging: Log the parsed coordinates
logger.info("1-Parsed Coordinates: " + JSON.stringify(coords));

// Convert millimeters to pixels
var leftInPixels = mmToPixels(coords.Left);
var topInPixels = mmToPixels(coords.Top);

// Debugging: Log the converted values
logger.info("2-Left in Pixels: " + leftInPixels);
logger.info("3-Top in Pixels: " + topInPixels);

// Apply the coordinates to the element
results.attr("offset-x", leftInPixels + 'px');
results.attr("offset-y", topInPixels + 'px');

// Debugging: Log the final attributes
logger.info("4-Offset-x: " + results.attr("offset-x"));
logger.info("5-Offset-y: " + results.attr("offset-y"));

results.show();

Here is the logger info.

1-Parsed Coordinates: {"Left":117.563882,"Top":18.518012,"Right":141.596555,"Bottom":24.373986}
2-Left in Pixels: 444.335931968504
3-Top in Pixels: 69.98933669291338
4-Offset-x: 444.335931968504px
5-Offset-y: 69.98933669291338px

I’ve tried mm, in, and px, but I’m missing something as they don’t seem to be applying.
The DIV moves somewhere way off the page.

4

Try this instead:

results.attr("offset-x", leftInPixels);
results.attr("offset-y", topInPixels);
5

Yes, that is what I was missing along with a static adjustment to shift from the KEYWORD to place my element in the proper location and even works with my cloning.

// Static adjustment values
var leftAdjustment = 105; // Adjust this value as needed
var topAdjustment = -20; // Adjust this value as needed

// Function to parse the coordinates string into an object
function parseCoordinates(coordString) {
    var coords = {};
    coordString.split(',').forEach(pair => {
        var [key, value] = pair.split('=');
        coords[key.trim().replace('[', '')] = parseFloat(value.trim());
    });
    return coords;
}

// Function to convert millimeters to pixels
function mmToPixels(mm) {
    var MM_PER_INCH = 25.4;
    var DPI = 96; // Assuming a standard DPI of 96
    return (mm / MM_PER_INCH) * DPI;
}

// Parse the coordinates
var coords = parseCoordinates(record["BatNo-POS"]);

// Debugging: Log the parsed coordinates
logger.info("1-Parsed Coordinates: " + JSON.stringify(coords));

// Convert millimeters to pixels
var leftInPixels = mmToPixels(coords.Left) + leftAdjustment;
var topInPixels = mmToPixels(coords.Top) + topAdjustment;

// Debugging: Log the converted values
logger.info("2-Left in Pixels: " + leftInPixels);
logger.info("3-Top in Pixels: " + topInPixels);

// Apply the coordinates to the element
results.attr("offset-x", leftInPixels);
results.attr("offset-y", topInPixels);

// Debugging: Log the final attributes
logger.info("4-Offset-x: " + results.attr("offset-x"));
logger.info("5-Offset-y: " + results.attr("offset-y"));

//results.show();
6

I can adjust the coordinates successfully if the handlebars are on the print section, but discovered that I need to place the handlebars on the master page. I need to apply the values on every page of the document in the same dynamic location and I’m cloning the document x number of times. It seems like I can’t move the location of the field data in the master page programmatically. IF I can’t, then is there another way to stamp the value on all the pages of the document?

// Static adjustment values
var leftAdjustment = 105; // Adjust this value as needed
var topAdjustment = -10; // Adjust this value as needed

// Function to parse the coordinates string into an object
function parseCoordinates(coordString) {
    var coords = {};
    coordString.split(',').forEach(pair => {
        var [key, value] = pair.split('=');
        coords[key.trim().replace('[', '')] = parseFloat(value.trim());
    });
    return coords;
}

// Function to convert millimeters to pixels
function mmToPixels(mm) {
    var MM_PER_INCH = 25.4;
    var DPI = 96; // Assuming a standard DPI of 96
    return (mm / MM_PER_INCH) * DPI;
}

// Parse the coordinates
var coords = parseCoordinates(record["BatNo-POS"]);

// Debugging: Log the parsed coordinates
logger.info("1-Parsed Coordinates: " + JSON.stringify(coords));

// Convert millimeters to pixels
var leftInPixels = mmToPixels(coords.Left) + leftAdjustment;
var topInPixels = mmToPixels(coords.Top) + topAdjustment;

// Debugging: Log the converted values
logger.info("2-Left in Pixels: " + leftInPixels);
logger.info("3-Top in Pixels: " + topInPixels);

// Apply the coordinates to the element
results.attr("offset-x", leftInPixels);
results.attr("offset-y", topInPixels);

// Debugging: Log the final attributes
logger.info("4-Offset-x: " + results.attr("offset-x"));
logger.info("5-Offset-y: " + results.attr("offset-y"));

//results.show();