WP 3.5 messes up jQuery popover position

@andrew Bartel, I never said it was easy. I am not a PHP/jQuery developer, but am dragged into it because everything in WordPress works backwards. There have been promising attempts like Habari. They don’t get anywhere because of WP’s market dominance.

For example, does WordPress finally have standard registration with just full real name, first name + last name, and email address, like any serious web application since about 2005? Or does everything still revolve around meaningless usernames (“Dear User…”)?

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);

...

To the WordPress moderator who closed my other thread, can you please change the title of this thread to this:

‘Does WP 3.5 interfere with jQuery outerWidth() etc? ‘

Thanks for looking into this Davey IJzermans!

I have upgraded a second site with a similar setup to WP 3.5 and get the same problem in the popover. I haven’t changed anything else, so the problem may be specific to my site/theme/host, but something in WP 3.5 causes it.

Unfortunately the new version does not fix the problem. It even introduces new ones; the popups disappear behind some elements of the site – probably z-index issue. Still stuck in the upper left corner anyway.

I had looked for clues in bug consoles of various browsers, but couldn’t find any. I have more experience with html, php and CSS troubleshooting, so I’m probably missing something.

I’ll try a few more other things…