JS marquee

by ppajer

HTML

<div id="overflow">
  Yadda yadda overflowing text this line is too long oh noes!
</div>

CSS

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

JavaScript

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