Hello there I have a knob java script it works perfectly before, but now it seems that its showing only the input form, I guess the error is in the jquery.knob.min.js.
It looks like this
But now it shows this
This is the HTML that shows the modal
<!-- jQuery Knob -->
<script src="{SITE_CMS_ROOT}vendors/jquery-knob/dist/jquery.knob.min.js"></script>
<script>
$(document).ready(function() {
ModalCustom = function(options) {
var html = "<div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-hidden='true'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>x</span>
</button>
<h4 class='modal-title' id='myModalLabel'><b> Edit {SITE_DESCRIPTION} </b>: " + options.Name + "</h4>
</div>
<div class='modal-body'> <h4></h4>
<form action='{SITE_CMS_ROOT}?factions&submit' method='post' class='form-horizontal form-label-left'>
<div class='form-group'>
<div class='col-md-2'>
<p>Display value</p>
<input class='knob' data-width='100' data-height='120' data-min='-100' data-displayPrevious=true data-fgColor='#26B99A' value='44'>
</div>
<div class='col-md-2'>
<p>× 'cursor' mode</p>
<input class='knob' data-width='100' data-height='120' data-cursor=true data-fgColor='#34495E' value='29'>
</div>
<div class='col-md-2'>
<p>Step 0.1</p>
<input class='knob' data-width='100' data-height='120' data-min='-10000' data-displayPrevious=true data-fgColor='#26B99A' data-max='10000' data-step='.1' value='0'>
</div>
<div class='col-md-2'>
<p>Angle arc</p>
<input class='knob' data-width='100' data-height='120' data-angleOffset=-125 data-angleArc=250 data-fgColor='#34495E' data-rotation='anticlockwise' value='35'>
</div>
<div class='col-md-2'>
<p>Alternate design</p>
<input class='knob' data-width='110' data-height='120' data-displayPrevious=true data-fgColor='#26B99A' data-skin='tron' data-thickness='.2' value='75'>
</div>
<div class='col-md-2'>
<p>Angle offset</p>
<input class='knob' data-width='100' data-height='120' data-angleOffset=90 data-linecap=round data-fgColor='#26B99A' value='35'>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='submit' class='btn btn-primary'>Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>";
appendHtml(document.body, html);
};
function appendHtml(el, str) {
var div = document.createElement('div');
div.innerHTML = str;
$el = el;
$(el).find(".modal");
if ($el.lenght){
var cnt = $(div.children[0]);
$(".modal").replaceWith(cnt);
} else {
el.appendChild(div.children[0]);
console.log( $("#something").find(".modal").length );
$el.lenght = 1;
}
}
});
</script>
<!-- jQuery Knob -->
<script>
$(function($) {
$(".knob").knob({
change: function(value) {
//console.log("change : " + value);
},
release: function(value) {
//console.log(this.$.attr('value'));
console.log("release : " + value);
},
cancel: function() {
console.log("cancel : ", this);
},
/*format : function (value) {
return value + '%';
},*/
draw: function() {
// "tron" case
if (this.$.data('skin') == 'tron') {
this.cursorExt = 0.3;
var a = this.arc(this.cv) // Arc
,
pa // Previous arc
, r = 1;
this.g.lineWidth = this.lineWidth;
if (this.o.displayPrevious) {
pa = this.arc(this.v);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
// Example of infinite knob, iPod click wheel
var v, up = 0,
down = 0,
i = 0,
$idir = $("div.idir"),
$ival = $("div.ival"),
incr = function() {
i++;
$idir.show().html("+").fadeOut();
$ival.html(i);
},
decr = function() {
i--;
$idir.show().html("-").fadeOut();
$ival.html(i);
};
$("input.infinite").knob({
min: 0,
max: 20,
stopper: false,
change: function() {
if (v > this.cv) {
if (up) {
decr();
up = 0;
} else {
up = 1;
down = 0;
}
} else {
if (v < this.cv) {
if (down) {
incr();
down = 0;
} else {
down = 1;
up = 0;
}
}
}
v = this.cv;
}
});
});
</script>
<!-- /jQuery Knob -->
and Here is the script of the jQuery Knob
