Marquee not displaying all text - cutting off at different points

Question

My marquee doesn't seem to be displaying all the text I have placed in my div. It always gets cut off at a certain point. Any idea how I can get it show all the text?

This is my code so far (demo at http://jsfiddle.net/yLwhe/)

HTML

<div id="marquee">They came down the village, crossing ghostly forests, almost falling apart. Their bags were full: garlands, amethysts, gold, frankincense, myrrh. Incredible strings arrived with them: heavenly sounds drew water from marble stones, provoking visions never seen before. Who brought those tired magicians? Why had such a music enchanted our sordid souls? Was no answer available? Did we need one? Voices overheard told of incredible tales: children following mice, drowning, dead. Fear turned us into shivering salty statues, unable to look back. Many years later, explorers ventured and found this tiny town, every inhabitant eternally still, imprisoned forever by 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" with a span (IE doesn't like divs inline-block)
    marquee.wrapInner("<span>");
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // now there are two spans with "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"));

    });

Answer 1

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

I've modified it to actually calculate the width required by the string and then use that to do the animation.

Check this modified version: http://jsfiddle.net/yLwhe/5/

i.e.:

...
marquee.find("span").css({ ... }); 

// get the actual used width
var w = marquee.find("span").width();

...
var reset = function() {
    $(this).css("margin-left", "0");

    // use calculated width for animation.
    $(this).animate({ "margin-left": "-"+w+"px" }, 40000, 'linear', reset);

};

Answer 2

Working fiddle: http://jsfiddle.net/yLwhe/6/

Firstly, to get rid of the problem where the text is cut at a point, apply white-space: nowrap to the div:

marquee.wrapInner("<div>");
marquee.find("div").css({
    "width": "100%",
    "white-space": "nowrap"
});

Otherwise the lines would break when they reach the end of the div.

Secondly, where you are trying to animate the following margin-left:

$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);

This won't work, because the 100% you're referring to is not the width of the div itself, or its contents, but rather the width of it's container. You need to do this instead:

$(this).animate({ -$(this).find('span').width() + 'px' }, 10000, 'linear', reset);

Which will move the div exactly the pixel length of one of its child spans.

Answer 3

Simply

wrap text within maqrquee tag with a div and Give it a class name. finally use a padding to that class. padding value depends on the font-size of text.

Instead of using this style

<marquee behavior="alternate" direction="right">Here is marquee text</marquee>

Use examples bellow.

HTML Example:

<marquee behavior="alternate" direction="right"><div class="maqquee_text">Here is marquee text</div></marquee>

CSS Example

div.maqquee_text{padding:10px;}

That works for me.

Answer 4

Here's an answer based off of techfoobar's answer, that doesn't create a duplicate span for small strings and that has a more even scrolling speed regardless of the text length:

$(function() {

    var marquee = $("#marquee"); 
    
    marquee.wrapInner("<span>");
   
    var w = marquee.find("span").width();
    var w2 = $(document.body) .width();
    
    if (w < w2) {
        w = w2;
        marquee.css({"overflow": "hidden", "width": "100%", "white-space": "nowrap","text-align":"right"});
    
        marquee.wrapInner("<div>");
        marquee.find("div").css("width", (w)+'px');
    }
    else {
       marquee.css({"overflow": "hidden", "width": "100%", "white-space": "nowrap"});
       marquee.find("span").css({ "width": "auto", "white-space": "nowrap", "display": "inline-block", "text-align":"center", "padding-right": "10px" }); 
       marquee.append(marquee.find("span").clone()); 

       marquee.wrapInner("<div>");
       marquee.find("div").css("width", (w*2)+'px');
   }

   var reset = function() {
       $(this).css("margin-left", "0");
       $(this).animate({ "margin-left": "-"+w+"px" }, w*4.5, 'linear', reset);
   };

   reset.call(marquee.find("div"));
	
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee"> They came</div>

Answer 5

If you will change the width of div marquee, then you problem will solve.

marquee.css({"overflow": "hidden", "width": "100%"});

In above code, if we change width 100% to 308%, then it will work fine in FF, Chrome (latest version), and if we change width 100% to 325%, then it will work fine in IE.