I'm using prebuilt ace-editor from https://github.com/ajaxorg/ace-builds/src
Here's my HTML page (almost the same as example on http://ace.c9.io):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<pre id="editor"></pre>
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/groovy");
</script>
</body>
</html>
Running at http://cornplay.com/lab/editor.html
The problem: whenever I press Shift key on Android virtual keyboard, it deletes last symbol instead of switching to uppercase.
Here's the video: https://vimeo.com/165671675
What I'm missing?
Thanks in advance.
Related
My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
The svg rect works well in chrome, but not in firefox. What is the problem? Also, is there any special rules in using svg in firefox?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect {
width: 300px;
height: 100px;
fill: green
}
</style>
</head>
<body>
<svg width="400px" height="110px">
<rect/>
</svg>
</body>
</html>
I am getting the following error in the inspector.
Uncaught TypeError: Cannot read property 'cssClass' of undefined ace.js:15750
The setTheme and setMode are in the same directory as the ace.js.
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Ace is the Place
</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
Hello World!
<div id="editor"></div>
<script src="bower_components/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var editor = ace.edit("editor");
editor.setTheme("bower_components/ace/build/src/monokai");
editor.getSession().setMode("bower_components/ace/build/src/html");
</script>
</body>
</html>
There is no file named "bower_components/ace/build/src/monokai" use
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
instead. This will work because Ace have a special mapping for paths starting with "ace".
I am using JS plumb 1.5.5, the basic case is working fine on chrome, IE 10 and mozilla. But i am getting the ERROR : 'jsPlumb.Endpoints[...]' is null or not an object , when running the same on IE version 8.0.7600.16385. I tried debugging the javascript and found that the error is happening because _jsPlumb.getRenderMode() is undefined. I tried setting the renderMode to VML and SVG but still i get the same error. I have to support this on IE8 as well. The sample code thats throwing the error is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta http-equiv="Cache-Control" Content="no-cache">
<!-- library scripts -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.5.5.js"></script>
<script type="text/javascript" src="js/jquery.contextMenu.js"></script>
<script type="text/javascript" src="js/wfeditor.js"></script>
<style>
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 250px;
top: 100px;
}
#state3 {
left: 100px;
top: 250px;
}
</style>
</head>
<body>
<div id="state1" class="item"></div>
<div id="state2" class="item"></div>
<div id="state3" class="item"></div>
</body>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.makeSource($('.item'), {
connector: 'StateMachine'
});
jsPlumb.makeTarget($('.item'), {
anchor: 'Continuous'
});
});
</script>
</html>
Below is my code. All JS files are loading properly and no JS error but Google Map is not getting displayed in browser. I checked on all browser but nothing worked for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%#page
language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
String contextPath = request.getContextPath();
%>
<html>
<head>
<title>home</title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="<%=contextPath%>/script/jquery.ui.map.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#map_canvas').gmap().bind('init', function (ev, map) {
$('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': true }).click(function () {
$('#map_canvas').gmap('openInfoWindow', { 'content': 'Hello World!' }, this);
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<form:form method="post" id="searchTweetForm" action="home.do">
<div id="map_canvas"/>
</form:form>
</body>
</html>
Your css is incorrect, the map doesn't have a size. The map is :
<div id="map_canvas"/>
Change:
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
To:
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
(or change the div to match that used in the css).
working example