Can I make a ticker show as many items as will fit in its region?

Hi folks,

If I’ve got a region whose timeline includes a ticker, is there a way to display as many items as will fit, without clipping the bottom?

The code I’m using for it right now is:

<p style="font-family: Roboto, sans-serif; color: #000000;">
  <span style="font-size:48px; font-weight: 700;">[Title]</span><br />
  <span style="font-size:32px; font-weight: 400;">[Description]</span>

Right now the feed has 6 items and it looks good with a limit of 4. If I set the limit to 5, the 5th item will be partially displayed.

Sometimes the feed will contain an item with a very long description, and there will only be room for the first 2 items, and a 3rd item would be cut off.

Is there a way to get it to either show the entire <p> (if it will fit) or not show it at all (if it won’t fit)? If so, I wouldn’t need to limit the number of items shown.

Unfortunately, I don’t think there is an option that would calculate the string length and then adjust the number of items or to hide ‘too long’ items.

Hmm. It looks like there’s a way to use JavaScript to detect whether a given <p> is overflowing, and I’m sure there’s a way to use JavaScript to set those elements to use the style “display: none”. I guess I’ll have to learn how to use JavaScript to actually go through those elements one by one and hide those that overflow.

It certainly might be possible, I haven’t tried it and in my previous reply I was referencing the ‘built-in’ features in ticker module.

If it will work for you, we (as do other Xibo community members) would be interested to see your script.

Well, I’m not sure I’m doing this right, but so far I haven’t even been able to get ‘hello world’ to show up in the console log. My ‘Optional JavaScript’ for this ticker is:

function EmbedInit()
	console.log('Hello world');

and the console log on the layout preview (http://hostname/layout/preview/layoutnumber) has plenty of cheerful debug messages but no ‘Hello world’. I’m using Google Chrome on Windows 10, if that matters.

What I’ve been trying to do is:

function EmbedInit()
	console.log('Hello world');
	var x = $('div.previewContent div.item p');
	var i;
	var total = 0;
	var maxheight = 400; 
	// once I have a proof of concept I'll figure out how to calculate the correct height

	for (i = 0; i < x.length; i++) {
		console.log('div ' + i + ' height: ' + x.elements[i].height);
		total += x.elements[i].height;
		console.log('New total height: ' + total);
		if (total > maxheight) { x.elements[i].css({display: "none"}) }

Aha! I figured it out and documented it here.