Search jQuery

jQuery Forum

Screen name:
kasakka

kasakka's Profile

5 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Resizable: options stop event vs resizestop event?
[1Reply]
- 02-May-2013 03:17 AM
- Forum: Using jQuery UI
So I'm trying to do the following:
1. Create new div
2. Make div draggable and resizable
3. Add new div to container
4. Trigger resizable "stop" event to set some values that would be normally set when resizing
I'm using something like this code:
1. var resizableOptions = {
2. handles: "n,e,s,w,se,sw,ne,nw",
3. containment: 'parent',
4. stop: function(ev, ui) {
5. console.log('resizing stopped');
6. ui.element.data('mywidth', ui.size.width);
7. }
8. };
9. var $newDiv = $('<div id="mydiv"></div>');
10. $newDiv
11. .draggable(draggableOptions)
12. .resizable(resizableOptions)
13. .appendTo('#container')
14. .trigger('resizestop');
(Just assume that draggableOptions is also defined)

What happens here is that resizestop is not fired at all. If I try $('#mydiv').trigger('resizestop') in Firebug it doesn't fire either. However, if I bind the stop event like this:
1. $newDiv
2. .draggable(draggableOptions)
3. .resizable(resizableOptions) //stop function removed from resizableOptions
4. .on('resizestop', function(ev, ui) { //do same stuff as previous code })
5. .appendTo('#container')
6. .trigger('resizestop');
Then "resizestop" event can be fired programmatically, but it complains that ui is not defined, which would suggest that there is a difference to the "stop" event and "resizestop" events.

Can anyone help me figure out what is happening here and why there is a difference between defining the event in options vs as a separate event handler?

UI 1.8 RC3 - bug in position() with Webkit?
[9Replies]
- 15-Mar-2010 11:07 AM
- Forum: Developing jQuery UI
I wanted to make a fancier scale plugin, that basically scales an element from the center of a clicked element to the center of the browser window. My code is this:
1.     (function($){
         $.fn.fancyScale = function(options) {
             settings = $.extend({}, options);
             var w = Math.round($(window).width()/2)-$(settings.target).width()/2;
             var h = Math.round($(window).height()/2)-$(settings.target).height()/2;
  
             return this.each(function() {
                 $(this).click(function() {
                     if($(settings.target).is(":hidden")) {
                         $(settings.target).position({
                             my: "left top",
                             at: "center",
                             of: "#"+this.id
                         })
                         .animate({
                             width: 'show',
                             height: 'show',
                             left: w,
                             top: h,
                             duration: 'slow'
                         });
                     }
                     else {
                         var l = parseInt($(this).css("left"))+$(this).width()/2;
                         var t = parseInt($(this).css("top"))+$(this).height()/2;
                         $(settings.target)
                         .animate({
                             width: 'hide',
                             height: 'hide',
                             left: l+"px",
                             top: t+"px",
                             duration: 'slow'
                         });
                     }
                 });
             });
         }
     })(jQuery);
The commented .position part is what seems to be malfunctioning. If I use
1. .css({
                             left: parseInt($(this).css("left"))+$(this).width()/2 + "px",
                             top: parseInt($(this).css("top"))+$(this).height()/2 + "px"
                         })
instead, it works perfectly fine in both Firefox and Safari. If I use the position method it works fine in Firefox, but in Safari or any other Webkit browser the scaling starts from the wrong position, based on where the clicked element is on screen.

It seems that something causes the position() calculation to add extra pixels in Webkit but not in Firefox.

How to prevent click event when dragging?
[0Replies]
- 18-Jan-2010 03:35 AM
- Forum: Using jQuery UI
I have a bunch of Draggable elements, but they also have a click event. Is there any way to prevent the click event from firing when I drag an item to a Droppable?
Using jQuery 1.3.2 and UI 1.7.2.

Sortables no longer working with droppables in jQ UI 1.7?
[0Replies]
- 26-Mar-2009 01:57 AM
- Forum: Using jQuery UI
I've got a trashcan droppable where dropping a sortable on it would
append it to the trashcan's items but for some reason this no longer
works with 1.3.2 and jQuery UI 1.7. The object seems to be passed
correctly to my trashcan.trash(trashableobject) function but it cannot
be appended to the trashcan items, instead the sortable reverts back
to its original location.
If I make the sortable into a draggable instead it works but since I
need it to be sortable. Any reason why this no longer works? It was
just fine in 1.2.6 + UI 1.5.3

Background div set as droppable - dropping on overlapping box div activates drop too?
[0Replies]
- 24-Mar-2009 09:32 PM
- Forum: Using jQuery UI
I've got the following setup:
- a semi-transparent div that covers the whole browser window
- a box div on top of the background with sortable items in it
<div id="background"></div> <-- this has z-index:1000
<div id="box"></div> <-- z-index: 1001
Now, if I set the background div as a droppable so that I could drop
the sortables in it, the droppable still works even if I drop inside
the box div. So it seems jQuery interprets that even though there's
the box div in the way, the background is a valid droppable area.
Is there any way to make this work so that the box div area does not
activate the drop?
Also, why am I unable to use sortables to put into droppables in
jQuery 1.3.2 + jQuery UI 1.7? I'd use the droppable to append any
sortables dropped in into another div. It seems that the event fires
ok but the sortables are just returned to their former position. In
1.2.6 + UI 1.5.3 this all works just fine. If I change the sortables
to draggables then it works.
Thanks

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend