WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WP 3.5 messes up jQuery popover position (17 posts)

  1. modifiedcontent
    Member
    Posted 1 year 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:

    http://dfmsummit.com

    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?

  2. Amado.Miami
    Member
    Posted 1 year 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.

  3. modifiedcontent
    Member
    Posted 1 year 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.

  4. Andrew Bartel
    Member
    Posted 1 year ago #

    If it's so easy why don't you write one?

  5. k0nsl
    Member
    Posted 1 year 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

  6. modifiedcontent
    Member
    Posted 1 year 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...")?

  7. modifiedcontent
    Member
    Posted 1 year 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?

  8. modifiedcontent
    Member
    Posted 1 year 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);
    
    ...
  9. modifiedcontent
    Member
    Posted 1 year ago #

    mod_pagespeed, mentioned in the known issues, is not a factor. Just double-checked with my hosting service.

  10. modifiedcontent
    Member
    Posted 1 year 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? '

  11. Davey IJzermans
    Member
    Posted 1 year 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.

  12. modifiedcontent
    Member
    Posted 1 year 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...

  13. modifiedcontent
    Member
    Posted 1 year 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?

  14. Davey IJzermans
    Member
    Posted 1 year 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.

  15. modifiedcontent
    Member
    Posted 1 year 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!

  16. tr4nsend
    Member
    Posted 1 year 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

  17. tr4nsend
    Member
    Posted 1 year ago #

    Fixed this by replacing wp-includes/js/jquery.js with the one from WordPress 3.4.2
    Hope this helps someone :)

Topic Closed

This topic has been closed to new replies.

About this Topic