We Keep Coding

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();

Jquery UI Slider range styling (left, and right as well)

Jquery UI slider gives access to class ui-slider-range to do custom css on the selected range. Is there an easy way to add custom css (in my case background color) to what is left and right of the selected range?
Changing the slider background color changes both left and right, I however want a trio effect essentially of 3 separate background colors for the 3 divided regions created by the range min/max selectors;

You could use jQuery to add a background-image style property to your .ui-slider. You'll have to calculate the position of the sliders as a percentage.
For example, check out the CSS
.ui-slider {
background-image: -webkit-linear-gradient(left, red 50%, blue 50%);
}
Your jQuery would update the style for that specific slider whenever the user moves the slider. Check out this jsFiddle.
var myMin = 0, myMax = 500;
$("#slider-range").slider({
range: true,
min: myMin,
max: myMax,
values: [75, 300],
slide: function (event, ui) {
// Update amount text
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
// Update left/right color
var left = 100 * (ui.values[0] - myMin) / (myMax - myMin);
var right = 100 * (ui.values[1] - myMin) / (myMax - myMin);
$(this).css('background-image', '-webkit-linear-gradient(left, red ' + left + '%, blue ' + right + '%)');
}
});
Note, you'll have to find a way to initially color the left/right side. Also, there are a few browser-specific background-image properties, see this answer.

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/

How to get current slider values from JQuery Slider?

I am using jquery slider , i want to all sliders current values when one slider is changing
Slider code:
var slider = jQuery("<div class='slider'></div>").insertAfter(select)
.slider({
min : 0,
max : 4,
range : "min",
value : select[0].selectedIndex + 1,
slide : function(event, ui) {
},
change: function(event, ui) {
}
});
I tried this:
change: function(event, ui) {
jQuery(".minbeds").each(function(){
alert(jQuery(this).val());
});
}
but whatever the slider values, it is only alerting the value 1.
UPDATE:
jQuery(".slider").slider("value");
will give the current slider value when change , but how can i get all slider values .

Use the following line to access the current values of the slider:
var val = $('#slider').slider("option", "value");

jquery UI slider to move multiple divs

Hey i want to use jquery UI to have a slider on my page that moves multiple divs different distances.
So basically you pull the slider and div1 moves 10px left and div2 moves 20px left.
I have taken a look at the jquery UI slider here http://jqueryui.com/demos/slider/#side-scroll but i cant figure out how to get that slider to move multiple divs.
Help would be greatly appreciates. I am pretty new to jquery but i am enjoying the learning experience =]

You can use the .slide() event, no?
http://jqueryui.com/demos/slider/#event-slide
That way you can adjust the divs like you want. I'll write a little example
Made a small example:
http://labs.joggink.be/slider-multiple-divs/
The slider resizes 3 divs like this (it's very basic and ugly written):
$("#slider").slider(
{
value:100,
min: 10,
max: 250,
step: 10,
slide: function(event, ui) {
$('#div-1').css({
width : ui.value + 'px',
height: ui.value + 'px'
});
$('#div-2').css({
width : ui.value + 10 + 'px',
height: ui.value + 10 + 'px'
});
$('#div-3').css({
width : ui.value + 20 + 'px',
height: ui.value + 20 + 'px'
});
}
});
});