Create Bootstrap Popover content based on a javascript value -


i'm using justgage , bootstrap , want display variable content in popover based on value in javascript justgage.

for example, if value in gauge between 0 - 50, "try harder", if it's between 50 - 200, "well done", surfaced in popover content. - (you can see clicking on gauge 1).

    $(window).load(function() {          var gagevalue1 = getrandomint(0, 200)        var gagevalue2 = getrandomint(0, 200)        var gagevalue3 = getrandomint(0, 200)        var colorgradientryg = ["#991d1d", "#9d1f1f", "#a22222", "#a62424", "#ab2727", "#b02929", "#b42c2c", "#b92e2e", "#be3131", "#c23333", "#c73636", "#cc3939", "#ce4236", "#d14b33", "#d35530", "#d65e2d", "#d8672a", "#db7127", "#dd7a24", "#e08321", "#e28d1e", "#e5961b", "#e8a019", "#e9a619", "#ebad1a", "#ecb41a", "#eebb1b", "#f0c21c", "#f1c81c", "#f3cf1d", "#f5d61e", "#f6dd1e", "#f8e41f", "#faeb20", "#f4eb25", "#eeeb2b", "#e9ec31", "#e3ec36", "#deec3c", "#d8ed42", "#d3ed48", "#cded4d", "#c8ee53", "#c2ee59", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bdef5f", "#bbed5c", "#b9ec59", "#b8ea56", "#b6e954", "#b4e851", "#b3e64e", "#b1e54b", "#afe449", "#aee246", "#ace143", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#abe041", "#aae03e", "#a9e03c", "#a8e03a", "#a8e037", "#a7e035", "#a6e033", "#a5e031", "#a5e02e", "#a4e02c", "#a3e02a", "#a3e028", "#a4e224", "#a5e520", "#a6e81d", "#a7eb19", "#a8ee15", "#a9f012", "#aaf30e", "#abf60a", "#acf907", "#adfc03", "#aeff00"]        var g1 = new justgage({          id: "g1",          title: "gage 1",          value: 92,          min: 0,          max: 200,          showminmax: false,          levelcolors: colorgradientryg,          levelcolorsgradient: false,        });        var g2 = new justgage({          id: "g2",          title: "gage 2",          value: 98,          min: 0,          max: 200,          showminmax: false,          levelcolors: colorgradientryg,          levelcolorsgradient: false,        });        var g3 = new justgage({          id: "g3",          title: "gage 3",          value: 77,          min: 0,          max: 200,          showminmax: false,          levelcolors: colorgradientryg,          levelcolorsgradient: false,        });          $(document).ready(function() {          $('#g1_refresh').bind('click', function() {            g1.refresh(getrandomint(0, 200));            g2.refresh(getrandomint(0, 200));            g3.refresh(getrandomint(0, 200));            return false;          });        });      });          $(document).ready(function() {        $('[data-toggle="popover"]').popover();      });
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>        <script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>    <script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>    <h3>how doing?</h3>    <div class="row-fluid">    <div class="span4">      <a class="tipspopover" title="tips" data-toggle="popover" data-placement="bottom" text-align="center" data-content="this content including helpful tip on how improve, based on value given.">        <div id="g1">        </div>      </a>      </div>    <div class="span4">      <div id="g2"></div>    </div>    <div class="span4">      <div id="g3"></div>    </div>  </div>

here's have far... https://jsfiddle.net/e4v62nh6/1/

it seems value of initialised justgauge can found @ xpath
//*[@id="someid"]/svg/text[2]/tspan - can create popovers in single loop :

$("svg").each(function() {     var value = +this.queryselector('text:nth-of-type(2)')                      .queryselector('tspan')                      .textcontent;                   function getcontent() {         if (value<20) return "dont quit dayjob"         if (value<40) return "try harder"         if (value<60) return "room improvement"         if (value<80) return "you passed test"         return "well done"     }          $(this).popover({       trigger : 'hover',         placement : 'top',        content : getcontent()     });     });

forked fiddle -> https://jsfiddle.net/0zdtkz2a/


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more