I'm having a bit of a play with jquery.terminal inside of a jquery dialog box. The intent is to create a terminal for mobile devices. This works great on Android, but for some reason when a page visitor is about to enter a command on an iPhone (iOS device) the viewport size adjusts to the fact that there is a keyboard, and the page scrolls down. This is very frustrating.
Does anyone have an idea that could possibly fix this? I'd like the page to remain where it is when typing. I think I need an extra bit of JavaScript to readjust the page when the keyboard is open. I've searched across StackOverflow and I see some similar discussions, but nothing works for me.
Any help is greatly appreciated.
My code is spread across several files and can all be found here as follows: http://ift.tt/1Jrl4I3
The HTML is below:
<!DOCTYPE HTML>
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<script src="http://ift.tt/1dLCJcb"></script>
<script src="http://ift.tt/1NKbGQl"></script>
<script src="jquery.mousewheel-min.js"></script>
<script src="jquery.terminal-0.8.8.js"></script>
<link href="jquery.terminal.css" rel="stylesheet"/>
<style type="text/css">
body {
background-image: url(background.png);
background-size: contain;
background-color: #000000;
}
</style>
</head>
<script>
$(function() {
$( "#test" ).dialog({
dialogClass: "no-dialog-padding",
height: $(window).height(),
width: $(window).width(),
resizable: false,
title: false,
position: 'top+10%',
});
});
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize();
</script>
<div id="test">
<script src="terminal.js"></script>
</div>
</body>
And JavaScript (for the Terminal):
jQuery(document).ready(function($) {
var id = 1;
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
$('#test').terminal(function(command, term) {
if (command.match(/test/i)){
term.echo("\nOMG DID THAT REALLY JUST HAPPEN?\n");
} else if (command == 'CLEAR') {
term.clear();
} else if (command.match(/^\s*exit\s*$/i)) {
if (term.level() == 1 && term.token() || term.level() > 1) {
term.pop();
}
} else {
term.echo("\nERROR: UNKNOWN COMMAND\n");
}
}, {
greetings: "ANDROID TESTER\n"+
"TYPE 'TEST' AND HOLD YOUR BREATH ...\n",
altinput: isAndroid,
onBlur: function() {
// prevent loosing focus
return false;
}
});
});
Aucun commentaire:
Enregistrer un commentaire