Add a marquee only when text overflows

[tumil]

Hi

Some of the products on my products slider have too long names and I would like to make then scroll from right to left. I have managed to add a marquee css code to these elements, but after I had done that, all the products names began to scroll and I want it only for those which are too long.

Can I achieve it somehow using JavaScript?

I think that adapting it wouldn't be a problem because in my theme's custom modules I can add JS code without messing with files. But the question is: how?

 

Here's a code which I have used for those elements to scroll, but as I said, using this code all the names scrolled, not just those which are too long:

h5.product-name-container {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.product-name-container a.product-name {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: product-name-container 15s linear infinite;
 -webkit-animation: product-name-container 15s linear infinite;
 animation: product-name-container 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes product-name-container {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes product-name-container {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes product-name-container {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

Thanks for help!

[rocky]

I think you'll need to check the length of the product name and add an additional class. For example, change the following line at about 117 (assuming you're using the default PrestaShop v1.6.1.5 theme) of themes/<your_theme>/product.tpl:

						<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >

to:

						<a class="product-name{if $product.name|strlen > 25} too-long{/if}" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >

Change 25 to the number of characters you consider too long. You can use the .too-long class in your CSS.

[tumil]

After longer consideration I think that I'll just leave ellipsis instead of scroll. Besides, the number of characters would differ on different screen resolution, so that disclassifies your solution :/

But thank you anyway