Stock Widget Example

by edgarinvillegas

HTML

<body>
    <div id="titlebkgrnd"></div>
    <div id="titletext">Commodities</div>
    <div id="titleaccent"></div>
<!--The form for the radio toggle buttons-->
<form name="range">
    <input id="rdb1" class="radio" type="radio" name="toggler" value="1" checked="checked"><label for="rdb1">Current</label>
    <input id="rdb2" class="radio" type="radio" name="toggler" value="2" ><label for="rdb2">24-Hour</label>
    <input id="rdb3" class="radio" type="radio" name="toggler" value="3" ><label for="rdb3">Week</label>
    <input id="rdb4" class="radio" type="radio" name="toggler" value="4" ><label for="rdb4">Month</label>
</form>

<!--The div and associated data for each radio toggle button-->
<div id="blk-1" class="current">
    <table id="table1" class="table">
    <tr>
    <th class="tblheader">Name</th>
    <th class="tblheader">Ask</th>
    <th class="tblheader">Bid</th>
    <th class="tblheader">Change</th>
    <th class="tblheader">Change (%)</th>
    </tr>
</table>
</div>
<div id="blk-2" class="toHide">
    24-hour comparison of commodity quote info here
</div>
<div id="blk-3" class="toHide">
    Weekly comparison of commodity quote info here
</div>
<div id="blk-4" class="toHide">
    Monthly comparison of commodity quote info here
</div>
</body>

CSS

#titlebkgrnd{
    background-color: #103346;
    height: 28px;
    width: 305px;
}

#titletext{
    color: #ffffff;
    font-size: 15pt;
    position: fixed;
        top: 11px;
        left: 18px;
}

#titleaccent{
    background-color: #C3A43F;
    height:  6px;
    width: 305px;
}

.radio{
    display: none;
    margin: 10px;
}

.radio + label{
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    font-weight: bold;
}

.radio:checked + label{
    text-decoration: underline;
}

.toHide{
    display: none;
}

.current{
    display: block;
}

.table{
    padding-top: 8px;
}

.tblheader{
    font-size: 8pt;
    margin: -2px;
    padding: 4px 12px;
}

.table: {
    border: 1px solid black;    
}

JavaScript

$(function() {
    $("[name=toggler]").click(function(){
        $('.toHide').hide();
        $('.current').hide();
        $("#blk-"+$(this).val()).show(100);
    });
});

$(function() {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20yahoo.finance.quotes%20WHERE%20symbol%20in(%22GCF14.CMX%22%2C%22SIF14.CMX%22%2C%22PAH14.NYM%22%2C%22PLF14.NYM%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(data) {
        console.log("data: ", data);
        console.log(data.query.results.quote);
        $.each(data.query.results.quote, function(key, obj){
            var $tr = $('<tr/>', {'class': 'my-new-list'}).appendTo('#blk-1 table');            
            $tr.append($('<td/>').text(obj.Name || "-"));
            $tr.append($('<td/>').text(obj.Ask || "-"));
            $tr.append($('<td/>').text(obj.Bid || "-"));
            $tr.append($('<td/>').text(obj.Change || "-"));
            $tr.append($('<td/>').text(obj.ChangeinPercent || "-"));
        });

    });
});