I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.
My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div.
I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col.
Now the issue is that mWid is not gettings updated for here "maxWidth: mWid"
Here is what the function for the right handle looks like:
$(function() {
$("#midResizable").resizable({
handles: 'e',
containment: '#container',
maxWidth: mWid, // gets set once, but doesn't update! WHY?
minWidth: 195,
resize: function(event, ui) {
contWidth = $('#container').width()
newWidth = $(this).width()
leftWidth = $('#leftResizable').width()
rightWidth = $('#rightResizable').width()
$("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
checkWid()
}
});
});
function checkWid() {
rightWidth = $('#rightResizable').width()
leftWidth = $('#leftResizable').width()
contWidth = $('#container').width()
mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}
Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth
Looks like maxWidth: mWid, only gets called on init.
The maxWidth needs to be explicitly set after that, like this:
$( "#midResizable" ).resizable( "option", "maxWidth", mWid );
you can use the below code in start method of resizable. It will update the maxWidth and maxHeight dynamically whenever you try to resize the div element.
$('.droppedBtn').resizable({
.... //you resizable properties
start: function(event,ui)
{
$( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
$( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);
},
stop: function(event,ui){
}
});
Related
The problem is I need actual offset from my element which was resized. Which means whenever I resize my element (it's simple colored bar and can be resized) and I need to read It's left offset right after resizing is finished.
When I use stop event from jquery-ui The previous position is shown.
$('.shop-' + shopID).resizable({
stop: function (event, ui) {
var leftMargin = $('.hour-6').offset().left+20;
var currentPosition = $('.shop-1').offset().left; //when I print this previous offset is shown.
},
grid: grid,
animate: true,
handles: 'e, w'
});
});
Here is script fragment
Example started position is 50px, when I moved it to left by 20 px (so it's 30 px now) 50 px is printed. When I move it again 20px left (10px now) 30 px is printed. So It's not actual offset/possition.
I have tried using possition as well, It's work exactly the same.
Even 'resize' option shows previous offset/possition.
I need to change two things :
1) I need to call ui possition
2) set Timeout
setTimeout(function () {
leftOffset = ui.position.left;
rightOffset = leftOffset + ui.size.width;
if (leftOffset < leftMargin) {
console.log('przekroczono');
//$('.shop-' + shopID).width(60);
console.log($('.shop-' + shopID).css('left', leftMargin +'px'));
}
}, 500);
I want to have my elements resize their margins equally so that they fill the page. I tried turning the page width into a value using jquery but that didn't work.
var margen = $(window).width()
$(document).ready(function () {
$('#FixedMenu *').animate({
'margin-left': 'margen/6'
});
});
http://jsfiddle.net/clarinetking/2PGZS/40/
I make little update to your jsFiddle, you can see it here:
jsFiddle
What i change is this:
1.
You found width of screen:
var screenWidth = $(window).width();
2.
You found total width of child elements of your fixed menu
var widthOfChilds = 0;
$('#FixedMenu > *').each(function() {
widthOfChilds += $(this).outerWidth( true );
});
3.
You take off total width of child elements from screen size and you will get "free"width around child elements.
There are six of them, but you need space after last one from right, so you divide "free"width by number of childs + 1
var newmargin = (screenWidth - widthOfChilds)/7;
$('#FixedMenu *').animate({
'margin-left': newmargin
});
I hope it helped! :)
I have added a container div around the slickgrid (the container has a heading etc just to make it all look neat and tidy).
I have made the div resizable using jquery and instructed it to resize the grid and viewport simultaneously.
It works wonderfully (everything resizes in unison) but the number of visible rows does not update until I scroll.
Is there a way to force the viewport to refresh?? grid.render does not work.
$(".container").resizable({
alsoResize: ".grid, .slick-viewport",
resize: function (event, ui) { }
});
$(".container").on("resize", function (event, ui) {
dataView.refresh();
grid.render();
});
In case anybody has the same problem, the answer is grid.resizeCanvas();
The code now looks like this:
$('.container').each(function () { // I have several grids + containers
var gridID = $(this).attr('id'); // get the container ID
$(this).resizable({
// for some reason, there was a problem with $(this) - I had to use
// an explicit reference by passing the container ID
alsoResize: '#' + gridID + ' .grid, #' + gridID + ' .slick-viewport',
resize: function (event, ui) { }
});
$('.container').on('resize', function (event, ui) {
grid.resizeCanvas()
});
}
You might also want to look at an answer I gave for an auto grid resize, it's auto-resizing with the viewport and so changing the size of your browser will be reflected on the grid size...
See it here: Slickgrid: Final column auto size to use all remaining space
I have added multiple dynamic divs inside a container div. Each div contains text. Its works fine. But when I added resizable functionality to a div using jquery library. I am able to resize div's but its text size is static. What I want when i increase the div size its text size should also increase and vice versa.
Below is the code with which I have adding resizable functionality and appending to a parent.
var div = document.createElement('div');
$(div).attr("id", "dyndiv" + count);
objid = "dyndiv" + count ;
count++;
var $ctrl = $(div).text($('#txttext').val()).addClass("draggable ui-widget-content").draggable({ containment: '#containment-wrapper', cursor: 'move', snap: '#containment-wrapper' }).resizable({ aspectRatio:true, containment: '#containment-wrapper' });
$("#containment-wrapper").append($ctrl);
Heres an example of what i mean, you may need to mess with the calculation though to include height some how as of right now you can have a small height, but a large text that doesnt exactly fit in the box.
http://jsfiddle.net/HpSwu/1/
$( ".selector" ).resizable({
resize: function(event, ui) {
newSize = $(this).width()*0.1;
$(this).css('font-size', newSize );
}
});
EDIT
Something like:
var $ctrl = $(div).text($('#txttext').val())
.addClass("draggable ui-widget-content")
.draggable({
containment: '#containment-wrapper',
cursor: 'move',
snap: '#containment-wrapper' })
.resizable({
aspectRatio:true,
containment: '#containment-wrapper',
resize: function(event, ui) {
newSize = $(this).width()*0.1;
$(this).css('font-size', newSize );
}
});
Using HTML & JavaScript
I created a slide bar which successfully responds both ways with a select option.
However i have choosen to 'hide' the select option box. I was wondering if anyone could give me any tips on creating labels for the slider bar as the user now has no idea what they are selecting. Examples i have found show perfect indicators, milestone numbers and floating numbers when hovering over yet everything is slide bar related and rather than labels. Help!
My JavaScript Slider Bar Code
$(function() {
var select = $( "#logbytes");
var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 6,
step: 1,
value: select[0].selectedIndex + 1,
slide: function(event, ui) {
select[0].selectedIndex = ui.value - 1;
}
});
$('#logbytes').after(slider).hide();
});
The basic idea is to wrap your slider inside a wrapper div. Then to add another div inside the wrapper. Its text will be the current value of the slider.
And then the only thing left to do is to move that div around and to update it's text. It's something like:
slide: function(event, ui) {
$( ".amount" ).text( ui.value );
$( ".amount" ).css("margin-left",(ui.value-min)/(max-min)*100+"%");
}
Where min and max are the min and max of your slider.
See http://jsfiddle.net/WYdLF/ for an example.