I'm using a jquery slider and my slider handle is pretty big. In order for it to be the way I want it has to have margin-left: -2px when it's at 0 (all the way to the left) and have margin-left: -32px when it's at 100 (all the way to the right).
I want to ease into the correct margin rather than setting it upruptly. It can be done using the slide event but I'm having a little trouble with the calculation:
$(...).slider({
slide: function(event, ui){
var newMarginLeft = ...calculation... (ui.value is 0-100)
$(this).children(".ui-handle").css("marginLeft", newMarginLeft);
}
});
You can use this function, which will generate numbers from 2 to 32 evenly:
function generateNum(num)
{
return 2 + Math.floor(num * .30);
}
Than you will just add a negative onto it. Use like this:
$(...).slider({
slide: function(event, ui){
var newMarginLeft = "-" + generateNum(ui.value);
$(this).children(".ui-handle").css("marginLeft", newMarginLeft + "px");
}
})
jsFiddle here: http://jsfiddle.net/RWuR4/1/
You can also try using Math.round to round up: Here is a fiddle that uses Math.round, which makes 99 also return 32 (so it might be a bit more of what you want instead of Math.floor):
http://jsfiddle.net/RWuR4/2/
Related
I need to use a Jquery UI Slider with Inches.
I know how to get the slider to work with standard numbers eg: 0 to 100 but I'm not sure how to get inches to work.
I assume an extra calculation is needed - maybe.
Any advice on how to get this one working?
Here's something that should get you started:
function toFeet(n) {
return Math.floor(n / 12) + "'" + (n % 12) + '"';
}
$(function () {
$("#slider").slider({
min: 55,
max: 85,
values: [60, 80],
range: true,
slide: function(event, ui) {
// ui.values[0] and ui.values[1] are the slider handle values.
$("#result .min").html(toFeet(ui.values[0]));
$("#result .max").html(toFeet(ui.values[1]));
}
});
});
All you need to do is translate your slider minimum and maximum values into inches. When sliding the slider, you can display feet and inches by doing a simple conversion (implemented here in the toFeet method).
Example: http://jsfiddle.net/andrewwhitaker/4extL/57/
I've a question on the jQuery UI Slider widget. What I intend to do is, that on every upcounting value the slider appends me an image in a div:
$("#divOne").slider({
range: "min",
min: 1,
max: 10,
slide: function (event, ui) {
console.log(ui.value);
if(ui.value == 1) {
$('#divOne').append('<img class="linkimg" src="img/link/zwei.png">');
}
if(ui.value == 2) {
$('#divOne').append('<img class="linkimg" src="img/link/drei.png">');
}
if(ui.value == 3) {
$('#divOne').append('<img class="linkimg" src="img/link/eins.png">');
}
},
change: function (event, ui) {
//alert('Stopped at ' + ui.value);
}
});
works good so far.
The problem is, I want to remove the elements if I'm then downcounting but then if I cross one number it of course appends again, so I guess compare the value in that if-statement is wrong.
Does anyone of you has a hint? Cheers
EDIT: I have made an image to show what I want to do CLICK
Assume placing all the images in html
/* cache collection of images*/
var $images= $("#divOne img")
$("#divOne").slider({
slide:function(e,ui){
if( ui.value !== $images.filter(':visible').length){
$images.hide().slice( 0, ui.value).show();
}
}
});
What this does is track number visible vs slider value.... if they don't match it hides all and shows the ones that match slider.
If you have a large number... this should be upgraded to track direction of slider and only modify affected images to improve performance
First change the image names to match the values. E.g., 1.png, 2.png. Then you can:
var i, maxVal = ui.value, html='';
for (i = 1; i <= maxVal; i += 1) {
html += '<img src="img/' + i + '.png';
}
$('#divOne').html(html);
EDIT: But in general a better approach is to have all images in the container and then construct a stylesheet that would map classes that match values to appropriate state. E.g.:
<div class="score[X]"> <!-- where `[X]` will be the actual value of the ui.value -->
<img class="val1" src="1.png">
<img class="val2" src="2.png">
<img class="val3" src="3.png">
</div>
In css:
.score1 .val2 { display: none; }
.score1 .val3 { display: none; }
....
Or some other variation of the above.
EDIT:
Example fiddle with a slightly different approach for CSS: http://jsfiddle.net/gwQAW/
EDIT2:
And version with HTML5 slider: http://jsfiddle.net/gwQAW/2/ (sorry, no time for jQuery UI right now)
I work on a climate model and I display it on a map grid. I have to use a large grid : 39x60.
So I have to manage 2340 <div> with jQuery. I want to use a jQuery slider to zoom in / out with this :
$("#zoom_slider").slider({
orientation: "vertical",
value: 1,
min: 1,
max: 10,
step: 1,
slide: function( event, ui ) {
$('.case').css('width', function(index) {
return index * ui.value;
});
$('.case').css('height', function(index) {
return index * ui.value;
});
}
});
Each cell is built as this example :
<div id="c13_53" class="case line_13 col_53" style="width: 17px; height: 17px; top: 216px; left: 937px;"></div>
But firefox crashes when the function is executed.
Is there a way to fix this problem ?
One inefficiency in your code is that you're re-selecting every div on every slide event twice. $('.case') forces the scan of the entire DOM. You should cache the elements in a variable and reuse that variable instead of re-scanning constantly.
Another inefficiency may be that multiple slide events could be getting fired as you slide; putting a throttle on your handler could speed things up.
Was it your intention to set each one larger by what index it has? That will mean no matter which way the slider goes they will get bigger, much bigger. Better to store a reference value I think.
//Size in pixels.
var originalSize = 20,
cases = $('.case');
stop: function(_, ui) {
var size = ui.val * originalSize;
cases.css({width: size + 'px', height: size + 'px'});
}
Used stop as per Jacobs suggestion.
This will at least make it more efficient, as to whether it stops crashing, no idea.
I'd like to make a slider that snaps to the center while retaining smooth action elsewhere. Something like a jQuery version of a real-life speaker balance slider. Is it possible?
Or should I just create my own slider with a draggable object, constricted to one axis with containing it frame, snapping to another object (or grid) positioned in the center of the frame?
Edit: I simply need a slider that allows values e.g. from -10 to -1, 0, and 1 to 10 (between -1 and 1 snap to 0) with step: 0.1
You should be able to use the jQuery slider, but restrict its motion with the slide event:
jSlider.slider({
// other options...
slide: function (event, ui) {
if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
// force it to 0 between -1 and 1.
jSlider.slider('value', 0);
return false;
}
return true;
}
});
Hmmm...so this is what I'm envisioning in my head...A background that slides on a timer like a carousel (maybe these are big images), with a row of thumbnails on top that slides smooth. That what you want to build?
EDIT: Here's what you need to do:
I rarely find the need to use jQuery plugins. Here is what you need:
Mousedown (on the slider). api.jquery.com/mousedown/. There is a callback on mouse down an on release.
Track mouse position inside the slider container while you're dragging the slider docs.jquery.com/Tutorials:Mouse_Position
Use the animate function to move the slider while your mouse still hasn't been released api.jquery.com/animate/ Stop animate on release.
When your slider gets to a certain x position in it's container, force the "smooth" function - ie a different animate function.
Use the following so that your jquery slider automatically snaps to the nearest in the step. The trick is to implement your own step-interval-slider. The problem is, if your max and min are separated by a small distance (for e.g. 5-10) your slide will behave in steps because the default step=1, so you need to compute your step based on that. If your max-min values are separated by a huge distance (e.g. 1-1000 or more) you can leave the computed_step calculation and initialize it to 1.
max_limit = 30;
min_limit = 5;
stick_to_steps_of = 5;
var computed_step = max_term/100; //you can vary the denominator to make it smoother
$("#my_slider" ).slider({
animate : true,
value: max_limit,
min: min_limit,
max: max_limit,
step: computed_step,
stop: function( event, ui ) {
d = parseInt(parseInt(ui.value)/stick_to_steps_of);
rem = parseInt(ui.value)%stick_to_steps_of;
var fval = 0;
if (rem <= parseInt(stick_to_steps_of/2)) {
fval = d*stick_to_steps_of;
}else{
fval = (d+1)*stick_to_steps_of;
}
$("#my_slider").slider('option', 'value', fval);
$('#myslider_current_value').html(fval); //some placeholder to show the current value
}
});
I’m trying to set up a range with a slider. I would prefer if both cursors did not overlap in the same value. In other words, how do I get the sliders to freeze and stay put when the minimum value slider and the maximum value slider come next to each other. Any ideas? Thank you in advance.
Returning false from the slide function when they're about to collide seems to work: http://jsbin.com/eyoge3/3
Code from the jsbin:
slide: function(event, ui) {
var oldMin = $("#slider").slider("values", 0);
var oldMax = $("#slider").slider("values", 1);
var newMin = ui.values[0];
var newMax = ui.values[1];
if( oldMin != newMin && newMin == oldMax )
return false;
else if( oldMax != newMax && newMax == oldMin )
return false;
}
jQuery UI slider range extension
I needed something similar so I've written an extension over existing jQuery UI slider plugin/widget. These are additional options that this extension supports:
minimum and maximum range size - minimum range size is exactly what you're after
limiting lower and upper range boundary values - this sets the maximum value for the lower range boundary handle and minimum value for the upper range boundary handle
automatic range sliding - this allows to drag (any) handle over the limit of maximum range size which in turn drags the other handle along.
You can get the code on my blog (it gets updated so I'm not publishing it here directly).
I was searching for a solution to this when doing custom-styled slider yesterday.
Nothing worked from what I found, then I came up with an easy one myself:
1.Put the slider into container div with left and right padding
<div class="slider-container">
<div class="slider-main ..."></div>
</div>
2.Set the styles of
-container (left and right padding to half slider-handle width) slider
-handle (left-margin to minus half of its width)
Something like this (im writing from memory)
<style>
.slider-container {
padding-left: 8px;
padding-right: 8px;
}
.slider-handle {
width: 16px;
margin-left: -8px;
}
</style>
You should also remove styling from slider-main and move it from there to slider-container