How to add a class to a bar using jQuery?


Tags: javascript,jquery,css,jquery-hover

Problem :

How to add a class to the bar when the user hover on the bar ? I deployed a code like the one below, but didn't get the proper output.

For example in CSS, we add code like ".bar:hover:before", in the same manner how can I add the .bar:hover:before in jQuery ?

$(function() {
  $("#bars li .bar").each(function(key, bar) {
    var percentage = $(this).data('percentage');

    $(this).css('height', percentage + '%');

    $(this).animate({
      'height': percentage + '%'
    }, 1000);
  });
});


$(window).load(function() {
  $('.bar').prepend('class="lnr lnr-star"');

})
#chart {
  width: 650px;
  height: 300px;
  margin: 30px auto 0;
  display: block;
}
#chart #numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}
#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #444;
  position: relative;
  bottom: 30px;
}
#chart #numbers li:last-child {
  height: 30px;
}
#chart #numbers li span {
  color: #eee;
  position: absolute;
  bottom: 0;
  right: 10px;
}
#chart #bars {
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 600px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
  display: table-cell;
  width: 100px;
  height: 300px;
  margin: 0;
  text-align: center;
  position: relative;
}
#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 15px;
  background: #49E;
  position: absolute;
  bottom: 0;
  height: 0;
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: height 1s ease-in-out;
  -o-transition: height 1s ease-in-out;
  transition: height 1s ease-in-out;
}
#chart #bars li .bar:hover {
  background: #5AE;
  cursor: pointer;
}
#chart #bars li .bar:hover:before {
  color: white;
  content: "\e814" attr(data-percentage);
  position: relative;
  bottom: 20px;
}
#chart #bars li span {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
}
.lnr.lnr-star {
  font-size: 13px;
  margin-right: 1px;
  color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet" />

<div id="chart">

  <ul id="bars">
    <li>
      <div data-percentage="56" class="bar"></div><span><i class="lnr lnr-star"></i></span>
    </li>
  </ul>
</div>



Solution :

Using jQuery, you would use the .addClass() method. So what you would do instead of prepending it. You would do this: $('.bar').addClass('lnr lnr-star'); Prepending items doesn't add it inside the tag, it puts it as another item before the object selected. When calling a function when the user hovers over an object, you would use the .hover() method. With the HTML, you already have the icon, you can remove its classes since jQuery will add the classes to the icon. So all together you would have:

$(function() {
  $("#bars li .bar").each(function(key, bar) {
    var percentage = $(this).data('percentage');

    $(this).css('height', percentage + '%');

    $(this).animate({
      'height': percentage + '%'
    }, 1000);
  });
});


$('.bar').hover(function() {
  $('.bar-icon').addClass('lnr lnr-star');
}, function() {
  $('.bar-icon').removeClass('lnr lnr-star');
});
#chart {
  width: 650px;
  height: 300px;
  margin: 30px auto 0;
  display: block;
}
#chart #numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}
#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #444;
  position: relative;
  bottom: 30px;
}
#chart #numbers li:last-child {
  height: 30px;
}
#chart #numbers li span {
  color: #eee;
  position: absolute;
  bottom: 0;
  right: 10px;
}
#chart #bars {
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 600px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
  display: table-cell;
  width: 100px;
  height: 300px;
  margin: 0;
  text-align: center;
  position: relative;
}
#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 15px;
  background: #49E;
  position: absolute;
  bottom: 0;
  height: 0;
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: height 1s ease-in-out;
  -o-transition: height 1s ease-in-out;
  transition: height 1s ease-in-out;
}
#chart #bars li .bar:hover {
  background: #5AE;
  cursor: pointer;
}
#chart #bars li .bar:hover:before {
  color: white;
  content: "\e814" attr(data-percentage);
  position: relative;
  bottom: 20px;
}
#chart #bars li span {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
}
.lnr.lnr-star {
  font-size: 13px;
  margin-right: 1px;
  color: yellow;
}
<link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div id="chart">

  <ul id="bars">
    <li>
      <div data-percentage="56" class="bar">
        <i></i> 
      </div>
    </li>
  </ul>
</div>


    CSS Howto..

    How to write function in css

    How to make a “wrappanel” in html?

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    CSS: How to float 3 divs side by side for width:100% without messing up?

    How to add Button over image using CSS?

    How to parse xmlwebservice in phonegap

    How to wrap text without whitespace? [duplicate]

    How to make a CSS scroll follow div stop follow at a position

    How to align divs side by side without one being slightly lower?

    How to fix parent hover issues with CSS?

    How to normalize a button and an anchor with CSS?

    How to make this table's height equal to the middle td's height

    Logo not showing on top of header img

    How to display items side by side until window width then in next row

    How to add space to left-right of the Web-Page using HTML/CSS

    How to organize CSS Sheets [closed]

    How to break this Javascript into seperate CSS classes?

    CSS How to Make Image Display outside of div

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How can I write the javascript script to modify this css file?

    How to override facebook share button css

    How can I vertically align the text on these CSS buttons?

    Show-hide based on two sets of selectors--how to make them work together?

    How to do something like border-top-left-color. [CSS]

    How to see the print media CSS in Firebug?

    How to create a dynamic-width arrow in CSS?

    How can I make a split-text input placeholder?

    CSS: How to use Transform property on a bootstrap grid class

    How to add html glyph markup to JQuery show/hide function

    how to prevent datepicker css from changing