Hi Technobear
Thanks for the response!
Yes, that’s the one I mean.
here is the code:
<div class="stockInfo"></div>
<style media="screen" type="text/css">
.companyTitle {
color: #878787;
background-color: #FFFFFF;
font-size: x-large;
font-weight: lighter;
line-height: 1.2;
font-family: Arial, sans-serif;
white-space: nowrap;
}
.companySymbolDateTime {
color: #878787;
background-color: #FFFFFF;
font-size: medium;
font-weight: lighter;
line-height: 1.2;
font-family: Arial, sans-serif;
white-space: nowrap;
}
.companyStockPrice {
color: #FFFFFF;
font-size: xx-large;
font-weight: lighter;
line-height: 1.1;
font-family: Arial, sans-serif;
white-space: nowrap;
margin-right: 10px;
}
.companyStockUp {
color: #3d9400;
font-size: x-large;
font-weight: lighter;
line-height: 1.1;
font-family: Arial, sans-serif;
white-space: nowrap;
}
.companyStockDown {
color: #dd4b39;
font-size: x-large;
font-weight: lighter;
line-height: 1.1;
font-family: Arial, sans-serif;
white-space: nowrap;
}
.companyStockLabels {
border-collapse: collapse;
border-spacing: 0;
color: #FFFFFF;
float: left;
font-family: Arial, sans-serif;
font-size: 18px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-right:10px;
}
.companyStockValues {
border-collapse: collapse;
border-spacing: 0;
color: #FFFFFF;
float: left;
font-family: Arial, sans-serif;
font-size: 18px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
.hidden {
display: none;
}
</style>
<script>
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20Symbol%2CName%2CDaysLow%2CDaysHigh%2CYearLow%2CYearHigh%2CLastTradePriceOnly%2CLastTradeDate%2CLastTradeTime%2CMarketCapitalization%2CChange_PercentChange%20from%20yahoo.finance.quotes%20where%20symbol%20%3D%20%22AXP%22%09&format=json&diagnostics=true&env=http%3A%2F%2Fdatatables.org%2Falltables.env";
var arrQuote, stockPrice, daysHigh, daysLow, yearHigh, yearLow, symbol, company, lastTradeDate, lastTradeTime, marketCap, arrStockChangePercent, stockChange, stockChangePercent, stockChangeDirection, stockInfoMarkup;
$.getJSON(url, function (data) {
arrQuote = data.query.results.quote;
stockPrice = parseFloat(Math.round(arrQuote["LastTradePriceOnly"] * 100) / 100).toFixed(2);
daysHigh = arrQuote["DaysHigh"];
daysLow = arrQuote["DaysLow"];
yearHigh = arrQuote["YearHigh"];
yearLow = arrQuote["YearLow"];
symbol = arrQuote["Symbol"];
company = arrQuote["Name"];
lastTradeDate = arrQuote["LastTradeDate"];
lastTradeTime = arrQuote["LastTradeTime"];
marketCap = arrQuote["MarketCapitalization"];
arrStockChangePercent = arrQuote["Change_PercentChange"].split(" - ");
stockChange = arrStockChangePercent[0];
stockChangePercent = arrStockChangePercent[1];
stockChangeDirection = stockChange.charAt(0);
if (stockChangeDirection === "+") {
stockChangeDirection = "up";
}
else {
stockChangeDirection = "down";
}
stockInfoMarkup = buildMarkup(stockPrice, daysHigh, daysLow,
yearHigh, yearLow, symbol,
company, lastTradeDate, lastTradeTime,
marketCap, stockChange, stockChangePercent, stockChangeDirection);
$('.stockInfo').append(stockInfoMarkup);
});
function buildMarkup(stockPriceVal, daysHighVal, daysLowVal,
yearHighVal, yearLowVal, symbolVal,
companyVal, lastTradeDateVal, lastTradeTimeVal,
marketCapVal, changeVal, changePercentVal, changeDirectionVal) {
stockInfoMarkup = "<div class=\"companyTitle\"><a href='http://finance.yahoo.com/q?s=" + symbolVal + "' target=\"_blank\">" + companyVal + " (Symbol: " + symbolVal + ")</a></div>";
stockInfoMarkup += "<div class=\"companySymbolDateTime\">" + lastTradeDateVal + " - " + lastTradeTimeVal + " ET</div>";
stockInfoMarkup += "<span class=\"companyStockPrice\">" + stockPriceVal + "</span>";
if (changeDirectionVal === "up") {
stockInfoMarkup += "<span class=\"companyStockUp\">" + changeVal + " (" + changePercentVal + ")</span>";
}
else {
stockInfoMarkup += "<span class=\"companyStockDown\">" + changeVal + " (" + changePercentVal + ")</span>";
}
stockInfoMarkup += "<div></div>";
stockInfoMarkup += "<div>";
stockInfoMarkup += "<div class=\"companyStockLabels\">";
stockInfoMarkup += "<div>Days High</div>";
stockInfoMarkup += "<div>Days Low</div>";
stockInfoMarkup += "<div>52 Week High</div>";
stockInfoMarkup += "<div>52 Week Low</div>";
stockInfoMarkup += "<div>Market Capitalization</div>";
stockInfoMarkup += "</div>";
stockInfoMarkup += "<div class=\"companyStockValues\">";
stockInfoMarkup += "<div>" + daysHighVal + "</div>";
stockInfoMarkup += "<div>" + daysLowVal + "</div>";
stockInfoMarkup += "<div>" + yearHighVal + "</div>";
stockInfoMarkup += "<div>" + yearLowVal + "</div>";
stockInfoMarkup += "<div>" + marketCapVal + "</div>";
stockInfoMarkup += "</div>";
stockInfoMarkup += "</div>";
return stockInfoMarkup;
}
</script>