javascript - Know when position collision has fired in jQuery UI -


i trying extend jquery ui dialog() use arrow pointers point clicked. issue i've run knowing when collision method runs can change pointers left side right side.

is possible know when position.collision method triggered?

$('#myelem').dialog({     position:{         collision:'flip'     } }); 

solution:

as turns out can pass more in documentation. here ended using solved problem:

position: {     my: 'left top',     at: 'right center',     of: $trigger,     offset: '20 -55',     collision: 'flip',     using: function(obj) {          var $modal = $(this),             trigger_l = $trigger.position().left,             modal_l = obj.left,             top;          // check ie's top position         top = ( isie ) ? obj.top - 48 : top = obj.top;          $(this).css({             left: obj.left + 'px',             top: top + 'px'         });      } } 

i used using method inside position object majority of work. did quick check see if it's ie, done earlier in document, , set css accordingly.

i did while ago let me know if run problems. :)

don`t know how solution help, close real solution. need use same "using" function, recieves 2 arguments. first 1 actual coords of positioned object, , need manually set coords positioned object, did in solution. determine direction of flip-collision need use second argument. argument provides feedback position , dimensions of both elements, calculations relative position. can read here.

if have horizontal pointing arrow , need switch direction left right , vice versa according current collision, can value of "horizontal" property second argument "using" function. "left" value of property means positioned object positioned right of target, , vice versa. can change classes on positioned element accordingly current collision. here example:

position:  {     my: 'left top',     at: 'right center',     of: $trigger,     offset: '20 -55',     collision: 'flip',     using: function(coords, feedback) {             var $modal = $(this),                 top = ( isie ) ? coords.top - 48 : coords.top,                 classname = 'switch-' + feedback.horizontal;              $modal.css({                 left: coords.left + 'px',                 top: top + 'px'             }).removeclass(function (index, css) {                    return (css.match (/\bswitch-\w+/g) || []).join(' ');                }).addclass(classname);          }     } 

note in example above removed $modal 'switch-' classes added earlied. , added current 'switch-' class. time position modal, have 'switch-left' or 'switch-right' class depending on current collision.


Comments

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -