Skip to content

Commit

Permalink
Android/iPad width issue fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitmalina
vitmalina committed Oct 4, 2011
1 parent 2d13017 commit 4606636
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 21 deletions.
47 changes: 29 additions & 18 deletions css/core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ body {
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-user-select: none;
//-webkit-user-select: none;
}
.icon {
padding: 0px;
Expand Down Expand Up @@ -381,23 +381,34 @@ div.jsTouch div.content input {
background-color: transparent;
}

div.jsTouch div.content input[type="checkbox1"] {
width: 94px !important;
height: 28px !important;
display: block !important;
overflow: hidden !important;
margin: 2px !important;
margin-left: 5px;
position: absolute !important;
border: 1px solid #5E5F63 !important;
background-color: black;
-webkit-border-radius: 5px !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-transition: all .20s !important;
background: #fff url(../images/on_off.png) -55px 0 no-repeat !important;
div.jsTouch div.content span.toggle {
width: 94px;
height: 27px;
display: block;
overflow: hidden;
float: right;
margin-top: -3px;
margin-bottom: -3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

div.jsTouch div.content span.toggle input[type=checkbox]:checked {
margin-left: 0px;
}

div.jsTouch div.content input.checked {
border: 1px solid red;
background-position: 0px 0px !important;
div.jsTouch div.content span.toggle input[type=checkbox] {
background: #fff url(../images/on_off.png) 0 0 no-repeat;
height: 28px;
margin: 0;
margin-left: -55px;
width: 150px;
-moz-appearance: none;
-moz-border-radius: 5px;
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-transition: margin .15s;
-webkit-appearance: textarea;
-webkit-border-radius: 5px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-transition: margin .15s;
}
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html manifest="manifest.php"><head> <title>Web 2.0 Touch</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="images/iphone_startup.png" /> <link rel="apple-touch-icon" href="images/iphone_icon.png" /> <link id="coreCSS" type="text/css" rel="stylesheet" media="screen" href="css/core.css"> <link id="mainCSS" type="text/css" rel="stylesheet" media="screen" href="css/ipad-dark.css"> <script type="text/javascript" src="includes/jquery.js"></script> <script type="text/javascript" src="includes/jsTouch.js"></script> <script type="text/javascript" src="includes/iscroll.js"></script> <script type="text/javascript"> var myTouch; var myTouch2; $(document).ready(function () { myTouch = jsTouch.init('myTouch', { width: 320, page: 'pages/home.html' } ); myTouch2 = jsTouch.init('myTouch2', { width: -320, page: 'pages/home.html' } ); // unload page event //window.onbeforeunload = function() { return 'All unsaved data will be lost.'; } jsTouch.resize(); }); // prevent default scroll document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </script></head><body style="background-image: url(images/iphone_startup.png);"> <div id="myTouch" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;"> </div> <div id="myTouch2" class="jsTouchPanel" style="position: absolute; left: 320px; top: 0px;"> </div> </body></html>
<!DOCTYPE html><html manifest="manifest.php"><head> <title>Web 2.0 Touch</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="images/iphone_startup.png" /> <link rel="apple-touch-icon" href="images/iphone_icon.png" /> <link id="coreCSS" type="text/css" rel="stylesheet" media="screen" href="css/core.css"> <link id="mainCSS" type="text/css" rel="stylesheet" media="screen" href="css/ipad-dark.css"> <script type="text/javascript" src="includes/jquery.js"></script> <script type="text/javascript" src="includes/jsTouch.js"></script> <script type="text/javascript" src="includes/iscroll.js"></script> <script type="text/javascript" src="index.js"></script></head><body style="background-image: url(images/iphone_startup.png) no-repeat;"> <div id="myTouch" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;"> </div> <div id="myTouch2" class="jsTouchPanel" style="position: absolute; left: 320px; top: 0px;"> </div> </body></html>
Expand Down
33 changes: 33 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
var myTouch1;
var myTouch2;

$(document).ready(function () {
// create containers
$(document.body).append('<div id="myTouch1" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;"></div>');
$(document.body).append('<div id="myTouch2" class="jsTouchPanel" style="position: absolute; left: 320px; top: 0px;"></div>');
// init boxes
myTouch1 = jsTouch.init('myTouch1', { width: 320, page: 'pages/home.html' } );
myTouch2 = jsTouch.init('myTouch2', { width: -320, page: 'pages/home.html' } );
// unload page event
resize();
});
// events
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); // prevent default scroll
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) {
myTouch1.width = 320;
myTouch2.width = -320;
$('#myTouch2').css('left', 320);
} else {
myTouch1.width = width;
$('#myTouch2').css('left', width);
}
jsTouch.resize();
}

2 changes: 1 addition & 1 deletion pages/forms.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="toolbar"> <h1>Forms</h1> <a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a></div><div class="content"> <form name="lform" method="post" target="lframe" action="pages/forms_save.php"> <ul class="rounded"> <!--li> <div class="label">Active</div> <div class="field"><input type="checkbox" name="active" onclick="alert(1); if ($(this)[0].checked) $(this).addClass('checked'); else $(this).removeClass('checked');"></div> <div class="clear"></div> </li--> <li> <div class="label">First Name</div> <div class="field"><input type="text" name="fname" value=""></div> <div class="clear"></div> </li> <li> <div class="label">Last Name</div> <div class="field"><input type="text" name="lname" value=""></div> <div class="clear"></div> </li> <li> <div class="label">URL</div> <div class="field"><input type="url" name="url" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Email</div> <div class="field"><input type="email" name="email" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Login</div> <div class="field"><input type="text" name="login" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Password</div> <div class="field"><input type="password" name="password" value="" autocapitalize="off"></div> <div class="clear"></div> </li> </ul> <div style="text-align: center"> <a href="javascript: document.lform.submit();" class="button-green" style="width: 270px">Save Record</a> <br><br> <iframe name="lframe"></iframe> <br><br> </div> </form></div>
<div class="toolbar"> <h1>Forms</h1> <a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a></div><div class="content"> <form id="lform" name="lform" method="post" target="lframe" action="pages/forms_save.php"> <ul class="rounded"> <li> <div class="label">Status</div> <div class="field"> <span class="toggle"> <input name="status" type="checkbox"> </span> </div> <div class="clear"></div> </li> <li> <div class="label">Active</div> <div class="field"> <span class="toggle"> <input name="active" type="checkbox" checked> </span> </div> <div class="clear"></div> </li> <li> <div class="label">First Name</div> <div class="field"><input type="text" name="fname" value="11"></div> <div class="clear"></div> </li> <li> <div class="label">Last Name</div> <div class="field"><input type="text" name="lname" value="22"></div> <div class="clear"></div> </li> <li> <div class="label">URL</div> <div class="field"><input type="url" name="url" value="33" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Email</div> <div class="field"><input type="email" name="email" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Login</div> <div class="field"><input type="text" name="login" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Password</div> <div class="field"><input type="password" name="password" value="" autocapitalize="off"></div> <div class="clear"></div> </li> </ul> <div style="text-align: center"> <a href="javascript: document.getElementById('lform').submit();" class="button-green" style="width: 270px">Save Record</a> <br><br> <iframe name="lframe" style="width: 1px; height: 1px;" frameborder="0"></iframe> <br><br> </div> </form></div>
Expand Down
2 changes: 1 addition & 1 deletion pages/forms_save.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?print("<pre>");print_r($_POST);?>
<body style="background-color: white">Data:<br><?print("<pre>");print_r($_POST);?></body><script> alert(document.body.innerHTML);</script>
Expand Down

0 comments on commit 4606636

Please sign in to comment.