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