最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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 /)

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"));

    });

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/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"));

    });
Share Improve this question edited Aug 10, 2013 at 8:52 methuselah asked Aug 10, 2013 at 8:46 methuselahmethuselah 13.2k52 gold badges176 silver badges333 bronze badges 2
  • Works good in chrome (latest). – techfoobar Commented Aug 10, 2013 at 8:48
  • It works - but the text is cut off at a certain point – methuselah Commented Aug 10, 2013 at 8:51
Add a ment  | 

5 Answers 5

Reset to default 4

Your original code assumed that the 100% width <span> (i.e. 50% inside the 200% width <div>) will acmodate 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/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);

};

Working fiddle: http://jsfiddle/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.

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.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee"> They came</div>

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.

发布评论

评论列表(0)

  1. 暂无评论