Text present inside this particular div should be marquee

Question

#player #title{
left: 90px;
width: 200px;
overflow: hidden;
}

Text present inside this particular div (#Title) should be a marquee. But there should be no changes in the HTML (only java script is allowed ). How to proceed?

Possible duplicate http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee — Kushal, Feb 06 '14 at 06:03

score 0 · Answer 1 · answered Feb 06 '14 at 06:00

http://jsfiddle.net/4mTMw/8/

<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>
<script>
    var marquee = $('div.marquee');
    marquee.each(function() {
        var mar = $(this),indent = mar.width();
        mar.marquee = function() {
            indent--;
            mar.css('text-indent',indent);
            if (indent < -1 * mar.children('div.marquee-text').width()) {
                indent = mar.width();
            }
        };
        mar.data('interval',setInterval(mar.marquee,1000/60));
    });
</script>

Thanks for your reply. My html code follow...
Title Goes here
But there should be no changes in the HTML. — Joshua, Feb 06 '14 at 06:06

score 0 · Accepted Answer · answered Feb 06 '14 at 06:08

If your text is known and never change, you could use some CSS3: transition and text-shadow and make it slide with text-indent, example:

p {
  text-shadow:35em 0 0;/* equal to length of text */
  width:15em;
  white-space:nowrap;
  overflow:hidden;
animation: marqueeme 3s infinite;
  margin:auto;
  background:yellow;
  border:solid red;
}
@keyframes marqueeme {
  to {text-indent:-35em;
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> See and test it : http://codepen.io/gc-nomade/pen/wGtmy

You need to use EM values to match with text-size, you may need, as well, to reset letter-spacing. It can break if text change or with some fonts.

Text present inside this particular div should be marquee

2 Answers2