jQuery addClass example

Change class name on click in jQuery

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<head>
  <style>
      /*
* Legal Disclaimer
*
  print '\n', 'Note that the webfonts share the TT sources'
* These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
* It is illegal to download or use them on other websites.
*
* While the @font-face statements below may be modified by the client, this
* disclaimer may not be removed.
*
* Lineto.com, 2016
*/



@font-face {
  font-family: "KantarBrownWeb-LightItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"),
      url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"),
      url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-BoldItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"),
      url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"),
      url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-Italic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"),
  ...

JavaScript

( input=>{

      $('head').append(`<style>
    div.example {
      padding: 10px;
      background: #ffffff;  
    }
    
    /* Use for 1 lines of text before truncation */
    .mle-1 {
      overflow: hidden;
      position: relative;
      line-height: 1em;
      max-height: 1em; 
      text-align: center;
      padding-right: 1em;
    }
    
    .mle-1:before {
      content: '...';
      position: absolute;
      right: 0;
      bottom: 0;
    }
    
    .mle-1:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1em;
      height: 1em;
      margin-top: 0.2em;
      background: #FFFFFF;
    }
    
    
    /* Use for 2 lines of text before truncation */
    .mle-3 {
      overflow: hidden;
      position: relative;
      line-height: 1em;
      max-height: 2.9em; 
      text-align: center;
      padding-right: 1em;
    }
    
    .mle-3:before {
      content: '...';
      position: absolute;
      right: 0;
      bottom: 0;
    }
    
    .mle-3:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1em;
      height: 1em;
      margin-top: 0.2em;
      background: #FFFFFF;
    } </style>`);
    

        //TITLE TEMPLATE

var titleHtml = 
`
<div class="chartTitles">

 <div id="title"></div>
 <div id="subTitle"></div>
 <div id="chartTitle"></div>
 
</div>`;


//CHART TEMPLATE

var chartHtml = 
`
<div id="chartContainer">

  <div id="leftTable" ></div>
  <div id="rightTable"></div>

</div>

`;


//LEGEND TEMPLATE

var legendHtml = 
`
<div id="legendWrapper">     
     <div class="legend"> 
           <p class="legend-name">
           <span class="legendText"> Fair share is based against current share from survey response </span></p> 
   </div>

   <div class="legend"> 
           <p class="legend-name">
         </span><span class="legendText Portfolio">Competitor Brands</span><span class="legend-dot Competitor"></p> 
   </div>
   
   <div class="legend"> 
           <p class="legend-name">
        ...