Is there a way to customize a tradingview ticker widget? [closed]

Question

I'm using this widget from tradingview (https://www.tradingview.com/widget/ticker/) and wanted to know if there is a way to:

• a) make the ticker bar scroll (iFrame scrolling=yes)
• b) re-size the widget.

I've not used iFrame before and am not sure how to go about making the customisations or if they are even possible.

Answer 1

Here's an answer that achieves the desired effect: https://codepen.io/epsilon42/pen/BPZgjP/

It involves mainly the use of CSS animations but it was also necessary to add some jQuery to clone the iframe to get rid of the gap when the ticker runs to the end. This was the only way I could think of doing it due to being unable to manipulate contents of an iframe cross-domains.

I had to remove the async on the TradingView script in order for the $( document ).ready to fire correctly.

Another thing to note is that it is necessary to change the width in the CSS according to how many items you choose to have inside the ticker:

.ticker-canvas {
  width: calc((200px * 15) + 2px);
}

Change the value 15 in the above CSS to the number of items you call in the script. 200px seems to be the minimum width you can use before the widget decides to get rid of items automatically, but there doesn't seem to be any problem with using a higher value if desired. 2px is to account for the 1px border either side of the widget.

HTML:

<!-- TradingView Widget BEGIN -->
<div class="ticker-container">
<div class="ticker-canvas">
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js">
  {
  "symbols": [
    {
      "title": "S&P 500",
      "proName": "INDEX:SPX"
    },
    {
      "title": "Nasdaq 100",
      "proName": "INDEX:IUXX"
    },
    {
      "title": "EUR/USD",
      "proName": "FX_IDC:EURUSD"
    },
    {
      "title": "BTC/USD",
      "proName": "BITFINEX:BTCUSD"
    },
    {
      "title": "ETH/USD",
      "proName": "BITFINEX:ETHUSD"
    },
    {
      "description": "Apple",
      "proName": "NASDAQ:AAPL"
    },
    {
      "description": "Berkshire",
      "proName": "NYSE:BRK.A"
    },
    {
      "description": "Microsoft",
      "proName": "NASDAQ:MSFT"
    },
    {
      "description": "Google",
      "proName": "NASDAQ:GOOG"
    },
    {
      "description": "Tesla",
      "proName": "NASDAQ:TSLA"
    },
    {
      "description": "Amazon",
      "proName": "NASDAQ:AMZN"
    },
    {
      "description": "AUD/USD",
      "proName": "OANDA:AUDUSD"
    },
    {
      "description": "Sony",
      "proName": "NYSE:SNE"
    },
    {
      "description": "BHP",
      "proName": "BHP"
    },
    {
      "description": "Telstra",
      "proName": "TLS"
    }
  ],
  "locale": "en"
}
  </script>
</div>
</div>
</div>
<!-- TradingView Widget END -->
<div class="content">
  <p>Some text.</p>
</div>

CSS:

body {
  margin: 0;
}
.content {
  padding: 10px 20px;
}
.content p {
  font-family: sans-serif;
}

/******/

.ticker-container {
  width: 100%;
  overflow: hidden;
}

.ticker-canvas {
  width: calc((200px * 15) + 2px);
  /* 
  200px = minimum width of ticker item before widget script starts removing ticker codes
  15 = number of ticker codes
  2px = accounts for 1px external border
  */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker-canvas;
  animation-name: ticker-canvas;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
}
.ticker-canvas:hover {
  animation-play-state: paused
}

@-webkit-keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.tradingview-widget-container {
  position: relative;
}
.tradingview-widget-container iframe {
    position: absolute;
    top: 0;
}
.tradingview-widget-container iframe:nth-of-type(2) {
  left: 100%;
}

JS:

$( document ).ready(function() {
  $( ".tradingview-widget-container iframe" ).clone().appendTo( ".tradingview-widget-container" );
});