javascript - Marquee not displaying all text - cutting off at different points -

my marquee doesn't seem displaying text have placed in div. gets cut off @ point. idea how can show text?

this code far (demo @ http://jsfiddle.net/ylwhe/)

html

<div id="marquee">they came down village, crossing ghostly forests, falling apart. bags full: garlands, amethysts, gold, frankincense, myrrh. incredible strings arrived them: heavenly sounds drew water marble stones, provoking visions never seen before. brought tired magicians? why had such music enchanted our sordid souls? no answer available? did need one? voices overheard told of incredible tales: children following mice, drowning, dead. fear turned shivering salty statues, unable back. many years later, explorers ventured , found tiny town, every inhabitant eternally still, imprisoned forever strange chords.</div> 

css

#marquee {     color: #000;     height: 16px;     padding-bottom: 5px; } 

js

$(function() {      var marquee = $("#marquee");      marquee.css({"overflow": "hidden", "width": "100%"});      // wrap "my text" span (ie doesn't divs inline-block)     marquee.wrapinner("<span>");     marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" });      marquee.append(marquee.find("span").clone()); // there 2 spans "my text"      marquee.wrapinner("<div>");     marquee.find("div").css("width", "200%");      var reset = function() {         $(this).css("margin-left", "0%");         $(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);     };      reset.call(marquee.find("div"));      }); 

your original code assumed 100% width <span> (i.e. 50% inside 200% width <div>) accommodate entire text.

i've modified calculate width required string , use animation.

check modified version: http://jsfiddle.net/ylwhe/5/

i.e.:

... marquee.find("span").css({ ... });   // actual used width var w = marquee.find("span").width();  ... var reset = function() {     $(this).css("margin-left", "0");      // use calculated width animation.     $(this).animate({ "margin-left": "-"+w+"px" }, 40000, 'linear', reset);  };