Small devices overlay width fixed

includes/jsTouch.js

@@ -41,26 +41,29 @@ var jsTouch = {
 
 	overlayHTML: function(HTML, params, callBack) {
 		// parse parameters
-		var top 		= 52;
-		var left 		= 10;
+		var left		= null;
+		var top			= null;
 		var width  		= 300;
 		var height 		= 300;
 		var modal 		= false;
 		var opacity 	= 0.3;		
 		var bgcolor		= 'black';
 		if (typeof(params) == 'object') {
-			if (String(params['top']) 		!= 'undefined') width		= parseInt(params['top']);
-			if (String(params['left']) 		!= 'undefined') width		= parseInt(params['left']);
+			if (String(params['left']) 		!= 'undefined') left		= parseInt(params['left']);
+			if (String(params['top']) 		!= 'undefined') top			= parseInt(params['top']);
 			if (String(params['width']) 	!= 'undefined') width		= parseInt(params['width']);
 			if (String(params['height']) 	!= 'undefined') height		= parseInt(params['height']);
 			if (String(params['modal']) 	!= 'undefined') modal 		= params['modal'];
 			if (String(params['opacity']) 	!= 'undefined') opacity		= params['opacity'];
 			if (String(params['bgcolor']) 	!= 'undefined') bgcolor		= params['bgcolor'];
 		}
+		if (width  > window.innerWidth -10) width  = window.innerWidth - 10; 
+		if (height > window.innerHeight-10) height = window.innerHeight- 10;
 		// lock secreen
 		var lock = document.createElement('div');
 		lock.id = 'overlay_lock';
-		lock.style.cssText = 'z-Index: 9; background-color: '+ bgcolor +'; opacity: 0; position: fixed; left: 0px; top: 0px; '+
+		lock.style.cssText = 'z-Index: 9; background-color: '+ bgcolor +'; opacity: 0; '+
+			'position: absolute; left: '+ parseInt(document.body.scrollLeft) +'px; top: '+ parseInt(document.body.scrollTop) +'px; '+
 			'-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transition: all .4s ease-in-out; '+
 			'width: '+ window.innerWidth +'px; height: '+ window.innerHeight +'px;';
 		if (!modal) {
@@ -73,17 +76,25 @@ var jsTouch = {
 		$(document.body).append(lock);	
 		setTimeout("$('#overlay_lock').css('opacity', '"+ opacity +"');", 1); // otherwise transition is not working
 
+		window.onscroll = function () {
+			var winTop 	= parseInt(document.body.scrollTop) + (parseInt(window.innerHeight) - height) / 2;
+			var winLeft = parseInt(document.body.scrollLeft) + (parseInt(window.innerWidth) - width) / 2;
+			$('#overlay_lock')[0].style.cssText += 'top: '+ parseInt(document.body.scrollTop)+'px; left: '+ parseInt(document.body.scrollLeft)+'px;'+
+				'width: '+ parseInt(window.innerWidth) +'px; height: '+ parseInt(window.innerHeight) +'px';  
+			$('#overlay_box').css('top', winTop+'px');
+			$('#overlay_box').css('left', winLeft+'px');
+		}
+		window.onresize = function () { window.onscroll(); }
+
 		// create overlay
 		var div = document.createElement('div');
+		var winTop 	= parseInt(document.body.scrollTop) + (parseInt(window.innerHeight) - height) / 2;
+		var winLeft = parseInt(document.body.scrollLeft) + (parseInt(window.innerWidth) - width) / 2;
 		div.id = 'overlay_box';
 		div.className = 'overlay';
-		div.style.cssText += 'left: '+ left +'px; top: '+ top +'px; width: '+ width +'px; height: '+ height +'px; -webkit-border-radius: 5px; '+
+		div.style.cssText += 'left: '+ winLeft +'px; top: '+ winTop +'px; width: '+ width +'px; height: '+ height +'px; -webkit-border-radius: 5px; '+
 			'-webkit-transition: all .4s ease-in-out; opacity: 0;';
 		div.innerHTML = HTML;
-		// isert another DIV (needed for iScroll)
-		var tmp = $('.content', div)[0];
-		if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
-
 		$(document.body).append(div);			
 		setTimeout("$('#overlay_box').css('opacity', '1');", 1); // otherwise transition is not working
 		// add clicked class when clicked on the link

index.js

@@ -17,7 +17,6 @@ document.addEventListener('orientationchange', resize, false);
 window.addEventListener('resize', resize, false);
 
 function resize() {
-	console.log('resize');
 	var width  = parseInt(window.innerWidth);
 	var height = parseInt(window.innerHeight);
 	if (width > 1000 || height > 1000) {

pages/buttons.html

@@ -1,19 +1,19 @@
 <div class="toolbar">
-	<div style="width: 275px; margin: -2px auto;">
+	<div style="width: 250px; margin: -2px auto;">
 		<ul class="seg-button">
-			<li><a style="width: 80px">Segmented</a></li>
-			<li><a style="width: 80px">Button</a></li>
-			<li><a style="width: 80px" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });">Go Back</a></li>
+			<li><a style="width: 75px">Segmented</a></li>
+			<li><a style="width: 70px">Button</a></li>
+			<li><a style="width: 70px" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });">Go Back</a></li>
 		</ul>
 	</div>
 </div>
 <div class="content">
 	<div style="padding: 10px;">
-		<a href="javascript:" class="button-black" style="margin-top: 10px; width: 270px"> Black Button </a>
-		<a href="javascript:" class="button-gray" style="margin-top: 10px; width: 270px"> Gray Button </a>
-		<a href="javascript:" class="button-navy" style="margin-top: 10px; width: 270px"> Navy Button </a>
-		<a href="javascript:" class="button-red" style="margin-top: 10px; width: 270px"> Red Button </a>
-		<a href="javascript:" class="button-green" style="margin-top: 10px; width: 270px"> Green Button </a>
-		<a href="javascript:" class="button-blue" style="margin-top: 10px; width: 270px"> Blue Button </a>
+		<a href="javascript:" class="button-black" style="margin-top: 10px; width: 90%"> Black Button </a>
+		<a href="javascript:" class="button-gray" style="margin-top: 10px; width: 90%"> Gray Button </a>
+		<a href="javascript:" class="button-navy" style="margin-top: 10px; width: 90%"> Navy Button </a>
+		<a href="javascript:" class="button-red" style="margin-top: 10px; width: 90%"> Red Button </a>
+		<a href="javascript:" class="button-green" style="margin-top: 10px; width: 90%"> Green Button </a>
+		<a href="javascript:" class="button-blue" style="margin-top: 10px; width: 90%"> Blue Button </a>
 	</div>
 </div>