Using javascript to solve mobile browser position:fixed; issue

One of the website I am working on is using Clearbox to generate the lightbox effect. But because most of the mobile browsers does not work with position:fixed, so, when user browse the website from iPad or Android, the dialog box always popup at the top of the page (outside the current viewport). The same issue happens to every javascript library using position:fixed property.

There is no easy workaround yet.

So, I have to run the following script after every scroll event in order to update the "top" style of the popup window (keep updating even before the user click the lightbox link).

(include this script right before the </head>)

	var deviceIphone = "iphone";
	var deviceIpod = "ipod";
	var deviceIpad = "ipad";
	var deviceAndroid = "android";
	//Initialize our user agent string to lower case.
	var uagent = navigator.userAgent.toLowerCase();
	function detectUserAgent(deviceName)
	{
	return (uagent.search(deviceName) > -1)
	}
	function isMobileDevice()
	{
	return (detectUserAgent(deviceIphone) || detectUserAgent(deviceIpod) || detectUserAgent(deviceIpad) || detectUserAgent(deviceAndroid));
	}
	function updateLightboxTop() {
	var win_y = $(window).height();
	var scroll_y = $(window).scrollTop();
	if (isMobileDevice()) {
	$("#CB_Window").css({ top: (win_y * 0.5 + scroll_y) + "px" });
	}
	}
	var showTimer = false;
	function updateLightboxTopWithTimer(evt) {
	if ( showTimer ) {
	clearTimeout( showTimer );
	}
	showTimer = setTimeout( updateLightboxTop, 100 );
	}
	$(window).bind( "scroll", updateLightboxTopWithTimer);

view raw updateClearboxTop.js hosted with ❤ by GitHub