We Keep Coding

How can I use jQuery Slider Ui and Draggable together?

Let's say I have created something similar to this: Link
Now I want to move content with drag.
So far so good and I was able to move them using jQuery UI Draggable.
I change the slider position when the content being dragged.
But when I move the content with drag and after that when I want to use slider button to move content, the position of content is wrong and not working.
Here is my code so far :
slider.slider({
orientation : 'horizontal',
max : w_width -(one_divs_w*numberOfItemVisibleInScreen),//total width minus one content div width
min : 0,
value : 0,
slide : function(event, ui) {
fp_thumbScroller.scrollLeft(ui.value);
},
});
//initialize the draggable
fp_content_wrapper.draggable({
axis: 'x',
cursor: "move",
drag: function (event, ui) {
maxDrggable = - (w_width -(one_divs_w*numberOfItemVisibleInScreen));
if (ui.position.left < maxDrggable) {
ui.position.left = maxDrggable;
}
if (ui.position.left > 0) ui.position.left = 0;
// ****
// set position for slider
// *****
slider.slider('value', -(ui.position.left));
},
});
should I change the position of draggable when moving content with slider ?

JS - jQuery draggable resizable multiple divs in container pushing each other

I have row with multiple columns inside it. Column width is devided by number of columns, to reach 100% of row width. User is able to update column width by dragging the edge of it. Ive been googling whole day for a script such as this one http://dobtco.github.io/jquery-resizable-columns/ but that would work on divs, not table columns, and no luck.
So i went with draggable solution, but as it does not have "containment" update during drag or after drag. I had to change draggable.js file, and it works - http://itsgoran.com/draggable/ , but i would prefer not to change draggable.js file.
I added:
o.containment = [parseInt(this.offsetParent.offset().left) + 40,0,parseInt(this.offsetParent.next().offset().left + this.offsetParent.next().width() - 40),0];
inside "_setContainment" method.
And inside _mouseStop() event, called this._setContainment();
Is there a way around this, so that i dont have to change core file ? Or some other script that would work?
Just calling _setContainment() method didnt work either.
Thanks

I managed to solve it by adding whole code to the function and running it again during "stop" callback. That way draggable is reinitiated again with updated containment. BUT i am not sure about memory usage this way ?
Here is the full code:
function init_draggable(){
$(".ui-draggable").each(function(){
var $this = $(this);
var $left = parseInt($(this).parent().offset().left) + 100,
$right = parseInt($(this).parent().next().offset().left) + 50;
console.log($left);
$(this).draggable({
axis: 'x',
refreshPositions: true,
start: function(event, ui) {
elWidth = $(this).parent().width();
nextWidth = $(this).parent().next().width();
},
drag: function(event, ui) {
$(this).parent().width( elWidth + (ui.position.left-ui.originalPosition.left) );
$(this).parent().next().width( nextWidth - (ui.position.left-ui.originalPosition.left) );
},
stop: function(event, ui) {
$(".ui-draggable").each(function(){
$(this).css({"left":'auto','right':'0'});
});
init_draggable();
},
containment: [parseInt($(this).parent().offset().left) + 40,0,parseInt($(this).parent().next().offset().left + $(this).parent().next().width() - 40),0]
});
});
}
init_draggable();

How to reset value of jquery jRange slider

Hello I am using jQuery jRange slider to show time of video on my page. when I am changing my video url at that new time is not appending to slider.
It shows min and max value of previous video.
Here is link of api : http://nitinhayaran.github.io/jRange/demo/
Please help me out.
$("#video_url").change(function() {
player.pause();
var currtime = player.currentTime();
var dirtime = player.duration();
addSlider(currtime, dirtime);
jQuery(".annodds").change(function() {
$(".annodds").val(this.value);
});
});
function addSlider(currtime, dirtime) {
jQuery('.annodds').jRange({
from: Math.round(currtime),
to: dirtime,
step: 1,
// scale: [10,20,30,40,50,60,70,80,90,100],
format: '%s',
width: 300,
scale: false,
showLabels: true,
theme: "theme-blue",
isRange: true,
onstatechange: function() {
$(".annodds").trigger('change');
}
});
}

As mentioned here. You can simply use the setValue to set the desired value for your range selector
$('.annodds').jRange('setValue', 0);

You can use the code below to change the slider values :
$('.annodds').jRange('setValue', 20);

Stop the jQueryUI Slider after a specific difference/margin

I have a Margin or we can say a Specific distance changed from HTML select option tag in future dynamically..
I have created a Range Slider with jQueryUI Slider.
What i am trying to do :
I want to stop sliding after a specific distance means margin.
Need help .
JSFIDDLE: http://jsfiddle.net/3j3Um/1/
HTML
<div id="slider-range"></div>
jQuery
$("#slider-range").slider({
range: true,
min: 0,
max: 95,
values: [20, 80],
slide: function (event, ui) {
var getMargin = ui.values[0] - ui.values[1];
$("#margin").val(getMargin);
if (getMargin == -30) {
alert('stop the sliding');
}
}
});

I think you are doing it alright , you just need to add return statement on the condition met. And also you need to change the comparison operator to (<) Since slide function is invoked every-time a slide action is performed.
I have modified a bit of code to make it work(not clean but you can change it later) :
var getMargin = ui.values[0] - ui.values[1];
var rangeValue = (-1) * parseInt(getMargin);
if(rangeValue < 30){
return false;
}
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$("#margin").val(getMargin);
And you can check this Working Fiddle

Display value of Jquery UI Sliders if more than one slider is present on a site

I am building a form, which contains different input type="range" slider and I managed to make them display a value.
But when I am including more than one slider the values don't actually change separately.
I want them to change each for himself.
In the end I would like to have at least 10 range sliders. Any suggestions? Here is the fiddle:
http://jsfiddle.net/MfegM/1153/
Thank you in advance for any tip you could provide.
Here is my code for the display of the values:
var initialValue = 50;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue;
var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' + curValue + '</div><div class="tooltip237-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip);
}
$("#slidercomeagain").slider({
value: initialValue,
min: 0,
max: 100,
step: 1,
create: sliderTooltip,
slide: sliderTooltip
});
$("#sliderrecommendation").slider({
value: initialValue,
min: 0,
max: 100,
step: 1,
create: sliderTooltip,
slide: sliderTooltip
});

Here is your solution - http://jsfiddle.net/MfegM/1155/
You need to connect the function for tooltip with slider
$(this).children('.ui-slider-handle').html(tooltip);
Since your function already takes (event, ui), all you need is add $(this) to relate the result to slider that triggers the event

The problem is your tooltip is changing for every slide, that because you're changing all divs with the class ".ui-slider-handle".
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue;
//get the id of the slider
var target = $(event.target).attr("id");
var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">'
+ curValue + '</div><div class="tooltip237-arrow"></div></div>';
// update the tooltip of the target slider
$("#"+target + ' .ui-slider-handle').html(tooltip);
}
The above code only update the tooltip of the target slider.
See this demo in jsfiddle http://jsfiddle.net/WzqjC/3/