jQuery UI resizable elements

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

jQuery UI resizable elements

Post by spedula »

I'm currently working on a small part of a user interface.

Basically, I have a 3 column setup and I want to be able to resize each with a draggable handle. Something along the lines of:

If left column is made wider then mid column will shrink.

I'm having issues setting up the min and max widths properly. I need to function so that if you drag right column to its max width and then try dragging left column to the left, it won't get any bigger. Currently, if I dragged right to full, mid shrinks correctly, then when I start draging left it pushes right column down to the next line.

Here is my test page that contains the script: http://iwantsnacks.com/dashboard/uitest.html
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: jQuery UI resizable elements

Post by josh »

What you need is a callback, when the left column gets resized this callback runs.

This callback takes the width of the left & center columns, and adds them. It then subtracts that from the total width. Let this value be $width

It then unbinds the resize plugin from the right column, and re-binds it with a new bounding area of $width **. Do the inverse for the right column's callback.

You can either unbind it with .destroy() or just change the value with .option() I haven't tried either first hand. http://jqueryui.com/demos/resizable/#method-option (click on the tab "methods")
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

Re: jQuery UI resizable elements

Post by spedula »

I haven't tried option or destroy yet.

The documentation says that destroy: Remove the resizable functionality completely. This will return the element back to its pre-init state.

So that doesn't seem like it will work.

I already have something similar to callback written up:

Code: Select all

		$(function() {
			$("#leftResizable").resizable({
				handles: 'e',
				containment: '#container',
				maxWidth: 505,
				minWidth: 195,
				resize: function(event, ui) {
					contWidth = $('#container').width()
					newWidth = $(this).width()
					rightWidth = $('#rightResizable').width()
					$("#midResizable").css("width", (contWidth-15)-(newWidth)-(rightWidth)+"px");
				}
			});
		});

		$(function() {
			$("#midResizable").resizable({
				handles: 'e',
				containment: '#container',
				maxWidth: 505,
				minWidth: 195,
				resize: function(event, ui) {
					contWidth = $('#container').width()
					newWidth = $(this).width()
					leftWidth = $('#leftResizable').width()
					$("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
				}
			});
		});
	});
It's the resize: function() part.

Programmatically, there are only two handles. The left col and mid col. So if you make mid col the minWidth right col expands and then try making left col maxWidth it pushes right col to a new line. Try it on my test page, drag the right handle all the way left and the left handle all the way right.

How can I set it so that maxWidth will decrease for left col when mid col is made smaller?

I know I have to do something like this:

maxWidth: function() { return something }

I just can't quite figure out the math/logic involved in that function. I'm probably over-thinking this. :/
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

Re: jQuery UI resizable elements

Post by spedula »

Never mind my previous syntactical assumption.

maxWidth: function() { return 550 }

Does not work, I'm going to mess around with the syntax, see if I can get something going here.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: jQuery UI resizable elements

Post by josh »

spedula wrote:I haven't tried option or destroy yet.
obviously ;-) I was recommend destroy() followed by resizable() as an alternate method to using .option()
The documentation says that destroy: Remove the resizable functionality completely. This will return the element back to its pre-init state. So that doesn't seem like it will work.
It does if you immediately re-initialize it with different values.

Try it on my test page, drag the right handle all the way left and the left handle all the way right.
I did. Try using .otpion()
User avatar
spedula
Forum Commoner
Posts: 81
Joined: Mon Mar 29, 2010 5:24 pm

Re: jQuery UI resizable elements

Post by spedula »

I already did, it works perfect. And thank you very much for the help :)
Post Reply