Make marquee when text overflows

Question

<div class="grid_1_of_4 images_1_of_4">
    <a href="preview.html"><img src="images/Advertise2.png" alt="" /></a>
    <h2>**This is a Long text**</h2>
    <div class="price-details">
        <div class="price-number">
            <p><span class="rupees">Price</span></p>
        </div>
        <div class="clear"></div>
    </div>   
</div>

I want to make this h2 text Marquee when text overflows. How should I do it? Thank You!

Here are some infos about that: https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative — D. Braun, Jan 18 '18 at 13:09
Check this out https://stackoverflow.com/questions/41987383/how-to-make-marquee-text-only-when-its-overflowing — Vikas Singh, Jan 18 '18 at 13:34

NobodyIsPerfect · Accepted Answer · 2018-01-18T13:24:00.313

Here is a similar issue: How to make marquee text only when it's overflowing?

You should try the solution mentioned in the link above. Hope this is helpful. In your case I just gave your h2 tag an id and copied the solution from the link I've posted.

function isElementOverflowing(element) {
  var overflowX = element.offsetWidth < element.scrollWidth,
    overflowY = element.offsetHeight < element.scrollHeight;

  return (overflowX || overflowY);
}

function wrapContentsInMarquee(element) {
  var marquee = document.createElement('marquee'),
    contents = element.innerText;

  marquee.innerText = contents;
  element.innerHTML = '';
  element.appendChild(marquee);
}

var element = document.getElementById('overflow');

if (isElementOverflowing(element)) {
  wrapContentsInMarquee(element);
}

#overflow {
  white-space: nowrap;
  max-width: 15em;
  overflow: hidden;
}

<div class="grid_1_of_4 images_1_of_4">
  <a href="preview.html"><img src="images/Advertise2.png" alt="" /></a>
  <h2 id="overflow">**This is a Long text which should marquee when overflow**</h2>
  <div class="price-details">
    <div class="price-number">
      <p><span class="rupees">Price</span></p>
    </div>
    <div class="clear"></div>
  </div>
</div>

score 1 · Answer 2 · answered Jan 18 '18 at 13:40

That tag is obsolete and you should not use it. Look at MDN for refrerence.

To detect overflow you could test element.scrollWidth > element.clientWidth given that the width of the element is set, or you compare it with its parent.

Instead of the marquee element you could try to do a CSS animation on the content transforming translateX to make it bounce left and right.

Example code at JSBin

Make marquee when text overflows

2 Answers2