<!-- Radatz Tagesmenu template --> <style type='text/css'> .spotPreviewDefault { width: 1920px; height: 1080px; } {{divId}} { background-image: url( {{#if image}} {{{image}}} {{else}} {{{mediaPath}}}content/media/public/media/radatz_bg_neu.png {{/if}} ); background-repeat: no-repeat; background-size: cover; background-color: black; } @font-face { font-family: 'MarketOT'; src: url('fonts/MarketOT.otf'); } {{divId}} .container { position: relative; left: 80px; top: 260px; } {{divId}} .item { position: relative; white-space: nowrap; height: 120px; width: 1450px; font-family: 'MarketOT'; font-size: 90px; letter-spacing: -0.3px; color: #fff; } {{divId}} .labelField { position: relative; display: inline-block; height: 100px; width: auto; margin-right: 20px; } {{divId}} .subField { position: relative; display: inline-block; height: 100px; font-size: 55px; } {{divId}} .priceField { position: absolute; display: inline-block; top: 0px; left: 1448px; width: 300px; text-align: right; letter-spacing: 1px; height: 100px; } </style> <div class='container'> {{#menu}} {{#if available}} <div class='item'> <span class='labelField'>{{name}}</span> <span class='subField'>{{sideDish}}</span> <div class='priceField'>{{price}}</div> </div> {{/if}} {{/menu}} </div> <script type='text/javascript'> /*Resize items where text is to long*/ function templateInitFunc{{playerId}}(player) { setTimeout(function(){ var widthSum = []; var counter = 0; $('.labelField').each(function(){ widthSum.push($(this).width()); }); $('.subField').each(function(){ widthSum[counter++] += $(this).width(); }); for(var idx in widthSum){ var factor = widthSum[idx]/($('.item').width()); if(factor > 1.0){ console.log('scale: '+idx+' by '+factor); var element = $($('.labelField').get(idx)); var currentSize = parseInt(element.css('font-size')); element.css('font-size', (currentSize / factor)+'px'); element = $($('.subField').get(idx)); currentSize = parseInt(element.css('font-size')); element.css('font-size', (currentSize / factor)+'px'); } } }, 100); } </script>