I am using Kendo Slider. My requirement is, for every slider value changes I need to change the kendo slider background color.
If you want to change the background of the slider, you can do something like:
$("#slider").kendoSlider({
orientation: "vertical",
min: 0,
max: 100,
smallStep: 1,
largeStep: 20,
showButtons: true,
change: function (e) {
var top = $("#slider").closest(".k-slider-wrap");
if (e.value < 33) {
$(".k-slider-track", top).css("background-color", "#ff0000");
$(".k-slider-selection", top).css("background-color", "#ff0000");
} else if (e.value < 66) {
$(".k-slider-track", top).css("background-color", "#00ff00");
$(".k-slider-selection", top).css("background-color", "#00ff00");
} else {
$(".k-slider-track", top).css("background-color", "#0000ff");
$(".k-slider-selection", top).css("background-color", "#0000ff");
}
}
});
What I did is defining a slider with values between 0 and 100 and define the change handler to read current value (as e.value) and depending on the value define the background of the slide.
The important thing is:
k-slider-selection is the CSS class for the part of the slide that is selected.
k-slider-track is the CSS class of the complete slide.
Ex: if the value is 33 the slider part for 0-33 is k-slider-selection while the full range (0-100) is k-slider-track
Related
I have a line chart, with these bits of code:
tooltip: {
formatter: function() {
var tmp = '<b>'+this.series.name+'</b>';
return tmp;
}
}
and
states: {
hover: {
lineWidth: 8
}
}
}
And by and large, it works perfectly.
But if two lines share a point (they both pass through x = 0, y = 4, for example), and the mousecursor is closer to that point than the next ones along the lines, then the tooltip always returns the first series name, rather than that of whichever line is currently highlighted by hovering over it.
Is there a simple fix?
Replace the line type series with the scatter and declare lineWidth:2 param. Then set stickyTracking as false.
I want the to prevent slider animation during page refresh, but allow it during the operation of my program.
I'm almost there:
// Initialise var animate as false
var animate = false;
// Jquery UI
function slider(min, max, step) {
$(target_slider).slider({
min: min,
max: max,
range: "min",
step: step,
// var animate set to false on load, so no animation from this guy:
animate: animate,
// var animate now set to true to allow animation every time slider is changed from now on:
var animate = true;
slide: function (event, ui) {
console.log("slider is moving!");
};
},
});
}
// Initialise slider
slider(0, 200, 0.01);
However, the code on line 13 that turns var animate to true is regarded and syntactically incorrect by jquery UI, so how can I change the variable "animate"?
I'm also still a little shaky with javascript's scope. If jquery UI did accept my variable change, would my logic work? I'm assuming it would because var animate is first declared in the global scope, but please correct me if I'm wrong!
You would want to change the value of animate after the initialization of the slider:
...
slider(0, 200, 0.01);
animate = true;
...
Also, after a variable is defined, you do not need to use the var keyword to access it.
Update After looking at the API documentation you can use the setter method to set the animate property after initialization. Try this:
function slider(min, max, step) {
$(target_slider).slider({
min: min,
max: max,
range: "min",
step: step,
animate: false,
slide: function (event, ui) {
console.log("slider is moving!");
}
});
}
// Initialise slider
slider(0, 200, 0.01);
$(target_slider).slider('option', 'animate', 'fast');
I want to draw a background behind a plotLine label in a highstock chart.
Using an example from the Highstock API, I came up with this code (crt is the chart object):
var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
var box = textbox.getBBox();
crt.renderer.rect(box.x - 3, box.y + 1, box.width + 6, box.height, 3).attr({
fill: '#0c0',
id: 'labelBack',
opacity: .7,
'stroke-width': 0,
zIndex: 4
}).add();
This draws a semi-transparent box behind the label as intended (the label has zIndex 5). However when the chart is resized, the box maintains the same position relative to the top-left of the chart, causing misalignment with the label text (the position of the label changes because of the chart resizing).
I tried using the chart redraw event for this, but even though I can see that the event is fired, and the function is executed again, no other boxes are drawn (I was trying to get more boxes to appear on each redraw, planning to solve removing obsolete boxes in the next iteration).
How can I solve this?
It feels more like a hack than a genuine solution, but I have come up with a workaround that solves my issue for now, I have the function below:
var labelBackground = null;
function labelDrawBack(crt) {
if ( isIntraDay ) {
var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
if ( !!labelBackground ) {
labelBackground.attr({ y: textbox.y - 10 });
} else {
var box = textbox.getBBox();
labelBackground = crt.renderer.rect( box.x - 3, box.y + 1, box.width + 6, box.height, 3 ).attr( {
fill: '#fff',
id: 'labelBack',
opacity: .65,
'stroke-width': 0,
zIndex: 4
}).add();
}
}
}
I make sure this function is executed immediately after the chart is initialized and additionally I attach the function to the chart object that is returned from the StockChart call:
var chartObj = new Highcharts.StockChart( chartConfig, function ( crt ) {
labelDrawBack( crt );
} );
chartObj.labelDraw = labelDrawBack;
And in the chart options I have added this to the chart.redraw event:
events: {
redraw: function() {
this.labelDraw(this);
}
}
This works as intended, moving the transparent background with the label (which is moved vertically when the chart is resized).
The reason I have redirected the call in the chart redraw event is that the labelDrawBack function is defined in another function than the one where my chart options are defined, thus the labelDrawBack function is out of scope there.
Edit: I still have not resolved this issue. If anyone has advice I would appreciate it.
I have a jquery slider with two bars that the user can change to select a price range. Below the slider I display min: $xxx and max: $xxx to show the current price range. Here's the code:
$("#slider-price .slider").slider({
step: 10,
animate: true,
range: true,
min: 0,
max: 500,
values: [range_price[0],range_price[1]],
slide: function() {
range_price = $(this).slider("option", "values");
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}
});
The slide option looks at what the value of the slider is, and updates the min and max numbers. However, they only change on mouseup, after the user is done sliding the bar. I want the numbers to update as the user is sliding the bars. How do I do this?
I use this in a media player I wrote
slide: function(event, ui) {
$("#amount").text(ui.value);
}
edit: Just re-read your question, you should be able to use 'ui.values' instead of value to return the array , parse it and go from there.
edit2: Try this function instead of the one you have.
slide: function(event,ui) {
range_price = ui.values;
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}
From the JQuery reference # http://api.jquery.com/animate/ :
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle' }, 5000, function() {
// Animation complete.
});
It seems we can only modify real CSS properties, however I wish I could animate JQuery object properties as well. As example I would like to animate the 'value' property of a progressbar:
http://jqueryui.com/demos/progressbar/#option-value
//setter
$('.selector').progressbar('option', 'value', 37);
I couldn't find a way to animate this 'value' property of the progressbar, is there any way to do so?
Thanks for help..
If it's to animate the value couldn't you use javascript setInterval() and clearInterval() method?
You could do something like:
var progressBar = $('#progress');
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
progressBar.progressbar({value:index});
if (index == maxCount) {
clearInterval(theInterval);
}
index++;
}, 100 );
In the above example the setInterval function fires every 100 milliseconds and just increases the value by 1 each time, when it hits 100 the clearInterval function stops it animating.
You might find this link useful: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon.
Not exactely what you wanted but you could get around and implement your own step function to update the progress bar.
var step_def = $.fx.step._default;
$.fx.step._default = function (fx) {
if ( fx.prop != 'progress' ) return step_def(fx);
fx.elem[fx.prop] = fx.now;
$(fx.elem).progressbar('option', 'value', fx.now);
};
// Now call animate
$('.selector').progressbar('option', 'value', 0)[0].progress = 0;
$('.selector').animate({ progress: 100 }, { duration: 1000 });