• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Dynamic text - changing text in html5

Guest
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

Hi,

 

I'm trying to make a programmatic/dynamic banner with textfields that can be changed through a excel file. I want always the same spacing (15px) below the textfields even when the text, that is inserted via excel, is longer than the original one. At the moment the textfields are on top of each other when I insert a longer textfield than the original one. 

 

Can I change that somehow or add code in the html or javascript so it shows the text underneath and with spacing?

 

Here is the preview for the banner if that helps:

https://livepreview.adform.com/68559935-1d33-48b1-bd18-98ce863ae5d5/

 

Any kind of help is very much appreciated!

TOPICS
ActionScript , Ad development , Missing feature

Views

242

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
community guidelines
Community Expert ,
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

Hi.

 

I think I don't get it.

 

In the sample you provided, there's a table that uses regular DOM texts, right? And the table seems to be looking correctly.

 

So exactly what do you want to do in that preview? And can you show us the code you have in Animate now?

 

Regards,

JC

Votes

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
community guidelines
Guest
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

Hi, 

thank you for your answer! I use dynamic textfields in Animate. 

If you click the second version you'll see what I mean. Here is a screenshot: Screenshot 2023-02-08 112800.jpg 

 

Do you want me to send the animate file? I added code in animate and the html...

 

Thank you so much for your help again! 

Regards,

Adele

Votes

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
community guidelines
Community Expert ,
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

Thanks for providing more details.

 

I don't see a link to another version but if you can upload your FLA to somewhere like Creative Cloud, Google Drive or WeTransfer, and post the link here, it will certainly be very helpful.

 

Regards,

JC

Votes

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
community guidelines
Guest
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

Ok great, thank you for checking! 

Here is the link:

https://we.tl/t-2cHgznq6MC

 

Regards,

Adele

Votes

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
community guidelines
Community Expert ,
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

Thanks for the file.

 

It seems your code expects a object called bild. What is this and where is this coming from?

Also the .xlsx cannot be loaded regularly without some kind of third party library. So what are you using to load this file? Would it be possible to exchange the XSLX file for a JSON or CSV file?

 

And if I understood correctly, in the .xslx file there are three rows for each text field. So what row should be used?

 

Regards,

JC

Votes

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
community guidelines
Guest
Feb 08, 2023 Feb 08, 2023

Copy link to clipboard

Copied

The object "bild" is a image that also changes. But that just works fine. 

In the end the image file, xslx, html, javascript and the fonts are getting uploaded at adform.com. From there I can see all images and textfields that are changing within the different sujets. If I would want to, I could publish the banner as a programmatic banner. Its kind of the same thing I want to do.

As far as I know I need the xslx file for it to work. I want to use all rows thats why I have the problem with the text. If I insert a longer text its upon the other text - thats what I want to fix. Like on a website. When the text in the field above changes the lower text automatically moves down. So all of the textfields automatically have a spacing in between. 

Do you know what I mean? I'm sorry if it still isn't clear, it's very hard to explain.

 

Regards,

Adele

Votes

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
community guidelines
Community Expert ,
Feb 09, 2023 Feb 09, 2023

Copy link to clipboard

Copied

LATEST

Hi.

 

As there some things that I don't understand in your file, I created a simple sample that i hope will help you to get started.

 

Javascript:

// The SheeJS library is included in the 'Include' section to the left
// https://cdn.sheetjs.com/xlsx-0.19.2/package/dist/xlsx.full.min.js

var xlsxFileName = "test.xlsx";
var sheetName = "Sheet1"; // you can get this name from the console.log(workbook) call below
var rows = [ "1", "2" ];
var targetTextFieldsContainers;

function main()
{
	root.stop();
	targetTextFieldsContainers = [ root.tf0, root.tf1, root.tf2, root.tf3, root.tf4 ];
	readXLSX(xlsxFileName, onXLSXLoaded, { sheetName: sheetName, rows: rows });
}

function readXLSX(src, callback, props)
{
	var req = new XMLHttpRequest();
	var textFields = [];
	var texts = [];
	var data = [];
	var i;

	req.open("GET", src, true);
	req.responseType = "arraybuffer";

	req.onload = function(e)
	{
		var workbook = XLSX.read(req.response);
		var worksheet = workbook.Sheets[props.sheetName];
		var key;
		
		console.log(workbook);
		console.log(worksheet);

		for (key in worksheet)
		{
			if (key.indexOf(props.rows[0]) > -1)
				textFields.push(worksheet[key].h);

			if (key.indexOf(props.rows[1]) > -1)
				texts.push(worksheet[key].h);
		}

		for (i = 0; i < textFields.length; i++)
			data[i] = { tf: textFields[i], text: texts[i] };

		callback(data);
	};

	req.send();
}

function onXLSXLoaded(data)
{
	console.log(data);
	
	data.forEach(function(item)
	{
		if (targetTextFieldsContainers.indexOf(root[item.tf]) > -1)
			root[item.tf].tf.text = item.text;
	});

	stackTextFields(targetTextFieldsContainers);
}

function stackTextFields(targets)
{
	targets.forEach(function(tf, index, array)
	{
		var currentHeightOffset = tf.tf.getMeasuredHeight() * 0.5;
		
		tf.tf.y = -currentHeightOffset;
		
		if (index > 0)
		{
			var previousTF = array[index - 1];
			tf.y = previousTF.y + previousTF.tf.getMeasuredHeight() * 0.5 + currentHeightOffset;
		}
	});
}

if (!this.looped)
{
	window.root = this;
	main();
	root.looped = 1;
}

 

In your case the sheet name is Tabelle1.

 

Source / files / FLA / code:
https://bit.ly/3DW426o

 

I hope it helps.

Regards,
JC

Votes

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
community guidelines