I have a newbie React Native question. I am trying to use a WebView within a React View class but I am unable to get rid of the selection menu. I don't know if "selection menu" is the correct term, but it shows up when I press and hold down the mouse/finger.
I have tried browsing directly to the HTML page on an iPhone, and the "menu" does not pop up there.
React Native class:
var React = require('react-native');
var {
WebView
} = React;
var TestWebView = React.createClass({
render: function() {
return (
<WebView url="http://url/index.html" />
);
}
});
module.exports = TestWebView;
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
body {
background: pink;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent; /* mobile webkit */
}
</style>
</head>
<body>
</body>
</html>
The result:
If I remove the second styling block, I get the following result:
So it seems the styling has some effect but it does not completely remove it.
Any ideas?
I'm using React Native 0.11.4.
Related
I have a webview in my UWP application, that shows some text. Some of the text is clickable (). I have tried adding the following CSS and including that in the HTML, but it does not seem to work.
a:hover {
color: red;
}
Does webview support hover in a UWP application? I have been unable to find any information regarding this.
EDIT:
Here is the HTML.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: 'Segoe UI';
font-size: 10pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #FFFFFF;
}
.link:hover {
background-color: red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
</head>
<body>
<a class='link'>
<div>
<div class='linenumber'>1</div>
Alpha
</div>
</a>
<a class='link'>
<div>
<div class='linenumber'>2</div>
Beta
</div>
</a>
<script type='text/javascript'>
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
</script>
</body>
</html>
}
UWP Webview: CSS :hover support?
UWP Webview support css :hover tag, you could place style in the html like the following. and load html with ms-appx-web uri scheme.
Html
<!DOCTYPE html>
<style>
a:hover{
color:red;
}
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Html</title>
</head>
<body>
<a href="https://www.google.com" >Click Me</a>
</body>
</html>
Xaml
<Grid>
<WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>
Update
<style>
body {
font-family: 'Segoe UI';
font-size: 18pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #000000;
}
.link:hover{
color:red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
I would like the view port on Safari mobile to prevent horizontal scrolling and also hide any horizontal overflow content. The reason being is that I have some animations on a website that move content off screen. As a work-around I can perhaps not animate but I would like to get it working on mobile.
When viewed on an iPhone 6 using Safari the code below allows horizontal scrolling and still shows the overflow content.
I see four posts on the subject but the suggestions for use of overflow: hidden are not working.
overflow-x: hidden, is not working in safari
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
Mobile Safari Viewport - Preventing Horizontal Scrolling?
Hiding the scrollbar on an HTML page
Place this code in index.html on a server so the page can be viewed on an iPhone:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
<style>
html {
overflow-x: hidden;
}
body {
background-color: black;
overflow-x: hidden;
}
#content {
width: 100%;
overflow-x: hidden;
}
.tagline {
color: white;
font-size: 1.8em;
font-style: italic;
position: absolute;
white-space: nowrap;
overflow-x: hidden;
top: 10%;
left: 80%; /* This position is off screen on purpose */
}
</style>
</head>
<body>
<div id="content">
<span class="tagline">Testing span reaching outside edge of window on mobile</span>
</div>
</body>
</html>
If you position:fixed; the #content it would prevent it from scrolling:
#content {
width: 100%;
overflow-x: hidden;
height: 100%;
position: fixed;
}
I have the following code but this doesn't work. I expect a local html file to be loaded by ajax call it doesnot work as expected. It simply displays 'hello how are you' whilst it should have displayed contents from another html file.
Here is the following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<style>
#element_to_pop_up {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.b-close {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
</style>
</head>
<body>
...
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
Hello. wow. How are you?
</div>
...
<script>
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
; (function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function (e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
content: 'iframe', //'ajax', 'iframe' or 'image'
contentContainer: '.content',
loadUrl: '1.html'
});
});
});
})(jQuery);
</script>
</body>
</html>
You do not have a Container with the class name "content".
This should work:
<div id="element_to_pop_up" class="content">
Hello. wow. How are you?
</div>
So far, I can only attach it to body by default, or if I specify div, the famous-dom-renderer is attached to the first div it finds. How can I set the selector according to class, or id?
var scene = FamousEngine.createScene('the div I am targeting');
Any DOM selector (string) value can be passed to the FamousEngine.createScene method.
var scene = FamousEngine.createScene('body');
If no argument is passed to the FamousEngine.createScene method, then it will default to the body DOM element (same as above).
var scene = FamousEngine.createScene();
Using the following HTML, any of the following would be valid.
var scene = FamousEngine.createScene('#top');
var scene = FamousEngine.createScene('.top');
var scene = FamousEngine.createScene('#bottom');
var scene = FamousEngine.createScene('.bottom');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: black;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
.top {
color: white;
height: 50%;
}
.bottom {
color: white;
height: 50%;
}
</style>
</head>
<body>
<div id="top" class="top">This is the top DOM element</div>
<div id="bottom" class="bottom">This is the bottom DOM element</div>
</body>
</html>
Use the snippet below to test the above code.
// Famous dependencies
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var clock = FamousEngine.getClock();
// Initialize with a scene; then, add a 'node' to the scene root
var scene = FamousEngine.createScene('#bottom');
var node = scene.addChild();
node.addUIEvent('load');
var myComponent = {
onReceive: function(event, payload) {
console.log(
'Received ' + event + ' event!',
payload
);
if (event === 'load') {
payload.node.requestUpdate(spinner);
}
}
};
node.addComponent(myComponent);
// Create an [image] DOM element providing the logo 'node' with the 'src' path
var el = new DOMElement(node, {
tagName: 'img'
})
.setAttribute('src', 'http://staging.famous.org/examples/images/famous-logo.svg');
// Chainable API
node
// Set size mode to 'absolute' to use absolute pixel values: (width 250px, height 250px)
.setSizeMode('absolute', 'absolute', 'absolute')
.setAbsoluteSize(50, 50)
// Center the 'node' to the parent (the screen, in this instance)
.setAlign(0.5, 0.5)
// Set the translational origin to the center of the 'node'
.setMountPoint(0.5, 0.5, 0.5)
// Set the rotational origin to the center of the 'node'
.setOrigin(0.5, 0.5);
// Add a spinner component to the logo 'node' that is called, every frame
var spinner = node.addComponent({
onUpdate: function(time) {
node.setRotation(0, time / 500, 0);
node.requestUpdateOnNextTick(spinner);
}
});
// Let the magic begin...
node.requestUpdate(spinner);
FamousEngine.init();
// To set perspective
var camera = new Camera(scene);
camera.setDepth(1000);
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: black;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
.top {
color: white;
height: 50%;
}
.bottom {
color: white;
height: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</head>
<body>
<div id="top" class="top">This is the top DOM element</div>
<div id="bottom" class="bottom">This is the bottom DOM element</div>
</body>
</html>
Well the next thing I tried worked, so here's the answer: set an id for the div you are targeting create the scene like this:
<div id="scene-target"></div>
var scene = FamousEngine.createScene('#scene-target');
(I have been reading up on the topic of iOS mobile safari and how it displays some positioning and css styles differently.)
I am still trying to solve the issue which is having the background content to take up the entire display height on the iPad, I was hoping to achieve the same style as I have for the desktop and when I shrink the browser to tablet view. Instead the content just has a 100% width.
The background content has it's own tags. I am using media queries so that on mobile there is no background content and temporarily I have turned tablet display to none. If I turn display to block, I find I can shrink the browser and the background video or image takes up the entire height matching the top-section but On iOS it does not. -
Any comments or advice will be much appreciated.
meta data:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
HTML:
<div class="top-section">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/screentest1.webmhd.webm" type="video/webm">
<source src="videos/screentest1.mp4" type="video/mp4"> Video not supported
</video>
<div id="video_pattern">
</video>
</DIV>
</div>
CSS:
#video_background {
display: none;
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
#video_pattern { background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari */
background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* Standard syntax */;
position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 1; }
.top-section{
background-size: cover;
background-repeat: repeat;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 2;
text-align: center;
padding: 0;}
I think it's a bug, I can't get right 100% height by CSS.
window.innerHeight is the most reliable way to get the real viewport height.
Here is my hack to reset viewport height.
It's in closure and no dependent.
(function(){
var setViewportHeight = (function(){
function debounced(){
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}
var cancelable = null;
return function(){
cancelable && clearTimeout(cancelable);
cancelable = setTimeout(debounced, 100);
};
})();
// ipad safari
if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
window.addEventListener("resize", setViewportHeight, false);
window.addEventListener("scroll", setViewportHeight, false);
window.addEventListener("orientationchange", setViewportHeight, false);
setViewportHeight();
}
})();
If we could see this live it would be helpful but you may need to apply styles to your body and html tags. Like this fiddle:
http://jsfiddle.net/Davidicus/2eaaP/
try adding
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Im pretty sure that iOS will force all video to play in the default player so there is no fix for you there yet.