How to calculate text width styled "nowrap" with jquery?

Question

Im trying to write a marquee effect for my latest news section the problem is I cant calculate the text width inside my UL tag I couldnt find a solution for this

(function($){
        $.fn.marque = function(options, callback){
        var defOptions = $.extend({
                speedPixelsInOneSecound: 150,
                select: $('#latestNews'),
                clickSelect: '',
                clickUrl: ''
        }, options);

        var windowWidth = $(window).width();
        var textWidth = defOptions.select.outerWidth();
        var duration = (windowWidth + textWidth) * 1000 / 
        defOptions.speedPixelsInOneSecound;
        var startingPosition = (windowWidth + textWidth);
        var curentPosition = (windowWidth + textWidth);
        var speedProportionToLocation = curentPosition / startingPosition;
        defOptions.select.css({'left': -(textWidth)});
        defOptions.select.show();
        var animation;

        function marquee(animation){
            curentPosition = (windowWidth + defOptions.select.outerWidth());
            speedProportionToLocation = curentPosition / startingPosition;
            animation = defOptions.select.animate({'left': windowWidth+'px'}, 
            duration * speedProportionToLocation, "linear", function(){
            defOptions.select.css({'left': -(textWidth)});
        });
    }
        var play = setInterval(marquee, 200);
        return this;
   };
 }(jQuery)); 

$(window).marque({
     speedPixelsInOneSecound: 70,
     select: $('#latestNews ul'),
     clickSelect: $('.message'),
     clickUrl: 'services.php'
 });

#latestNews > * {
    display: inline-block;
    vertical-align: middle;
}

#latestNews h1 {
    width: 22.175%;
    height: 42px;
    font: 16px/42px 'IranYekanWebRegular';
    background-color: #1e93c4;
    color: #fff;
    text-align: center;
}

#latestNews > div {
    width: 76.825%;
    padding: 0 20px;
    height: 42px;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}

#latestNews > div:after, #latestNews > div:before {
    content: "";
    display: block;
    background-color: #f5f5f5;
    width: 20px;
    height: 42px;
    position: absolute;
    top: 0;
    z-index: 1;
}

#latestNews > div:after {
    left: 0;
}

#latestNews > div:before {
    right: 0;
}

#latestNews ul {
    white-space: nowrap;
    position: relative;
}

#latestNews li {
    display: inline-block;
    margin-right: 40px;
}

#latestNews li:first-child {
    margin-right: 0;
}

#latestNews a {
    display: block;
    height: 42px;
    font: 12px/42px 'IranYekanWebRegular';
    color: #777;
}

#latestNews a span:first-child {
    font: 12px 'IranYekanWebBold' ;
    margin-left: 10px;
    color: #1e93c4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="latestNews">
    <h1>Latest News</h1>
    <div>
        <ul>
            <li><a href="#">
                <span class="latestNewsTitle aqua">Title 1</span><span class="newsDescription">Sample Text 1 Sample Text 1 </span>
            </a></li>
            <li><a href="#">
                <span class="latestNewsTitle aqua">Title 2</span><span class="newsDescription">Sample Text 2 Sample Text 2 </span>
            </a></li>
            <li><a href="#">
                <span class="latestNewsTitle aqua">Title 3</span><span class="newsDescription">Sample Text 3 Sample Text 3 </span>
            </a></li>
            <li><a href="#">
                <span class="latestNewsTitle aqua">Title 4</span><span class="newsDescription">Sample Text 4 Sample Text 4 </span>
            </a></li>
        </ul>
    </div>
</div>

Im trying to write a marquee function on this section but the problem is I cant set a fixed width for each news or the whole UL (container of the short news)

so I need to figure out the text-width inside the UL somehow

thanks

Answer 1

To get text width with no wrap you can add your text to temp span container, span container will be hidden, Add your text to span container and find with of span.

html

<span id="tempContainer"></span>

css

#tempContainer{
        overflow: hidden;
        white-space: nowrap;
        display: none;
}

JS

var singleNewsDiscriptionWidth = $('#tempContainer').text($('.newsDescription').first().text()).width()

Hope you get some idea for your solution.