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
Related
These are my files and I tried to import my files by using OnAfterRenderAsync(bool firstRender) , but after I've executed my application,I didn't see my files in the "view page source" in the browser.
This is my code please :-
_Host.chtml (Head Section)
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<base href="~/" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="/Scripts/allinone_bannerRotator.js" type="text/javascript"></script>
<script>
jQuery(function () {
jQuery('#allinone_bannerRotator_universal').allinone_bannerRotator({
skin: 'universal',
width: 893,
height: 496,
responsive: true,
thumbsWrapperMarginBottom: -35,
showNavArrows: false,
showCircleTimer: false,
showCircleTimerIE8IE7: false,
autoHideBottomNav: false,
showPreviewThumbs: false
});
});
</script>
</head>
_Host.chtml (BodySection)
<body>
<script src="_framework/blazor.server.js"></script>
</body>
**MainLayout.razor **
#code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/jquery-ui-1.8.16.custom.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/jquery.ui.touch-punch.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/allinone_bannerRotator.js");
}
}
}
Note :- When I move blazor.server.js from body to head , everything working fine.
Could anyone helps me please ?
I have installed Mathjax.2.7.5 and arabic-Mathjax from https://github.com/OmarIthawi/arabic-mathjax
I use them locally without server, without Internet-connection
i have modified the example "sample-signals.html" to get some arabic equation:
Arabic-Mathjax1
my code is:
!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
| This example shows how to use MathJax's signal mechanism to find out
| about what MathJax is doing, and to hook into various events as they
| occur.
-->
<link href='Amiri' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="D:/4-11-2019/MathJax-2.7.5/arabic/dist/arabic.css">
<script type="text/x-mathjax-config">
// Configure MathJax
//
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js", "D:/4-11-2019/MathJax-2.7.5/arabic/dist/unpacked/arabic.js"],
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
'HTML-CSS': {
undefinedFamily: 'Amiri'
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
},
});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/noUndefined.js",
function () {MathJax.Hub.Startup.signal.Post("*** noUndefined Loaded ***")});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/AMSmath.js",
function () {MathJax.Hub.Startup.signal.Post("*** AMSmath Loaded ***")});
MathJax.Hub.Startup.signal.Post("*** In Startup Configuration code ***");
MathJax.Hub.Register.StartupHook("onLoad",function () {
Message("*** The onLoad handler has run, page is ready to process ***");
});
</script>
<!-- <script type="text/javascript" src="../MathJax.js"></script> -->
<script type="text/javascript" src="D:/4-11-2019/MathJax-2.7.5/MathJax.js"></script>
<style>
.output {
background-color: #F0F0F0;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 3px 1em;
}
</style>
</head>
<body>
<p>
$$\alwaysar{x=1}$$
</p>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<p>\[E = mc^2\]</p>
<p>$$\ar{x=1}$$</p>
<p>$\ar{x=1}$</p>
<p>
Messages about mathematics:
<pre id="MathMessages" class="output">
</pre>
</p>
<p>
All Messages:
<pre id="AllMessages" class="output">
</pre>
</p>
<script>
(function () {
var math = document.getElementById("MathMessages");
var all = document.getElementById("AllMessages");
window.Message = function (message) {
MathJax.HTML.addText(all,message);
MathJax.HTML.addElement(all,"br");
};
MathJax.Hub.Register.MessageHook("New Math",function (message) {
var script = MathJax.Hub.getJaxFor(message[1]).SourceElement();
MathJax.HTML.addText(math,message.join(" ")+": '"+script.text+"'");
MathJax.HTML.addElement(math,"br");
});
MathJax.Hub.Startup.signal.Interest(function (message) {Message("Startup: "+message)});
MathJax.Hub.signal.Interest(function (message) {Message("Hub: "+message)});
Message("##### events above this have already occurred #####");
})();
</script>
</body>
</html>
Can anyone help me????
I have problem in using ui-grid with components in angularjs version > 1.5. Can someone help me to give me a method to do that? Because I don't use scope and in the documentation of ui-grid is for angular last than 1.5
I tried this code and doesn't show the table with information :
(function(){
'use strict';
angular.module('app', ['ngTouch', 'ui.grid'])
.component('exampleComponent', {
controller: MainController,
controllerAs:'vm',
templateUrl:'index.html',
bindings:{
propertyToBind: '='
},
template: `
<div>
<p>PropertyThatIWantToBindAndShowInComponentInCellTemplate: {{ ctr.propertyToBind }}</p>
</div>
`
});
function MainController($http,$log){
vm.gridOptions = {};
vm.gridOptions.columnDefs = [
{ name: 'ShowScope',
// <example propertyToBind="ValueOfTheProperyThatIWantToShow"></example>
// cellTemplate:'<div title="{{COL_FIELD}}"> {{row.entity.id}} </div>'
//'<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">'
cellTemplate:'<p propertyToBind ="{{row.entity.name }}"></p> '
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
vm.gridOptions.data = data;
});
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<example-component>
<div ui-grid="gridOptions" class="grid"></div>
</example-component>
<script src="app.js"></script>
</body>
</html>
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
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>