Webtecho Blog

Floating bar on mobile / tablet and low res monitors

in Share Juice Pro

With every testing and review of Share Juice Pro, I received feedback to further improve its functions.

A major problem with the floating bar that hovers on the side of a single post or page is that it appears right in the middle of mobile phones and tablets.

This was pointed out by Plaban Manna in the review of the plugin and was also discussed in comments at Adrienne’s blog post Share Juice Pro: Plugin To Help You Increase Social Reach. He also provided other scenarios like behaviour of float bar at various screen sizes. We did some testing and realized that for screen size less than 800, float bar covers a sizable portion of the screen. For screen sizes > 800, the results are based on the space a theme allocates to the distance between border and text.

To resolve this , three things were done :

  1. Using a library (Mobile Detect ) from internet , Share Juice is now able to determine if the request for page is from mobile/tablet. If so, then it simply hides the float bar.
  2. If the screen size is less than 800, it hides the float bar. If it is more than 800, then it gives user option to click on a triangle and make share bar only 10px wide. If needed Share bar can be opened again by clicking on the triangle again.

image  -> image ->image

This solution manages the line between showing the bar and stopping it from obstructing the reading.