jquery-popover.js adds CSS positioning to the popover with this bit of code:
left: calc.x1,
top: calc.y1,
In WP 3.5 this is not added to the div, but when I replace calc.x1 and calc.y1 with values like ‘300px’, it is added.
So the problem is before those values are added; WP 3.5 is somehow messing up how calc.x1 and calc.y1 are calculated.
Below follows more relevant preceding code. How does WP 3.5 interfere with that? Can anyone spot it? Is there anything I could just try to rename?
The outerWidth() stuff looks like a likely culprit?
var popovers = [];
var _ = {
calc_position: function(popover, position) {
var data = popover.popover("getData");
var options = data.options;
var $anchor = options.anchor ? $(options.anchor) : popover;
var el = data.popover;
var coordinates = $anchor.offset();
var y1, x1;
if(position == 'top') {
y1 = coordinates.top - el.outerHeight();
x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
} else if(position == 'right') {
y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
x1 = coordinates.left + $anchor.outerWidth();
} else if(position == 'left') {
y1 = coordinates.top + $anchor.outerHeight() / 2 - el.outerHeight() / 2;
x1 = coordinates.left - el.outerWidth();
} else {
//bottom
y1 = coordinates.top + $anchor.outerHeight();
x1 = coordinates.left - el.outerWidth() / 2 + $anchor.outerWidth() / 2;
}
x2 = x1 + el.outerWidth();
y2 = y1 + el.outerHeight();
ret = {
x1: x1,
x2: x2,
y1: y1,
y2: y2
};
return ret;
},
...
reposition: function() {
return this.each(function() {
var $this = $(this);
var data = $this.popover('getData');
if(data) {
var popover = data.popover;
var options = data.options;
var $anchor = options.anchor ? $(options.anchor) : $this;
var coordinates = $anchor.offset();
var position = options.position;
if(!(position == 'top' || position == 'right' || position == 'left' || position == 'auto'))
position = 'bottom';
var calc;
if(position == 'auto') {
var positions = ["bottom", "left", "top", "right"];
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
var windowHeight = $(window).outerHeight();
var windowWidth = $(window).outerWidth();
$.each(positions, function(i, pos) {
calc = _.calc_position($this, pos);
var x1 = calc.x1 - scrollLeft;
var x2 = calc.x2 - scrollLeft + options.horizontalOffset;
var y1 = calc.y1 - scrollTop;
var y2 = calc.y2 - scrollTop + options.verticalOffset;
if(x1 < 0 || x2 < 0 || y1 < 0 || y2 < 0)
//popover is left off of the screen or above it
return true; //continue
if(y2 > windowHeight)
//popover is under the window viewport
return true; //continue
if(x2 > windowWidth)
//popover is right off of the screen
return true; //continue
position = pos;
return false;
});
if(position == 'auto')
//position is still auto
return;
}
calc = _.calc_position($this, position);
var top = calc.top;
var left = calc.left;
_.pop_position_class(popover, position);
...
