I've got a test page with the following line of HTML5 Media Capture code (and nothing else other than a form submit button):
<input type=file accept=image/* id=capture capture=camera>
On an iPhone 4s with ios 8.1.2 the code only works sometimes. It launches the Take Photo/Photo Library dialog successfully, but it does not reliably accept a new photo image (from the phone camera) for upload. More often than not Safari displays an error message 'something has gone wrong with this page and it has been re-loaded'. Generally, if I clear the cache, close Safari and re-launch, it works again, once or twice, and then fails. Once it has failed, it doesn't seem ever to succeed again without re-launching.
It's not clear if this is a buffer issue, or is even related to the file size of the new photo, but given that it does work sometimes, it doesn't appear to be an error in the code or an incompatibility with the OS/browser.
Anyone experience anything similar? Any suggestions how to make this work?
Thanks
The Problem:
I found out the reason for this happening in Safari/iOS is that the main page seems to be "throttled" somehow which means that if the page is a bit heavy CPU/GPU and/or (?) memory wise the <input capture="camera" ...> fails randomly most of the times.
A solution:
My solution on this was to place the <input capture="camera" ...> inside of an <iframe>, sized to fit the input seamlessly. This works because each frame is running in its own process, yet on lower priority than main frame but enough to not be a problem here. It works 100% of the time for me now even in a pretty heavy UI app using a lot of GPU.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#camera-button {
display: inline-block;
width: 100px;
height: 100px;
background: red;
border: 5px solid #eee;
padding: 10px;
z-index: 2147483647;
}
#camera-frame {
width: 100px;
height: 100px;
background-color: transparent;
opacity: 0;
}
</style>
</head>
<body>
<span id="camera">
<iframe id="camera-frame" src="camera.html" scrolling="no" frameBorder="0" allowTransparency="true" seamless>
</span>
<script>
(function() {
window.onCameraChanged = function(event) {
var files;
console.log("[index.html]: snap!", arguments);
if (event.target) {
files = event.target.files;
console.log("[index.html]: files", files);
alert("[index.html]:", files.length, "files from camera.");
}
};
}).call(this);
</script>
</body>
</html>
camera.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#camera-input {
display: block;
width: 100%;
height: 100%;
position: absolute;
outline: none;
box-shadow: none;
border: none;
}
</style>
</head>
<body>
<input id="camera-input" type="file" capture="camera" accept="image/*" onchange="window.onCameraChanged">
<script>
(function() {
var el;
window.onCameraChanged = function(event) {
var files;
console.log("[camera.html]: snap!", arguments);
if (event.target) {
files = event.target.files;
if (window.parent) {
if (typeof window.parent.onCameraChanged === 'function') {
window.parent.onCameraChanged(event);
}
return window.parent.cameraFiles = files;
}
}
if (el = document.querySelector('#camera')) {
el.onchange = window.onCameraChanged; // chrome
}
}).call(this);
</script>
</body>
</html>
Something like that.
I will offer this as a tentative solution insomuch as it has not yet failed, but I'm not sure why it's required. When clicking the button to capture an image, the first thing I do now is this:
$('#capture').val('');
That clears the form before adding a new image. I tried reset(), but that didn't work. It would appear therefore that there is an issue with changing the image in the form once it has been added - it needs to be removed first, not simply overwritten.
Related
Someone I know was browsing the web and every time they opened a new tab it opened a completely blank homepage with the ability to type freely onto the newly opened page. Whatever they ended up typing they would press Enter and it would search just as if they had typed it in the Browsers address bar.
I asked them how they did that and they provided me with this code:
html { overflow:hidden; } I tried to emulate what they did by saving that as an html file and opening it with my browser but it would just open to a completely blank page and I didn't have the ability to type anything. So I think that when they gave me the code it was cutoff because of a character limit in the chat that we were using. Would anyone know how to finish this to be able to do what I described they did. I would like to replicate it for myself every time I open a new tab.
Thank you to anyone that can help!
You just need a text input the size of the entire page, and when you press enter, the window location should just be the content of the text input.
For a URL search
var text = document.getElementById("text");
document.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
window.location = "https://" + text.value;
}
});
html
{
padding:0;
margin: 0;
overflow:hidden;
}
textarea
{
outline: none;
border:none;
resize: none;
width: 100vw;
height: 100vh;
}
<html>
<textarea autofocus id="text"></textarea>
</html>
For a Google search
document.getElementById("search").addEventListener( "keypress", function( event ){
if( event.keyCode === 13 )
{
event.preventDefault();
window.location = "https://google.com/search?q=" + encodeURI( this.value );
}
})
html,body {
padding: 0;
margin: 0;
overflow:hidden;
}
#search {
width: 100vw;
height: 100vh;
border: none;
outline: none;
font-size: 30px;
text-align: center;
}
<html>
<head>
<title></title>
</head>
<body>
<input id = "search" autofocus>
</body>
</html>
First of all I checked already this, this, this, this, this, this and this. And they don't seem to be a duplicate of my problem exactly.
I have a web app, generated by Google Script. In my Code.gs, inside my doGet(e) function, I have a routing mechanism for handling different webpages, which I simplified below in a if else statement block. The doGet(e) returns different pages based on the URL, meaning, if the URL ends in ?v=page1 it returns page1.html, if it ends in ?v=about it returns about.html, and so on. It all works fine if I type the whole thing in the Address URL space in the browser.
Now, my home.html has a menu with hyperlinks for those pages. The pages open fine if I click on the links, as long as the default target is _top.
Now, my problem is: I put an iframe below the menu so all the pages would open in the same home. They failed with error below:
Load denied by X-Frame-Options: “SAMEORIGIN” from
“https://script.google.com/macros/s/AKfycbz80HBBQPcs-sYm9CsVNT7iyeBQjySR1FXN0TmgjKc/dev?v=page1”,
site does not permit cross-origin framing from
“https://n-72ap4753yyujkagtmqc7xoskf2cznnrfk23rzbq-0lu-script.googleusercontent.com/blank”.
I figured the reason would be the app was not published yet, so I publish the app and started returning page1.html with .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL). Now the error is:
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin
provided
(‘https://n-72ap4753yyujkagtmqc7xoskf2cznnrfk23rzbq-0lu-script.googleusercontent.com’)
does not match the recipient window’s origin
(‘https://script.google.com’).
The error seems to be related to the page hitting another address in googleusercontent.com and that could be causing the issue?
The home page:
As you can see below in my home.html, there are 3 links:
iframes opens the wikipedia article about HTML/Iframes in the iframe of my home.html, just fine.
Page1 should open my page1.html in my home.html iframe section, but that is where the error takes place.
about open the about.html as another page, on _top of everything, so it works fine. But as soon as the iframe issue is solved I will change the target for that one to open in the iframe as well.
My files are as below:
Code.gs:
function doGet(e) {
Logger.log(e.parameters.v);
if (e.parameters.v == "page1") {
return HtmlService.createTemplateFromFile("page1").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
} else if (e.parameters.v == "about") {
return HtmlService.createTemplateFromFile("about").evaluate();
} else
return HtmlService.createTemplateFromFile("home").evaluate();
}
home.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#nav-wrapper {
background-color: bisque;
padding: 8px;
}
#img-logo {
height: 2%;
width: 2%
}
#nav {
display: inline-block;
list-style-type: none;
}
#nav > li {
display: inline-block;
padding: 0 24px 0 0;
}
#nav > li > a {
padding: 8px;
text-decoration: none;
outline: 0;
}
#nav > li > a:link, a:visited {
color: DarkSlateGray;
}
#nav > li > a:hover {
background-color: GoldenRod;
border-radius: 8px;
box-shadow: 4px 4px grey;
}
#iframePages {
width: 100%;
height: 800px;
overflow: scroll;
border: none;
}
</style>
</head>
<body>
<?
var url = ScriptApp.getService().getUrl();
var imgLogo = "https://png2.cleanpng.com/sh/e2fa53a06dccb65dbd183cfa6b13c455/L0KzQYm3VsIzN5dmj5H0aYP2gLBuTgRpbV5rfd9qbHWwcsPoif4ucKZyedC2YoLkebA0kP9tgZh0hp9xdX3kfn7vhfFlNaF0hOtwb37kfH75ifZtcZ9sRadrMnTkRoPsWPJkQJI2RqU8OEa3Q4q4UcUzQWg2UKU6OEW6Qoe1kP5o/kisspng-the-female-brain-human-brain-polygon-human-head-polygonal-rifling-5b2da62e8bc8a1.3386439115297183185726.png";
?>
<script>
var url=<?= url ?>;
console.log(url);
</script>
<nav>
<div id="nav-wrapper">
<img id="img-logo" src="<?= imgLogo ?>">
<ul id="nav">
<li>IFrames</li>
<li>Page1</li>
<li>About</li>
</ul>
</div>
</nav>
<iframe id="iframePages" name="iframePages"></iframe>
</body>
</html>
page1.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Page 1</h1>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>About</h1>
</body>
</html>
the URL:
https://script.google.com/macros/s/AKfycbxBBaGG_rZl1jAuNqDzL8O9un7bfn9Qm_cfA_nAjMxE1w-dl2U/exec
Error image:
Error in the console. Frame on the left hand side is empty.
Please keep in mind this is a simplified version of my full app which is providing the same behavior so I could share.
Can anyone please shed some light on this?
I am using chrome version 18.0.1025.162 m
I have html file with iframe within it.
i cant change the containing page or its css (main.htm)
i can only change the iframe (show.htm) and its css.
The problem is that when i scroll down and then scroll back up then the adminbar div get replicated several time.
I am attaching 2 screenshots the first one is the screen before scrolling and i also add the code so that the bug can be reproduced.
I think it may be a bug in chrome, i am not sure.
I would like to know if it is a a bug and more importantly if there is a work around by only changing the iframe and that it does not include removing the background color from the iframe.
(removing the background color from the iframe solve the issue but i need the background color)
so this is how it looks:
before scrolling:
after scrolling (admin bar get replicated on screen)
now code to reproduce the bug in chrome
first file - main.htm (i cannot change this code)
<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar
{
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
}
#body-content
{
float: left;
width: 100%;
}
</style>
</head>
<body >
<div id="body-content">
<iframe src="show.htm" width="100%" height="943"></iframe>
<div id="adminbar" class="" role="navigation">
</div>
</div>
</body>
</html>
and the show.htm
<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>
i think i found a workaround.
i created a file background.png which has one pixel with the color i want (#e0e0e0).
i then replace this:
body
{
background: #e0e0e0;
}
with this:
body
{
background: #e0e0e0 url(background.png) repeat-x;
background-attachment: fixed;
}
Add -webkit-transform: translate3d(0,0,0); to your body-content CSS
CSS
#body-content {
float: left;
width: 100%;
-webkit-transform: translate3d(0,0,0);
}
This seems to force Chrome to use your GPU and smooth out the rendering issue.
UPDATE: Since you can't change main.htm, what about changing the background color of show.htm to a background image of the same color? I tested this and it worked. Is that a possibility?
I recreated your setup and then added a script to the body of show.htm. As a quick measure I added a name="if1" to the <iframe /> in main.htm, but you could always find a handle on the element without using an explicitly assigned name.
It seems to solve the issue for the dummy setup that you provided, if and only if main.htm is scrolled all the way to the top. Think it's weird, join the club! See if this works for the real thing... Either way, it may just be a nudge in the right direction! :)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _parentScale = parent.document.body.style.webkitTransform;
parent.document.body.style.webkitTransform = _parentScale;
}
</script>
</body>
</html>
I also tried to experiment with the following until it became bed-time!
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _parent = parent.document.body;
_parent.style.webkitTransform = _parent.style.webkitTransform;
_parent.style.display=_parent.style.display;
_parent.offsetHeight
//_parent.style.display='block';
}
parent.window.onscroll = function(){
console.log("But. You're in my spot!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _child = parent.document.if1.document.body;
_child.style.webkitTransform = _child.style.webkitTransform;
_child.style.display=_child.style.display;
_child.offsetHeight
//_child.style.display='block';
}
</script>
I also attempted to apply j08691's answer, using the following script, but it gave slightly unexpected results. I caused the absolute positioned top bar, to not be fixed, among other things!
window.onload = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
var test = parent.document.getElementById("body-content");
test.style.webkitTransform = "translate3d(0,0,0)";
}
One may already exist, but if not, could you file this as a bug report on the relevent projects?
Improving / simplifying yossi's answer:
body
{
background:url('bg.png');
}
no need to declare bg-color or repeat-x, just needs a background image.
Tested on Chrome 18.0.1025.168, Mac OS X 10.6.8.
Remove the float: left; from your #body-content css and it will work just fine.
This looks to be a rendering bug in chrome. If you scroll back up really slowly, you'll notice that you get a solid colour from your admin bar as the colour of your iframe.
Incidentally chrome on OSX renders exactly the same.
#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}
It would help to get a live-demo/version of your actual website to do more thorough testing and sort the bug out.
In any case, I was able to reproduce the bug and then fix it (kind of):
Here's the 'show' css:
body
{
background: #e0e0e0;
height:100%;
width:100%;
z-index:9999;
position:fixed;
}
and Here's the link to my test page:
sotkra.com/t_main.html
last but not least, yes it is a bug and it caused by the flickering of the scrolling of the iframe content against the actual 'base' document. I've seen similar issues before but there was equally no documentation about it. They're just rendering bugs, usually caused by less than specific css or very very odd cases where it's nobody's fault save the browser's.
Cheers
G
Using a gradient as your background image also works. This is preferable for me, because I don't have to create an image file and it doesn't generate an extra request on the client side.
body {
background: #FFF -webkit-linear-gradient(top, #FFF, #FFF) repeat-x;
background-attachment: fixed;
}
First, I have been here How to make HTML Text unselectable
But that doesn't solve my issue, (the JavaScript version works well, but I need to make it using HTML and CSS, I cannot use JavaScript) I used the recommended CSS, but look at my DEMO drag the mouse from [drag from here] to [to here] you will see that the text is still selectable.
any way to make it really unselectable?
Thanks
You can use CSS like this:
CSS
.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
For older IE versions, the issue usually is harder to deal with, but you can use a behavior:
CSS
.unselectable {
behavior: url(ieUserSelectFix.htc);
}
and the behavior file "ieUserSelectFix.htc":
<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="stopSelection()" />
<script type="text/javascript">
<!--
function stopSelection() {
element.onselectstart = function() { return(false); };
element.setAttribute('unselectable', 'on', 0);
}
//-->
</script>
</public:component>
With Javascript you can:
yourElement.onselectstart = function() { return(false); };
After reviewing this problem, Came to mind another method to prevent the user from selecting text while viewing the page, basically, setting up a mask over the target text:
Your Fiddle updated here!
Example:
CSS
.wrapTxt {
position: relative;
}
.wrapTxt .mask {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML
<p class="wrapTxt">
This is my text! My text is mine and no one Else's!
<span class="mask"></span>
</p>
The principle here is simple (Fiddle), have a block element over the text, occupying all of it's wrapper space.
The downfall is a hard implementation if you need one line to be selectable and the next one not. Also, links on the "not selectable" text will not me available.
Final note:
The user can always go around this, either by looking at the source code, or by dragging the mouse from top to bottom of the webpage.
try something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable /Prevent Text Selection jQuery-JavaScript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Begin:
// Jquery Function to Disable Text Selection
(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
// EO Jquery Function
// Usage
// Load Jquery min .js ignore if already done so
// $("element to disable text").disableTextSelect();
// $("element to Enable text").enableTextSelect();
//
jQuery(function($) {
$("body").disableTextSelect();
$("#code").mouseover(function(){
$("body").enableTextSelect();
});
$("#code").mouseout(function(){
// Code for Deselect Text When Mouseout the Code Area
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
$("body").disableTextSelect();
});
});
</script>
<style type="text/css">
<!--
body {
margin-left: 10px;
margin-top: 10px;
}
#code
{
padding:20px;
border:2px dashed #CCC;
font-family:"Courier New", Courier, monospace;
font-size:15px;
background-color:#EEE;
}
-->
</style>
</head>
<body>
<h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
<p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
<p id="code">
$(".elementsToDisableSelectFor").disableTextSelect();</p>
<p>When you are leaving above code box selection was deselected! If selected !</p>
</body>
</html>
check jsfiddle output:
http://jsfiddle.net/bHafB/
EDIT:
This is a cross-browser method for preventing text selection using an unselectable="on" element attribute.
<!DOCTYPE html>
<html>
<head>
<title>Unselectable Text</title>
<style type="text/css">
[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
</style>
</head>
<body id="doc">
<p unselectable="on">For example, the text in this paragraph
cannot be selected.
For example, the text in this paragraph
cannot be selected
For example, the text in this paragraph
cannot be selected</p>
</body>
</html>
Overlay full transparent text:
<div style="position:absolute;left: 1;top:1;z-index:1;font-size: 10pt;color: rgb(0, 0, 0);">highline me</div><br/><div style="position:absolute;left: 0;top:0;;z-index:2;font-size: 20pt;color: rgba(0, 0, 0, 0);">*********</div>
How can I make my iframe fill the window and not display any scrollbars?
This works for IE6, I would like to get it to work for all browsers if possible:
<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
<iframe id="iframe1" name="iframe1" frameborder="0"
src="theSiteToShow.html"></iframe>
Your frame margins should be set in the body of theSiteToShow.html.
UPDATE
Following your comment, I used the following as a test page:
<html>
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body>
</html>
Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.
I was having the same issues with the scroll bars as well as the No Context Menu showing up, even though all these elements had been disabled. After a few days of trying to solve them, I stumbled on this post, which helped a bit, but led me onto finding a post on flexible webplayers with three code examples. Here're the links:
http://virtualplayground.d2.pl/?p=367#comment-224
Download package
Use the index file if you want a blank sheet to work from, replace your existing code in your exported .html file (from Unity export), replace the 'unityObject.embedUnity' link with your own link to your .html file located on your server.
To embed the player in your page using an iframe add:
Lock and load.
Hope this helps.
^_^