The FancyBox component offers an elegant, free and open-source in-line pop-up window, based on the jQuery JavaScript platform. With its streamlined design and shadow effects, it competes with ColorBox as the top successor to LightBox. Its breadth of features and configuration options enable fine-grained customization, and its simplicity makes it easier to perform advanced code edits as necessary.
Regardless of the plugin used, many developers face a challenge when programming mobile browser pop-up windows. Not only do mobile browsers render HTML differently, they also have different gestures and transitions on form inputs. For example, a website might have a pop-up form, with an email capture request for the visitor’s name and email address. When the mobile user selects the box to enter their name, the browser will automatically zoom-in to make it easier for the user to type within that box.
The automatic zoom-in can pose a problem for many pop-up window components. Since the pop-up windows often automatically move based on the screen size and position, the mobile browser will fight with the pop-up window for control of the screen. The pop-up window often ends up being positioned outside of the user’s visible area, resulting in UI confusion and frustration.
In order to get FancyBox to stop moving the window when an input element is selected, it’s necessary to modify the source JavaScript. First, in the parent window, define a new variable called “disableFBResize”, and set its value when any of the pop-up box’s input elements get focus:
var disableFBResize = false;
$(document).ready(function(){
$('#fancybox_container input').focus(function(){ disableFBResize = true; });
$('#fancybox_container input').blur(function(){ disableFBResize = false; });
$('#fancybox_container input').mouseup(function(e){ e.preventDefault(); });
});
Next, in the FancyBox JavaScript file, find the place where the plugin’s resize function is defined, and add a line at the beginning, to exit if the “disableFBResize” variable is set to true:
Original:
a.fancybox.resize=function(){
Updated:
a.fancybox.resize=function(){/*NEWCODE*/if((typeof disableFBResize != 'undefined') && (disableFBResize)) return;
With this hack, the FancyBox plugin will not move the window when a mobile user selects that textbox. This will make it much easier to enter content, and result in more form conversions and return visits.
Written by Andrew Palczewski
About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+
