I'm currently in the process of creating a stock ticker and I am facing some difficulties with the Smooth Div Scroll plugin. My issue arises when trying to incorporate dynamically generated paragraph tags - instead of forming a horizontal scrolling list, the P tags are simply displayed vertically on the page. Interestingly, when the paragraph tags are added statically, they function as intended by being positioned correctly and scrolling smoothly. Upon comparing the static version with the dynamic one using Firebug, it seems that the HTML remains the same, leading me to suspect that this may be a CSS-related problem which I have been unable to resolve.
EDIT: Feel free to check out the jsFiddle
Do you have any suggestions or solutions to offer?
Below is the code snippet for reference:
$(window).load(function () {
var $divScrollableArea = $(".scrollableArea");
var $stocks = new Array("GOLD", "SSRI", "PTM", "PAL", "USD", "SH", "DJI");
$.each($stocks, function (index, item) {
var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + item + "%22)%0A%09%09&&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$(function () {
var jqxhr = $.getJSON(url, function (json) {
$divScrollableArea.append("<p>" + item + "<br /><span class='left'>" + json.query.results.quote.BidRealtime +
"</span><span class='right'>" + json.query.results.quote.Change_PercentChange + "</span></p>");
})
.success(function () { BuildScroll(); });
});
});
function BuildScroll() {
$("div#scrollingText").smoothDivScroll({
autoScroll: "always",
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15
});
}
});
<style type="text/css">
.stock
{
font: bold .8em Verdana;
padding: 5px;
width: 100%;
}
.innerStock
{
float: left;
margin-right: 20px;
}
.left
{
font: normal .7em Verdana;
text-align: left;
width: 30%;
padding-right: 15px;
}
.right
{
font: normal .7em Verdana;
text-align: right;
color: red;
}
#scrollingText
{
width: 100px;
height: 35px;
border: solid 1px #ccc;
position: relative;
padding: 2px 0px;
}
#scrollingText div.scrollableArea p
{
display: block;
float: left;
margin: 0;
padding-right: 7px;
padding-top: 1px;
font-family: Courier, Arial, Sans-Serif;
font-size: 12px;
line-height: 12px;
font-weight: normal;
background-color: #fff;
color: #000;
white-space: nowrap;
width:300px;
}
</style>
<div id="scrollingText">
<div class="scrollWrapper">
<div class="scrollableArea">
</div>
</div>
</div>