Function not triggered when moving slider to fast. I'm calling function using "slide" with Jquery UI slider. Is there a way to force it to call the function on each step? Here's the code:
var last = currentZoom;
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0.2,
max: 1.3,
value: currentZoom,
step: 0.1,
slide: function( event, ui ) {
if (ui.value > last) {
zoomIn();
}else{
zoomOut();
}
console.log($( "#slider-vertical" ).slider('value'));
last = ui.value;
}
});
So just to recap, while sliding it to fast it doesnt recognize the slide and it leads to it on skipping steps resulting in inaccurate values.
Thanks
Related
I couldn't find a solution to this problem I'm having with the default jQuery slider and outputting the current value:
It seems like the value is the one from the "previous" step.
With a min value of 0, a max value of 10 and step of 0.25 the most left position displays a value of 0.25 and the most right 9.75 - which is simply wrong.
Does anyone know why this is or how to fix it?
HTML:
<div id="slider"></div>
JavaScript:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25
});
$('#slider').on('slide', function( event, ui ) {
var value = $('#slider').slider('option','value');
console.log(value);
});
Any help is much appreciated.
You just need to use ui.value to get the value of the slider:
$('#slider').on('slide', function( event, ui ) {
console.log(ui.value);
});
If you want to see just the value where it stops, and not every value that the slider passes by, use the stop event:
$('#slider').on('slidestop', function( event, ui ) {
console.log(ui.value);
});
See http://api.jqueryui.com/slider/#event-stop
Got it!
the "slide" event needs to be called in the slide function:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25,
slide: function( event, ui ) {
value = ui.value;
console.log(value);
}
});
I'm following along this example:
http://jqueryui.com/slider/#slider-vertical
I've copied the exact code (changing the div/input names to my own) from this example into another webpage, but chrome throws a Uncaught TypeError: undefined is not a function and the slider never appears.
The exact code that does not work:
$(function() {
$( "#timeframe_slider" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#month_week" ).val( ui.value );
}
});
$( "#month_week" ).val( $( "#timeframe_slider" ).slider( "value" ) );
});
When I change the code from what the example has to simply:
$( "#timeframe_slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 1,
value: 0,
slide: function( event, ui ) {
if (ui.value === 0) {
$( "#month_week" ).val("Month");
} else {
$( "#month_week" ).val("Week");
}}
});
it works perfectly.
I'm fairly new to javascript, but I understand that having:
$(function() {
code goes here
};
is to ensure that the page is ready. Can someone explain why when attempting to use the example the .slider() function suddenly does not work?
UPDATE
This problem does not appear when trying to recreate it in jsfiddle.. Here's exactly what I'm looking at however:
One thing to check is that you're not accidentally including jquery twice, causing the slider plugin to no longer be attached to $ when the $(function() { wrapped code fires.
Sorry this is more of a comment then an answer, but I don't have enough reputation to comment yet.
I am building a generator and I am using the arctext.js plugin. (http://tympanus.net/Development/Arctext/)
Here is my problem. I have an input field where people can type any text they want. After that there are sliders for font-size, letter spacing, and text arc.
the arctext.js works great on text that is there when the page loads, but not on text inputed.
Here is my code for the text that is input
/* top */
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
$(document).on('change', '#bead-top-font', function(e) {
$('#bTop').css({'font-family': ''+$(this).val()+'', 'font-weight': 'normal'});
});
$("#bead-top-font-size").slider({
range: "min",
value: 28,
min: 10,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'font-size': ui.value+'px'});
}
});
$("#bead-top-letter-spacing").slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'letter-spacing': ui.value+'px'});
}
});
$("#bead-top-arc").slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
$('#bTop').arctext('set', {
radius : ui.value,
dir : 1,
animation : {
speed : 300
}
});
}
});
I am at a loss. Any ideas on how I can get this working? The generator is at http://www.xbracelets.com/xgen/
I fixed it by using the solution Erik posted here: Why does the changed input field change the element but no longer allows Jquery arc effects
changed this code from this:`
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
To this:
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').arctext('destroy');
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
$('#bTop').arctext({radius: 1100});
});
On my page I have several sliders. They all need the same scale, but some of them go to 150, and some go to 200. I would like to set the max of them all to 200, but prevent some of them from moving passed 150. They are different $().slider() calls, so I'm simply interested in how to set the max of a slider to 200, but not allow any movement past 150...
I would think that this kind of behavior would be built-in, but apparently not?
FYI: I am using range: "min" for these sliders.
EDIT
http://jsfiddle.net/D9nAx/1/
use slide event:
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 200,
value: 60,
slide: function( event, ui ) {
if(ui.value> 150)
return false;
$( "#amount" ).val( ui.value );
}
});
fiddle : http://jsfiddle.net/dvz8E
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 200,
value: 60,
slide: slide
});
function slide(event, ui){
var result = true;
if (ui.value > 150){
$(this).slider( "value" , 150 );
result = false;
}
$( "#amount" ).val( $(this).slider( "value") );
return result;
}
http://jsfiddle.net/D9nAx/2/
I have a slider inside my script:
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
}
});
console.log(uniquePrice);
And I need to use the uniquePrice var further in the code, outside of the slider function. And it doesn't work - console.log(uniquePrice); says "undefined".
What am I doing wrong?
P.S. Of course I defined the global variable before the function, sorry for forgetting to include here.
The console.log() is going to be called before that variable is set by that function. The js will:
declare the var
then setup the slider
the immediately call console.log()
So until the slide happens that variable will be undefined
You have to define the variable outside of the function.
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
console.log(uniquePrice);
}
});
if you want the variable outside of the function you can do:
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
doLog();
}
});
function doLog(){
console.log(uniquePrice);
}
edit: added the console.log to the slider function
I think I read somewhere that if you forget to put the 'var' infront of the name of the variable, it gets declared as a global variable. Please confirm or deny this ;)
P.S. What happens if you remove line #1 altogether? What kind of error do you get?