I am getting undefined type for:
$(".ui-slider-handle").attr("title", '"'+current+'"');
As you can see I tried to alert the current in line 29 and alerts the correct updated current value but it is not functioning on .attr("title", '"'+current+'"'). Why is this happening, and how can I solve this issue?
$(function () {
var current;
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function (event, ui) {
$("#amount").val(ui.value);
var offsets = $('.ui-slider-handle').offset();
var top = offsets.top;
$(".tooltip").css('top', top - 90 + "px");
$(".tooltip-inner").text(ui.value);
function setCurrent() {
current = ui.value;
}
setCurrent();
}
});
$("#amount").val($("#slider-vertical").slider("value"));
$(".ui-slider-handle").attr("rel", "tooltip");
$(".ui-slider-handle").attr("data-toggle", "tooltip");
$(".ui-slider-handle").attr("data-placement", "left");
// alert(current);
// $(".ui-slider-handle").attr("title", "50");
$(".ui-slider-handle").attr("title", '"'+current+'"');
$("[rel='tooltip']").tooltip();
});
What do you have the single-double-single quote for? Try to use:
$(".ui-slider-handle").attr("title", current);
Does it require double quotes to appear?
I'm gonna leave that cause it was boneheaded and funny. Anyway, current is inside the scope of the function and does not have a value outside of it. Try this instead:
Change this:
function setCurrent() {
current = ui.value;
}
setCurrent();
to
current = ui.value;
Or you could just return the value like this:
function setCurrent() {
return ui.value;
}
current = setCurrent();
Related
I'll try and keep this straightforward. I am using jQuery sliders and trying to initialize them all at once using an array:
sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange()));
function slider (context, id, min, max, defaultvalue, changeFunc) {
this.context = context;
this.id = id;
this.min = min;
this.max = max;
this.defaultvalue = defaultvalue;
this.changeFunc = changeFunc;
}
Where context is the ID of its intended parent div and changeFunc is the function I want it to call on change.
My Init function loops through this array and appends the markup according to the context, and then tries to init each jquery slider like so:
$(id).slider({
range: "min",
min: sliders[i].min,
max: sliders[i].max,
value: sliders[i].defaultvalue,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
change: function() {
sliders[i].changeFunc();
}
});
The min, max, and value inits work fine, presumably since they happen exactly once, during the init, but the change function fails pretty miserably, again presumably because it's simply trying to look up sliders[i] on each change (i being a long dead iterator by that point).
My question is - how can I programatically init a bunch of jquery sliders, each with a different onChange function? Without doing them manually, that is.
EDIT: Got some great help from Ramon de Paula Marques below, though in the end I had to do it a different way altogether because I was unable to pass a value to the function. What I ended up doing, for better or worse, was creating a wrapper function that simply looked up the proper change function once called based on the id of the slider that called it.
function parcelSliderFunction(caller, value)
{
for (var x = 0; x < sliders.length; x++)
{
if(sliders[x].id == caller) {
sliders[x].callback(value);
return;
}
}
console.log("id " + caller + " not found, you done screwed up.");
return;
}
I should probably use a dictionary for this.
First you have to remove parentheses of the function as parameter, in this line
sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange()));
It becomes
sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange));
Then you get the change function like this (without parentheses)
$(id).slider({
range: "min",
min: sliders[i].min,
max: sliders[i].max,
value: sliders[i].defaultvalue,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
change: sliders[i].changeFunc
});
OR
$(id).slider({
range: "min",
min: sliders[i].min,
max: sliders[i].max,
value: sliders[i].defaultvalue,
create: function() {
handle.text( $( this ).slider( "value" ) );
}
});
$( id ).on( "slidechange", function( event, ui ) {} );
You may call the changeFunc using window[value.changeFunc] as shown below
function newSlider(context, id, min, max, defaultvalue, changeFunc) {
this.context = context;
this.id = id;
this.min = min;
this.max = max;
this.defaultvalue = defaultvalue;
this.changeFunc = changeFunc;
}
function func1() {
$('#output').append("func1<br>");
}
function func2() {
$('#output').append("func2<br>");
}
function func3() {
$('#output').append("func3<br>");
}
var sliders = [];
sliders.push(new newSlider('paletteControl', 'pSlider1', 0, 255, 100, "func1"));
sliders.push(new newSlider('paletteControl', 'pSlider2', 0, 255, 200, "func2"));
sliders.push(new newSlider('paletteControl', 'pSlider3', 0, 255, 70, "func3"));
$.each(sliders, function(index, value) {
$("#" + value.id).slider({
range: "min",
min: value.min,
max: value.max,
value: value.defaultvalue,
change: window[value.changeFunc]
});
});
Working code: https://plnkr.co/edit/nwjOrnwoI7NU3MY8jXYl?p=preview
i create a js class and now i want to save a value of the slider (slider jquery UI) into textbox.
function Slider(name,orientation,range,disabled,min,max,value,valueLabel) {
this.name = name;
this.orientation = orientation;
this.range = range;
this.disabled = disabled;
this.min = min;
this.max = max;
this.value = value;
this.valueLabel = valueLabel;
this.setSlider = function() {
jQ(""+name).slider({
orientation: ''+orientation,
range: range,
min: min,
max: max,
value: value,
change: function(event, ui) {
jQ(valueLabel).attr('value', jQ(this).slider("value"));
}
});
}}
Can you help me? Why it's don't work?
valueLabel it's name of the label where i want to save value for example: #slider-value.
If i change a slider value i want get value of the slider. So i have to use change property.
You can write it like this, use slide instead of change
jQ(""+name).slider({
orientation: '' + orientation,
range: range,
min: min,
max: max,
value: value,
slide: function (event, ui) {
jQ(valueLabel).val(ui.value); // .val() works if it's a textbox
}
});
Your question is not quite clear but hope this will help you!
I have written something like below. onclick of div with id "PLUS" I
am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div>
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
});
</script>
Any help is appreciated.
If we check error in detail you will notice that it says you are trying to call the value method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({ and $(".PLUS").click(function() { lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,
You have used $(".slider").slider() at the time of initializing and
$("#slider-result").slider() at the time of getting the value some plugins work on selector you have used at the time of init, so try that.
The error is caused because $("#slider-result") is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider") which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});
i had a similar problem.
your block here
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value")
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
just keep it under
create: function( event, ui ) {}
ie.
create: function( event, ui ) {
$(".PLUS").click(function() {
var value = ui.value;
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
}
hope this works.
The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:
slider.on('slideStop', function(ev) {
let value= ev.value; //try ev if you want to see all
console.log(value);
})
Regards
i'm using this piece of code to refresh my div every X seconds:
<script>
$(document).ready(function() {
$("#container").load("stats.php");
var refreshId = setInterval(function() {
$("#container").load('stats.php');
}, 10*1000);
$.ajaxSetup({ cache: false });
});
</script>
This works great, only thing i want to add is a slider like this one: http://jqueryui.com/demos/slider/#steps
I want it to be able to set the interval on the refresh timer which is by default 10 seconds (10*1000)
Is it possible to let the slider modify the value ? if so, how can i do that ?
thanks!
Your script will be something like this:
$(document).ready(function() {
var intSeconds = 10;
var refreshId;
function sTimeout()
{
// Load content
$("#container").load("stats.php");
// Saving the timeout
refreshId = setTimeout(function() {
sTimout();
}, intSeconds *1000);
}
sTimeout();
$.ajaxSetup({ cache: false });
// The slider
$(".ui-slider").slider({
min : 1, // minimum value
max : 20, // Maximum value
value : intSeconds, // Copy current value
change: function(event, ui) {
clearTimeout(refreshId); // clear it
intSeconds = ui.value; // Update value
sTimeout(); // Restart it
}
});
});
Now just add a slider DIV to your source, and check it out.
Add the slider something like this:
var interval = 10000;
$( "#slider" ).slider({
value:10,
min: 1,
max: 20,
step: 1,
slide: function( event, ui ) {
interval = ui.value * 1000;
}
});
Then instead of using a setInterval, you could use setTimeout:
(function reload () {
$("#container").load('stats.php');
setTimeout(reload(), interval);
})();
I am using the jQuery UI slider and trying to show a div when the slider hits a certain value and hide it otherwise. The div is showing/hiding but at unexpected moments. Can anyone spot where I'm going wrong with my syntax? Here's the script:
$(function() {
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));
//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));
//config
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),orientation: "vertical",range: "min",step: 304,
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
// here's where I'm trying to show and hide a div based on the value of the slider
if ($("#slider").slider("value") == 304) {
$("#test").show();
} else {
$("#test").hide();
}
}
};
//create slider
$("#slider").slider(sliderOpts);
$("#amount").val('$' + $("#slider").slider("value"));
});
I did this for a project recently, but mine was showing a span tag as a warning note to users, the following is the code I used and its works fine:
$("#slider").slider({
animate: true,
min: 0,
max: 10000,
range: true,
slide: function(event, ui) {
$("#amount").val(ui.values[1]);
if (ui.values[1] > '2000') { //2000 is the amount where you want the event to trigger
$('.slider-warning').css('display', 'block');
} else {
$('.slider-warning').css('display', 'none');
}
}
});
so you should be able to just use this, but change the necesary attributes i.e the value and the selectors etc.
Edit - updated answer follows
got it, the ui.values was wrong, find below the corrected code
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
orientation: "vertical",
range: "min",
step: 304,
slide: function(event, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
if (ui.value > '200') { //200 is the amount where you want the event to trigger
$('#test').css('display', 'block');
} else {
$('#test').css('display', 'none');
}
}
};
this is taken straight from ur code, also notice:
if (ui.value > '200')
you'll need to change this to how ever you want the event to be triggered.
Hope this helps :)