JQuery UI Position Wrong Position on First Boot and Fix Second Reboot

Question

I am using jQuery position UI plugin to position helper icons on a web page. This is my code responsible for the position:

if ( $(element_selector).length !== 0 && $(title_class_selector).length !== 0 ) { $(title_class_selector).position({ my: "center", at: cornerPosition, offset:"<?php echo $x_coordinates_foradjustment;?> <?php echo $y_coordinates_foradjustment;?>", of: $(element_selector) }); } 

Where cornerPosition has the following possible values:

 left top right top left bottom right bottom 

This works very well until I ran into a problem for a specific div where I would like to add icons. At the first boot, the position is incorrect (instead of the left bottom, it goes to the top left), and the other instead of the right top, it goes to the lower right.

These are the affected element_selectors elements with their correct and incorrect positions:

 #wpv-featured-news-slider .span4:first-child .thumbnail Correct position: Left bottom Actual position on first loading of webpage: Left top #wpv-featured-news-slider Correct position: Right top Actual position on first loading of webpage: Right bottom 

The strange thing is that when I refresh the page (reloading the page), it now goes to the right positions! Is this something wrong with the cache or selectors? Is there a way to add some checks on this? I do not like to modify element_selectors to fix this problem.

This positioning system has been widely implemented on our different sites, and this is the only case when I see this problem (everything works fine with the others). This can be a very isolated case. I am looking for any related problems, but could not find them. Any tips and suggestions would be very helpful. Thanks.

Answer 1

Do you find any image problems? Sometimes non-cached images without a specified height / width can cause position problems. Try https://github.com/desandro/imagesloaded and see if that helps.

Answer 2

jQuery UI uses conflict detection and when a collision is detected, it puts the positional element in a different position. The default value, which is not specified (as in your case), is flipped, so it will flip the element to the opposite side of the target (as you described).

Try changing the collision to "none".

I had the same problem as when loading, but only OK on subsequent loads.