0
#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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Joshua
  • 419
  • 3
  • 7
  • 19
  • Possible duplicate http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee – Kushal Feb 06 '14 at 06:03

2 Answers2

0

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>
Senthilmurugan
  • 383
  • 1
  • 14
  • 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
0

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.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129