jQuery Forum

Hi!

I have multiple divs in a containment. They are draggable and resizable:

1. <div id="containment">
2.   <div class="subject">
3.     <h2 class="ui-widget-header">Subject</h2>
4.   </div>
5.   <div class="subject">
6.     <h2 class="ui-widget-header">Subject</h2>
7.   </div>
8. </div>

I've a button which is adding "subject" divs:

1. $(".addSubject").click(function() {
2.         $('#containment').append('<div class="subject ui-widget-content"></div>');
3. 
   
4.         $(".subject").each(function() {
5.               $(this).resizable({
6.                   grid: [50, 50],
7.                   handles: 's',
8.                   maxWidth: 200,
9.                   minHeight: 100,
10.                   minWidth: 200
11.               });
12.        
13.               $(this).draggable({
14.                   grid: [220, 50],
15.                   stack: ".subject",
16.                   distance: 0, // bring in front with click on it
17.                   containment: 'parent',
18.                   cursor: "move"
19.               });
20.         });
21.     });

Now I've the problem that I can't move the added subject div to the top of the containment. For that div there seems to be a top padding:


But this changes if I resize the first div. Then the other divs jump a bit up. Even outside of the containment:


Clicking on the jumped div brings it back in position:


Maybe that's due to the combination of draggable and resizable.

So there're two questions for me which may be connected:
Is it possible to avoid that "padding" for the divs? Or can I trigger the resize event of resizable to get the remove this padding behaviour?

Regards
Fabian

Hi!

I want to perform an action (jump to next input field) when the datepicker is closed. So I'm using the datepicker onclose event.
But if a user is using "tab" or "shift+tab" to exit the datepicker I'm getting into trouble. So I need an information about the key (if there's one) which is used to trigger the onclose event.

Any hints?

Thx
-- Fabian