I have a UIWebView which I am creating a custom text editor, with a native keyboard.
I am trying to detect when the return button is pressed on the native keyboard. I have attempted the code in this: How to detect keyboard enter key? as well as customize return key but was not able to succeed. How do I capture the return?
html:
<!DOCTYPE html>
<html>
<head>
<title>iOS Note Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
function returnKeyPressed(event){
if(window.event.keyCode == 13) document.location = "returnkeypressed:";
return true;
}
}
</script>
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<link rel="stylesheet" type="text/css" href="quill.snow.css">
<link rel="stylesheet" type="text/css" href="quill.bubble.css">
<link rel="stylesheet" type="text/css" href="quill.core.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body onKeyPress="return returnKeyPressed(event)" style="padding-top:0px;margin-top:0px;">
<div id="wrap">
<div id="editor-container" style="padding:0px;margin-top:0px;font-family:'GothamPro-Light';font-size: 15px;"></div>
</div>
<script type="text/javascript" src="quill.core.js"></script>
<script type="text/javascript" src="quill.min.js"></script>
<script type="text/javascript" src="quill.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ios_note_editor.js"></script>
</body>
</html>
.m
//Not being called
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSLog(#"webView shouldStartLoadWithRequest");
}
body onKeyPress when changed to onKeyDown fixes the issue. Hours of headache over one word
Related
I am trying to load HTML content to WKWebView, It does not load properly the same as screen height/width, same code is working fine with UIWebView, See the following code
webView.loadHTMLString(htmlString!, baseURL: nil)
HTML string content <style type="text/css"> #container { width: 667px; height: 375px; margin: 0 auto } </style> 667px is screen height and 375px is screen width.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
#container {
width: 667px;
height: 375px;
margin: 0 auto
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', {
//Chart code.
});
</script>
</body>
</html>
What can I do to solve this issue?
Add headerString before your html code and try it Like below
let description = "<p> HTML content <p>"
var headerString = "<header><meta name='viewport' content='width=device-width,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
headerString.append(description)
self.webView.loadHTMLString("\(headerString)", baseURL: nil)
I am new to ionic framework. In my iOS app i need to receive push notification from remote server.I followed several methods but nothing working fine.There is no detailed tutorial for iOS push notification in ionic. While logging in my app i am passing the device token to server. When they are sending notification in backend, response what i they are getting as {success:0; "invalid_registration id"}. I can't figure out why i am not able to receive the notification. I have added the full code which i used in my app.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<title>Freshey's</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
<link href="css/font-awesome.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8" src="js/PushNotification.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700,400italic,300,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
<!-- endbuild -->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Controllers.js:
.controller('LoginCtrl', function($scope, $cordovaStatusbar,$state,$http,$ionicLoading, $ionicPopup,httpService, $cordovaPush, $cordovaDevice,$rootScope) {
var iosConfig = {
"badge": true,
"sound": true,
"alert": true,
};
document.addEventListener("deviceready", function(){
$cordovaPush.register(iosConfig).then(function(deviceToken) {
// Success -- send deviceToken to server, and store for future use
console.log("deviceToken: " + deviceToken)
window.localStorage.setItem('regid',deviceToken);
}, function(err) {
alert("Registration error: " + err)
});
$rootScope.$on(pushNotificationReceived, function(event, notification) {
alert("1");
if (notification.alert) {
navigator.notification.alert(notification.alert);
}
if (notification.sound) {
var snd = new Media(event.sound);
snd.play();
}
if (notification.badge) {
$cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
// Success!
}, function(err) {
// An error occurred. Show a message to the user
});
}
});
// WARNING! dangerous to unregister (results in loss of tokenID)
$cordovaPush.unregister(options).then(function(result) {
// Success!
}, function(err) {
// Error
});
}, false);
$scope.data = {};
$scope.login = function() {
var baseUrl = "http://mywebworks/login.php";
var param = {"phone" : $scope.data.phone,"reg_id" : window.localStorage.getItem('regid') };
alert("session"+window.localStorage.getItem('regid'));
$ionicLoading.show({
template: '<ion-spinner icon="android"></ion-spinner>'+
'<p>Loading...</p>'
});
});
I have a grid page with easyui expanded row in it.
now I want to expand the row to show details, so the detail page html list below:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
<title>谱系信息树</title>
<link href="../../Template/css/common.css" rel="stylesheet" type="text/css" />
<link href="../../Theme/View.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
mytree = new dTree('mytree');
#Html.Raw(ViewData["pTree"].ToString());
document.write(mytree);
</script>
</body>
</html>
in my grid page, when I expand the row, the ajax will be trigger to send request to detail page:
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
ddv.panel({
height: 170,
border: false,
cache: false,
href: 'PedigreeNewChart?mid=' + row.mothor_id + "&fid=" + row.father_id,
onLoad: function () {
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
$('#dg').datagrid('fixDetailRowHeight', index);
}
But now , when I expand to get the detail page, an error throw to me (firebug):
I have the needed js file(vertdtree.js) included in the detail page, but why it can't recognize it?
dTree is not loadded.
probably issue is how you include script
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
but it should be
<script src="~/Scripts/dtree/vertdtree.js" type="text/javascript"></script>
I have a problem that the text inside the content-div is scrollable. Happens on iOS 6 with iPhone 4 and only if native title is set.
Video: http://www.youtube.com/watch?v=8ARaDQzBqOM
Demo:
<!DOCTYPE html>
<html>
<head>
<script>
forge.topbar.setTitle('Test App', function() {
forge.logging.log("Topbar image set");
}, function(e) {
forge.logging.log("Topbar image error: " + e);
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>this text is scrollable</p>
</div>
</div>
</body>
</html>
You might want to try to reset all the margins, paddings and border for all elements using CSS. Add this right before the closing </head>:
<style type="text/css">
* { /* reset */
margin: 0;
padding: 0;
border: 0;
}
</style>
Want to implement simple dialog with jquery-mobile on phonegap: http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html
but my LogCat tells me (when I press the button):
05-10 15:02:37.960: V/webview(10536): singleCursorHandlerTouchEvent -getEditableSupport FASLE
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=600; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Prototyp_V.2.0</title>
<link rel="stylesheet" href="js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0a3.min.css" type="text/css" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
.ui-page {
background: #ffffff;
}
</style>
</head>
<body onload="init();" id="stage" class="theme">
<script type="text/javascript">
function test() {
alert("test");
$(document).delegate('#simplestring', 'click', function() {
$(this).simpledialog({
'mode' : 'string',
'prompt' : 'What do you say?',
'buttons' : {
'OK': {
click: function () {
$('#dialogoutput').text($('#dialoglink').attr('data-string'));
}
},
'Cancel': {
click: function () { },
icon: "delete",
theme: "c"
}
}
})
})
}
</script>
<div data-role="page" id="id0">
<div data-role="header" data-theme="c">
<h1>Heading</h1>
</div>
<div data-role="content">
<div id="twitter_"><center>Dialog Box</center>
<p>You have entered: <span id="dialogoutput"></span></p>
Open Dialog
</div>
</div>
</body>
</html>
the alert "test" is called, but I always get this cursor event !
What do you mean "cursor event" ? and
use button lik this:
Open Dialog
And
your function should like this
$(document).delegate('#dialoglink, 'click', function() {
/// Your other code goes here
});
use outside the test function