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

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -