Posted 6 months ago #
Just upgraded to WP 3.5. Now the positioning of jQuery popover tooltips (jQuery.popover plugin v1.1.1, Davey IJzermans) is screwed up, stuck in the upper left corner. Behold here:
I don't see an obvious cause/solution, like a CSS naming conflict. So this will probably cost me two days to fix. Does anyone have any clue what in the 3.5 upgrade could have caused this?
Posted 6 months ago #
accoring to the WP3.5 Master list,
KNOWN ISSUES
jquery
Plugins and themes which use their own jQuery without properly compensating for WP's will break. This isn't new by any means. In fact, we've always said that replacing or overriding jQuery will bust things, and we don't let people do it anymore in plugins or themes hosted here. That doesn't stop people from doing it, though.
We've come up with some awesome directions to help you debug your jQuery issues: http://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors
Don't worry, if that was greek to you, do the usual turning off plugins and switching themes to figure out which one it is, and then tell the dev 'Hey, you're doing_it_wrong() and breaking things!'
In all cases, make sure you're using the latest version of themes and plugins. For example, TwentyTen and TwentyEleven themes got an upgrade. Also many plugins have updated and will now work with 3.5. Make sure you upgrade them first before coming for help.
Posted 6 months ago #
I consistently use var jPopover = jQuery.noConflict(); etc. to avoid conflicts and most jQuery still works after the upgrade. Not convinced that's it, but I'll look into it.
I don't even bother with themes and plugins, because they usually don't keep up with WordPress constant changes and rules. And I certainly wouldn't use WP's awful TwentyTen etc. themes.
It is not jQuery that is busting things; WordPress is screwing up my jQuery. WordPress is not the center of the universe. I'm stuck with it at this point, but WordPress sucks.
If there was a solid, well-architected, standards-based alternative to WP I would switch.
EDIT:
Double-checked. I don't have my own jquery link in my theme, I already rely on whatever WP provided. It doesn't look like a javascript error anyway; it's a positioning issue, probably a CSS conflict somewhere.
Posted 6 months ago #
If it's so easy why don't you write one?
Posted 6 months ago #
It clearly is a WordPress issue. I know it after having investigated the matter too.
Sent the developers a message about my findings. No reply as of yet.
-k0nsl
Posted 6 months ago #
@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...")?
Posted 6 months ago #
jquery-popover adds positioning with inline style on the .popover element. It should look something like this:
<div class="popover popover-top" style="left: 370.767px; top: 140.717px; margin-top: -10px; margin-left: 0px; z-index: 949; display: block;">
After upgrading to WordPress 3.5 it looks like this:
<div class="popover popover-top" style="margin-top: -10px; margin-left: 0px; z-index: 949; display: block;">
So WP breaks adding that left: ...; top: ...;
In jquery-popover.js it looks like this:
left: calc.x1,
top: calc.y1,Does WP 3.5 introduce something similar that clashes? Could I rename it?
Posted 6 months ago #
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);
...
Posted 6 months ago #
mod_pagespeed, mentioned in the known issues, is not a factor. Just double-checked with my hosting service.
Posted 6 months ago #
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? '
Posted 6 months ago #
Hi modifiedcontent and others,
First of all thanks for pointing me to this issue and using my plugin. I appreciate the support.
Secondly, I have no clue as to where the problem might be, looking at your findings. What's more, I can't reproduce the error. Popovers are positioned correctly, even when using a clean install of WP 3.5 and the Twenty Eleven theme.
Also, looking at the site (dfmsummit.com) I see popover displayed nicely above the speaker list, but that's probably a hardcoded temporary fix you've made.
Are you sure that you haven't (or another plugin has) overwritten any of jQuery's methods? Have you taken a look at the console? Maybe there is a bug in the code and the console can point to a line number.
If you have the time, please also try the new alpha version. I just committed it to GitHub. It may not be a solution, but the positioning may behave correctly with this version, as it is written in strict Javascript mode. (using "use strict")
https://github.com/klaas4/jQuery.popover/tree/alpha
Sorry for not getting to you sooner, but I hope this can be of help.
~ Davey.
Posted 6 months ago #
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...
Posted 6 months ago #
I think I found it...
Another jQuery script in the page had a local jquery-ui.js link. Replacing that with the latest version fixes popover's positioning problem.
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
So I guess there was a clash between the old local jquery-ui.js and the new version of jQuery that comes with WordPress.
I also tried with jquery-ui completely removed, but that breaks everything. So jquery-ui is required for popover? And it is not already included in WP somewhere?
Posted 5 months ago #
I am 100% sure jQuery.popover has no dependencies on jQuery UI. Also, as you mentioned jQuery and jQuery can clash heavily when using mismatched versions.
I'm glad you got it sorted out though. I like your site's design!
Since I understood from your e-mail that you're Dutch, I'm going to say "fijne feestdagen!"
~ Davey.
Posted 5 months ago #
I am 100% sure jQuery.popover has no dependencies on jQuery UI.
I guess jQuery UI changes standard behavior of jQuery?
Bedankt + het beste voor 2013!
Posted 4 months ago #
I am having exact problem with 3.5 and 3.51. That is- my custom plugin now shows popout content in upper left instead of center. I am not a jquery expert so any help would be appreciated. This error happens with any theme. This only happens with 3.5+ versions of WordPress so I concur that it is due to a WordPress change. None of the above suggestions work for me. Please don't attack me or try to make me look stupid, I'm only trying to solve a problem to the best of my current abilities. Till then will revert back to 3.4.2 where things work. If anyone has solved this plz post
Posted 4 months ago #
Fixed this by replacing wp-includes/js/jquery.js with the one from WordPress 3.4.2
Hope this helps someone :)
You must log in to post.
