<form action="/key" method="post"> <label>key_1:</label><br/> <input type="text" name="a" pattern="^[a-za-z]+$" required/><br /> <label>key_2: </label><br /> <input type="text" name="b" pattern="^[a-za-z]+$" required/><br /> <input type="submit" name="submit" value="request"/><style> body { font: 100% helvetica, arial, sans-serif } ul.percentage { width: 100%; float: left} ul.percentage li { display: block; width: 0; padding: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; float: left; clear: left } ul.percentage li.a { background: #ff0066; color: #fff} ul.percentage li.b { background: #000; color: #fff} ul.percentage li span { float: right; display: block} ul.tweets { float: left; clear: both} #stream { float: left; clear: both; width: 100%} #stream ul { list-style: none} #stream ul li { float: left; clear: left; width: 100%; border-bottom: 1px solid #ccc;: 5px; padding: 5px 0} #stream ul li:nth-child(even) { background: #f8f5f6; } #stream ul li img { float: left; margin-right: 10px; padding: 5px} #a { width: 45%; float: left } #b { width: 45%; float: right } </style> </head> <body> <h1>graph based on keyword</h1> <ul class="percentage"> <li class="a"> <span>0</span> </li> <li class="b"> b <span>0</span> </li> </ul> <section id="stream"> <section id="a"> <h2>tweets of a</h2> <ul></ul> </section> <section id="b"> <h2>tweets of b</h2> <ul></ul> </section> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect(); jquery(function ($) { var acounter = $('li.a'), bcounter = $('li.b'), acounterpercentage = $('li.a span'), bcounterpercentage = $('li.b span'), alist = $('#a ul'), blist = $('#b ul'); socket.on('percentages', function (data) { acounter .css("width", data.a + '%'); acounterpercentage .text(math.round(data.a * 10) / 10 + '%'); bcounter .css("width", data.b + '%'); bcounterpercentage .text(math.round(data.b * 10) / 10 + '%'); }); socket.on('a', function (data) { $('<img />') .attr('src', data.avatar) .load(function(){ alist .prepend($('<li>') .prepend($('<p>').text(data.user + ': ' + data.text)) .prepend($(this))); }); }); socket.on('b', function (data) { $('<img />') .attr('src', data.avatar) .load(function(){ blist .prepend($('<li>') .prepend($('<p>').text(data.user + ': ' + data.text)) .prepend($(this))); }); }); }); this code going fetch , b value , assigned give in from.html input box can me how have it. variable should display in ul , li class .
if have inputs let's say
<input type="text" id="inputa" name="inputa"> <input type="text" id="inputb" name="inputb"> and want introduce values in list, recommend use ids , classes.
<ul id="ab_list" class="percentage"> <li id="li_a"> <span class="val">a</span> <span class="per">0</span> </li> <li id="li_b"> <span class="val">b</span> <span class="per">0</span> </li> </ul> so can use jquery do
<script> var data_a = $("#inputa").val(); var data_b = $("#inputb").val(); $("#ab_list #li_a .val").html(data_a); $("#ab_list #li_b .val").html(data_b); <script> here have initial jsfiddle can continue research/work http://jsfiddle.net/pfkx2nm7/. of course need kind of event (button click, key enter, form submit...etc) submit changes in input box.
i hope helps :)
Comments
Post a Comment