javascript - voting arrows like stack overflow with bootstrap, how do I reduce the size of glyph-icon items and bring them tighter -
hello i'm trying implement voting system stack overflow, i've finished backend//whole functionality i'm having problem displaying them in ui. right now, arrows far apart , number isn't quite centered. if it's possible want color of arrow toggled when clicked/unclicked. i've tried this, keep getting messed ui. can please me this? thank in advance.
<td class="vert-align"> <div> <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote"> <span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a> <br /> //upper arrow <span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here <a href="/post/{{ post.slug }}/vote?is_up=0" class="vote"> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a> </div> //under arrow </td>
also have 1 js file voting
function vote(node) { var thread_id = node.attr("href").split('\/')[2]; $.ajax({ url: node.attr("href"), datatype: "json", success: function(data) { $("#vote_count_"+thread_id).html(data.count); }, error: function(data) { alert(data.responsejson.error_message); } }); } $("a.vote").on("click", function() { vote($(this)); return false; });
thank you.
to achieve design bootstrap (which can see using) can use template :
<div class="row"> <div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;"> <span class="glyphicon glyphicon-triangle-top col-md-12"></span> <span class="col-md-12">0</span><!-- number goes here --> <span class="glyphicon glyphicon-triangle-bottom col-md-12"></span> </div> </div>
if want toggle arrow color when clicked use javascript method uses var (boolean) determine wether button clicked or not, jquery method .css() can change color of wanted button.
live example - http://www.bootply.com/6kzwhjefif
Comments
Post a Comment