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

Get Help
1

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>
</p>

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.

2

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.

3

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.

4

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.

5

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');
	return;
}

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.

6

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"}) }
	}
    return;
}
7

Aha! I figured it out and documented it here.