currency ticker without white space

Question

I want to create a currency ticker.A query retrieves the values from yahoo Finance API and display them as a text.The main issue is the white space at the end of the text.The marquee script marquee plugin solves the gap issue. The setInterval disrupts the moving text because it starts from the beginning.

     $(document).ready(function() {
       //StockPriceTicker();
       setInterval(StockPriceTicker, 5000);
     });

     function StockPriceTicker() {
       var Symbol = "",
         CompName = "",
         Price = "",
         ChnageInPrice = "",
         PercentChnageInPrice = "";
       var CNames = "^FTSE,HSBA.L,SL.L,BATS.L,BLND.L,FLG.L,RBS.L,RMG.L,VOD.L";
       var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
       var StockTickerHTML = "";

       var StockTickerXML = $.get(flickerAPI, function(xml) {
         $(xml).find("quote").each(function() {
           Symbol = $(this).attr("symbol");
           $(this).find("Name").each(function() {
             CompName = $(this).text();
           });
           $(this).find("LastTradePriceOnly").each(function() {
             Price = $(this).text();
           });
           $(this).find("Change").each(function() {
             ChnageInPrice = $(this).text();
           });
           $(this).find("PercentChange").each(function() {
             PercentChnageInPrice = $(this).text();
           });

           StockTickerHTML += "<span>" + CompName + " " + Price + "</span>";
         });

         $(".marquee div").html(StockTickerHTML);
         //$("#dvStockTicker").jStockTicker({interval: 30, speed: 2});
       });
     }

body {
  margin: 20px;
}
.marquee {
  height: 25px;
  width: 420px;
  overflow: hidden;
  position: relative;
}
.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}
.marquee span {
  float: left;
  width: 50%;
}
@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

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

  </div>
</div>

Thanks in advance.

Answer 1

The problem is you gave the span a fixed width, and if the text is smaller it will have a big white empty space in the end of each, so by adjusting the .marquee span rule like this solve that issue

.marquee span {
    display: inline-block;
}
.marquee span ~ span::before {
    content:'|';
    color: red;
    padding: 0 5px
}

The text interruption is caused by the fixed width on the .marquee div, so I made some adjustments to that one too

.marquee div {
    display: inline-block;
    padding-left: 100%;          /*  start from right, can be removed  */
    animation: marquee 25s linear 2s infinite;
}

Sample snippet

$(document).ready(function () {
            //StockPriceTicker();
            setInterval(StockPriceTicker , 1000);
        });
		
        function StockPriceTicker() {
            var Symbol = "", CompName = "", Price = "", ChnageInPrice = "", PercentChnageInPrice = ""; 
            var CNames = "^FTSE,HSBA.L,SL.L,BATS.L,BLND.L,FLG.L,RBS.L,RMG.L,VOD.L";
            var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
            var StockTickerHTML = "";
            
            var StockTickerXML = $.get(flickerAPI, function(xml) {
                $(xml).find("quote").each(function () {
                    Symbol = $(this).attr("symbol");
                    $(this).find("Name").each(function () {
                        CompName = $(this).text();
                    });
                    $(this).find("LastTradePriceOnly").each(function () {
                        Price = $(this).text();
                    });
                    $(this).find("Change").each(function () {
                        ChnageInPrice = $(this).text();
                    });
                    $(this).find("PercentChange").each(function () {
                        PercentChnageInPrice = $(this).text();
                    });
                    
                    StockTickerHTML += "<span>"+CompName+" "+Price+"</span>";
                });
			
                $(".marquee div").html(StockTickerHTML);
                //$("#dvStockTicker").jStockTicker({interval: 30, speed: 2});
            });
        }

body { margin: 20px; }

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px green solid;
}

.marquee span {
    display: inline-block;
}
.marquee span ~ span::before {
    content:'*';
    padding: 0 25px;
}

.marquee div {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear 1s infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate( -100%, 0); }
}

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

Update based on comment

$(document).ready(function () {
            //StockPriceTicker();
            setInterval(StockPriceTicker , 5000);
        });
		
        function StockPriceTicker() {
            var Symbol = "", CompName = "", Price = "", ChnageInPrice = "", PercentChnageInPrice = ""; 
            var CNames = "^FTSE,HSBA.L,SL.L,BATS.L,BLND.L,FLG.L,RBS.L,RMG.L,VOD.L";
            var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
            var StockTickerHTML = "";
            
            var StockTickerXML = $.get(flickerAPI, function(xml) {
                $(xml).find("quote").each(function () {
                    Symbol = $(this).attr("symbol");
                    $(this).find("Name").each(function () {
                        CompName = $(this).text();
                    });
                    $(this).find("LastTradePriceOnly").each(function () {
                        Price = $(this).text();
                    });
                    $(this).find("Change").each(function () {
                        ChnageInPrice = $(this).text();
                    });
                    $(this).find("PercentChange").each(function () {
                        PercentChnageInPrice = $(this).text();
                    });
                    
                    StockTickerHTML += "<span>"+CompName+" "+Price+"</span>";
                });
			
                $(".marquee div").html(StockTickerHTML);
                //$("#dvStockTicker").jStockTicker({interval: 30, speed: 2});
            });
        }

body { margin: 20px 0; }

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px green solid;
}
.marquee span {
    display: inline-block;
    background: lightgray;
}
.marquee span ~ span::before {
    content:'|';
    color: red;
    padding: 0 5px;
}
.marquee div {
    display: inline-block;
    animation: marquee 6s linear 2s infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate( calc(-100% + 100vw), 0); }
}

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