Using the latest version of Chrome and Opera, I noticed that my script didn't work on localhost while using ECMAScript 6. I searched the web and found that I could enable experimental JavaScript features, yet it didn't help in fixing my issue. I switched the type back to regular ECMAScript and found out that it worked again, which left me bewildered. It says that Chrome 62 should support ECMAScript 6, so why doesn't it work?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Framework</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
background-color: #000;
overflow: hidden;
height:100%;
}
</style>
</head>
<body>
<canvas id="screen">
If you can see this message, that means that your browser does not support HTML5.
Please update your browser immediately in order to view this page.
</canvas>
<script src="main.js" type="text/ecmascript-6"></script>
</body>
</html>
alert("test");
let canvas = document.getElementById("screen");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
let ctx = canvas.getContext("2d");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Framework</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
background-color: #000;
overflow: hidden;
height:100%;
}
</style>
</head>
<body>
<canvas id="screen">
If you can see this message, that means that your browser does not support HTML5.
Please update your browser immediately in order to view this page.
</canvas>
<script src="main.js" type="text/ecmascript-6"></script>
</body>
</html>
Also, running it through here causes it to work, but my theory is that it's ignoring the type and running it as pure JavaScript, although I'm not 100% certain.
Related
Ive decided to create a website like TokBox. But I ran into a problem wheren. When I’m using WebRTC, I don’t get the output of the camera, can someone help me? Plus if you need any more information, I’m using Safari and its allowed me to use the camera, but i just cant see the output.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
Oh and here, I don’t know what to put here for the errors.
function videoError(e) {
// do something
}
</script>
</body>
</html>
Well, you could start by adding a console.log for the error.
Safari is a bit picky about autoplaying videos, this sample adds a playsinline attribute. You'll also want to use srcObject instead of URL.createObjectURL and promises with the modern version of the API.
In mobile safari on iOS 8, when I follow a link to open a new window (which has a <meta name="viewport" content="width=device-width, initial-scale=1.0">), the page intermittently appears scrolled way up (i.e. there is a big gap between the top of the viewport and the first element of the page).
Scrolling at all after that brings behaviour back to normal. This is very frustrating, what is the most reliable workaround?
Example page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin:0;
}
h1 {
background-color:red;
margin:0;
}
</style>
</head>
<body>
<h1>Top of page</h1>
</body>
</html>
Bug report under rdar://20598527
It looks like this rogue scrolling occurs as or just after the page first paints. This could probably be before or after DOM ready, window load events fire.
My hacky solution (see gist) is to run incrementally window.scrollTo(0, 1); until the danger has passed, only on Mobile Safari.
Fixed source:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin:0;
}
h1 {
background-color:red;
margin:0;
}
</style>
</head>
<body>
<h1>Top of page</h1>
<script>
// Fixes rdar://20598527 (http://openradar.appspot.com/radar?id=6113789778853888)
// Use and modify this code with no restriction whatsoever.
// Place just before closing body tag
var ua = window.navigator.userAgent;
var iOS = ua.match(/iPad/i) || ua.match(/iPhone/i);
var webkit = ua.match(/WebKit/i);
var chrome = ua.match(/CriOS/i);
var mobileSafari = iOS && webkit && !chrome;
if (mobileSafari) {
var duration = 500; // ms
var start = Date.now();
var id = setInterval(function() {
window.scrollTo(0, 1);
if (Date.now() - duration > start) {
clearInterval(id);
}
}, 10);
}
</script>
</body>
</html>
This problem only happen in Chrome 18Dev+.Version 17 don't.
The area where should be the pattern is filled with black color.
Here's the code, you can copy it and run it in chrome:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
<style type="text/css">
canvas{
display:block;
width:400px;
height:400px;
border:2px solid #000;
margin:100px auto;
}
</style>
</head>
<body>
<canvas id='c'></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var pic = new Image();
$(function(){
$(pic).load(function() {
var canvas = document.getElementById('c');
canvas.width = 400;
canvas.height = 400;
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = ctx.createPattern(pic, 'repeat');
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.arc(canvas.width*0.5, canvas.height*0.5, 165, 0, Math.PI*2, false);
ctx.fill();
}, 1000);
}
});
});
pic.src = 'https://www.google.com.hk/images/nav_logo105.png';
</script>
</body>
Oh I know this one.
I reported it back in January, its still broken in Chrome Dev. See the last comment there.
It turns out that the pattern will work the first time its drawn in a tab. Then you have to close the tab and make a new one for it to work again. Refreshing the page won't do it. It's a real pain.
I m embeding a pdf document into my html code. For this i have wrote this code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org
/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&navpanes=0&scrollbar=1&page=1&view=FitH">
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.</p>
</object>
</body>
</html>
But result is empty page on FF4 and IE9 embeds pdf file but its container is very small almost 30% of page. if I remove first line i.e DOCTYPE both browsers renders pdf file as it should.
Following code works fine.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&navpanes=0&scrollbar=1&page=1&view=FitH">
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.</p>
</object>
</body>
</html>
I want to use doctype in my page so that other pages work fine. Is there a way to fix first code that contains doctype?
This is basically #tXK's answer (+1), but with working (battle tested) code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: 0
}
</style>
</head>
<body>
<iframe src=""></iframe>
</body>
</html>
There are THREE ways to show a PDF in HTML: using embed, object, or iframe. Unfortunately using iframe will not allow the Adobe Javascript inside the PDF to post messages to the JS in HTML, because the hostContainer is undefined. Therefore I am forced to use embed or object. Fortunately thirtydot's style code also works great for object. Here is my working code...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
overflow: hidden;
}
object {
width: 100%;
height: 100%;
border: 0
}
</style>
<script language="javascript">
function handleMessage(msg) {
alert('got message '+msg);
}
function setupHandler() {
document.getElementById("myPdf").messageHandler = { onMessage: handleMessage };
}
</script>
</head>
<body onLoad="setupHandler();">
<object id="myPdf" type="application/pdf" data="file_with_actions.pdf">
Unable to open the PDF file.
</object>
</body>
</html>
You can read more about the Javascript stuff here.
I would try with an <iframe> element.
If not, maybe transforming it into flash and then embedding the flash.
Also, try <!doctype html> and see what it does, that's the standard doctype for HTML5
I'm making a page using the Google Maps API v3, similar to Google's example. I want the map to fill up the entire viewport, but when I set its width and height to 100%, it doesn't appear. Setting at least one dimension in px, though, makes it work. I'm using Firefox 3.5.6 and Internet Explorer 8. Now I want to get the page to work, but I'm also curious as to why on Earth this bug occurs.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Map</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
/* Using % instead of px breaks the map, I don't know why. */
height: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLon = new google.maps.LatLng(36, -111);
var myOptions = {
zoom: 7,
center: myLatLon,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
</script>
</head>
<body onload="initialize();">
<div id="map">Loading...</div>
</body>
</html>
Set the html, body styles too - use 100% height and width and 0 margin. Also add overflow:hidden to them (Think that fixes an IE bug).
Shameless plug: Checkout www.pinnspot.com ... I did that there.