I'm having strange issues with text on a canvas when using an iPhone or iPad.
Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens't get drawn at all.
When the text does manage to get drawn, it is wiped when the iPhone/Pad is rotated.
I have the following code. It seems that I can only get the text to stay on the page at all if I use a setTimeout. It seems to be drawn over if I call fillText as soon as the document is loaded.
Anyone else experiencing this sort of problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//draw_b();
setTimeout('draw_b()', 500); ;
});
function draw_b() {
var b_canvas = document.getElementById("cv");
var context = b_canvas.getContext("2d");
context.fillText("Belated hello world", 50, 50);
}
</script>
</head>
<body>
<canvas id="cv" width="300" height="225"></canvas>
</body>
</html>
I have the same problem ,
the earlier version(3.2) doesn't support HTML5 Canvas filltext,
You can use alternative API such stroketext to fix this issue: http://www.netzgesta.de/dev/text/#canvas_api
Related
well i've done the space shooter tutorial and run the compiled webgl app in a html file, but I noticed that the top screen area is cut off I can scroll down and see the rest of the game app, the bottom shows as expected and if I press the fullscreen button, obviously the game shows off entirely on the screen but I want to show the entire screen in the browser not in the fullscreen mode, another thing I noticed is that if i zoom out the page to 75%, the screen in the browser shows as expected but if I zoom in to 100%, for example, that's when the top screen area gets cut off, I was thinking of giving a default zoom via js or css, but someone recommended not to depend on that, so what can i do??? please help...
with 100% zoom
with 75% zoom
here is the code for the html file:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | SpaceShooter</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 600px; height: 900px;"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">SpaceShooter</div>
</div>
</div>
</body>
</html>
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Render javascript source code in sapui5</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.
When i click on a link this will redirect me to another page in my app.
But after that when i am clicking on the mobile's back button it is not redirect me to previous page.
Ca anyone have answer of this question.
Actually device's back button click is also an event in PhoneGap. You can define the beckbutton event as a function.
<html>
<head>
<title>Sample</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", backButtonClick, false);
}
function backButtonClick() {
//Do something here on backbutton click or go back to last page.
window.history.back()
}
</script>
</head>
<body>
</body>
</html>
Its a sample, now tweak your page as you wanted.
Always write the backbutton event on deviceready!
I want to use jquery live() to automatically select the text in a text box but it doesn't seem to work in internet explorer 8. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('input.textInput')
.live('focus',
function(e){
$(this).select();
// alert(1) // if i uncomment this it works
});
});
</script>
</head>
<body>
<input type="text" class="textInput" value="0,00" />
</body>
</html>
If, however, i uncomment the alert(1) statement it does work. Any ideas what the problem is here?
This is strange, it also works if you don't use the live event:
http://jsfiddle.net/JKVXU/1/
Try
$('input.textInput').live("focus",function(e){
$(this).focus(function () {
$(this).select();
});
});
http://jsfiddle.net/JKVXU/23/
Have you tried using val() to get the text box vlaue instead?
I think the browser doesn't like the integer value on the alert.
try this: alert('1');
I have my standard video tag which is playing fine in Chrome;
<video width="x" height="y" src="video.mp4"></video>
The video itself plays fine on the iPhone, however, is there no way to listen for events? Any kind of event? I'd like to use the 'ended' event, but even a 'click' or 'play' would be helpful!
The standard
video.addEventListener('ended', function() {
alert('this adds nothing');
}, false);
doesn't work at all, and nor can I track a click event (In the same way) on the video tag.
If not, would it be possible to perhaps add a transparent over the top of the video, track a click event to that as normal but then fire the play event for the video so that the video loads in the separate window as normal?
This works perfectly for me on an iphone/ipad/safari/chrome
$('#video_1').bind("ended",videoFinished);
function videoFinished(e) {
console.log("im done); }
Here is an example from Safari HTML5 Audio and Video Guide
<!DOCTYPE html>
<html>
<head>
<title>Sequential Movies</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src="http://homepage.mac.com/qt4web/sunrisemeditations/myMovie.m4v";
myVideo.load();
myVideo.play();
}
// function adds listener function to ended event -->
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended',myNewSrc,false);
}
</script>
</head>
<body onload="myAddListener()">
<video controls
src="http://homepage.mac.com/qt4web/sunrisemeditations/A-chord.m4v"
>
</video>
</body>
</html>