search

pinterest / widgets

JavaScript widgets, including the Pin It button.
Other
211 stars 88 forks source link

"Pin It" Button Mis-Positioning #26

Closed calebsylvest closed 10 years ago

calebsylvest commented 10 years ago

The new hover-over-image Pin It button positioning is thrown off when used on a WordPress site while logged in (see images below).

The button, instead of appearing over the image, positions its self several pixels above the image. Therefore when a user tries to target the button they hit a gap between the image and button and the button disappears.

If it was only for WordPress site admins and editors I wouldn't consider it to be a huge problem, but if you are logged into WordPress and visit other WordPress sites the top bar is activated with a variety of possible actions.

example-on-another-blog Someone else's WordPress blog you will see the issue if you are a WordPress user and logged in

I'm also going to venture a guess that this could be an issue for other platforms like Drupal, Joomla, etc.

pin-btn-wordpress-loggedin Photolia Theme Demo you won't see the issue here unless you are a WordPress user and logged in

pin-btn-wordpress_com-demo WordPress.com Photolia Theme Demo you should see the issue here no matter what

kentbrew commented 10 years ago

I may have a fix for this; update tomorrow.

kentbrew commented 10 years ago

Aha, found it. To get the position of the image we are chasing offsetParents all the way up, and don't seem to be making it past document.body. This page has margin-top: 80px!important set on the HTML tag, and we're not spotting it, since document.body.offsetTop is zero.

I have more thinking to do about this; is there a reason why you are putting margin on the HTML tag and not the BODY tag?

kentbrew commented 10 years ago

Looks like Wordpress does the same thing (32px) when you are signed in. No need to worry about undoing this; we will figure out a way to count this pixels on our end.

calebsylvest commented 10 years ago

Hi Kent,

Thank you for looking into the issue. This is not something I am having trouble with in something I have developed (as far as margin on HTML vs the body) but an issue that can occur on some platforms, like popular CMSs. I just happen to be working in WordPress and have experienced the issue while developing themes.

kentbrew commented 10 years ago

Fixed.