This script mods the native jQuery.fn.offset() so that it will set the offset of the elements by accepting a parameter in the form of {left:px,top:px}.
When I switched from yahoo to jQuery, this is basically the only thing I missed, as they have a setXY method in their Dom object.
Currently, offset only returns the offset of the first element in the array. You could set the x,y of the elements by using $(element).css({left:px,top:px}), but it does not always work correctly, especially when the element you are trying to position is nested within other relatively or absolutely positioned elements. The problem is that the left and top you try to set with css will be relative to the nearest parent element that has css of ‘position:relative’, instead of of being relative to the window itself.
Example usage:
$("#myElement").offset({left:34,top:100});
Just include a js file with this script and you’re all set:
(function($){
$.fn.extend({
/**
* Stores the original version of offset(), so that we don't lose it
*/
_offset : $.fn.offset,
/**
* Set or get the specific left and top position of the matched
* elements, relative the the browser window by calling setXY
* @param {Object} newOffset
*/
offset : function(newOffset){
return !newOffset ? this._offset() : this.each(function(){
var el = this;
var hide = false;
if($(el).css('display')=='none'){
hide = true;
$(el).show();
};
var style_pos = $(el).css('position');
// default to relative
if (style_pos == 'static') {
$(el).css('position','relative');
style_pos = 'relative';
};
var offset = $(el).offset();
if (offset){
var delta = {
left : parseInt($(el).css('left'), 10),
top: parseInt($(el).css('top'), 10)
};
// in case of 'auto'
if (isNaN(delta.left))
delta.left = (style_pos == 'relative') ? 0 : el.offsetLeft;
if (isNaN(delta.top))
delta.top = (style_pos == 'relative') ? 0 : el.offsetTop;
if (newOffset.left || newOffset.left===0)
$(el).css('left',newOffset.left - offset.left + delta.left + 'px');
if (newOffset.top || newOffset.top===0)
$(el).css('top',newOffset.top - offset.top + delta.top + 'px');
};
if(hide) $(el).hide();
});
}
});
})(jQuery);
2 Comments »
RSS feed for comments on this post. TrackBack URL
Is there a way to find the coordinates of a div element using your script.
I want to store these in a cookie so when the browser reloads the page, it will remember the divs positions.
Comment by Ryan — June 4, 2009 @ 3:44 am
That is what the original jQuery.fn.offset() should already do. See the documentation for offset for details.
Example…
var offset = $(‘#myDiv’).offset();
/*
* result will be something like this…
* var offset = { left: 300, top: 500}
*/
Comment by admin — June 6, 2009 @ 12:17 pm