Webview in Chrome Packaged App - webview

I'm currently developing a Chrome Packaged App and I'm using webviews, however I'm not having success at hidding the scroll bar on said webviews. I've tried using the overflow tag with no success.
Any help would be appretiated.

Try this:
var appWin = null;
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'main.html',
{bounds: {width: 800, height: 400}},
function(win) {
appWin = win;
win.onBoundsChanged.addListener(onBoundsChanged);
onBoundsChanged();
}
);
}
function onBoundsChanged() {
var bounds = chrome.app.window.current.getBounds();
var webview = appWin.contentWindow.document.getElementById("#my_webview");
webview.style.height = bounds.height + 'px';
webview.style.width = bounds.width + 'px';
}
Obviously, if your window is fixed size (resizable: false), you don't need to define an onBoundsChanged handler: you can adjust your webview size directly in the chrome.app.window.create() callback using the hardcoded dimensions you've specified for your window.

This is what I did to remove the webview's scrollbar when embedded inside Packaged Chrome App:
<html lang="en" style="overflow:hidden">
Edit: This code lives inside the page that the webview references - not the code inside your packaged chrome app.

Related

getUserMedia() in apache cordova? Any alternative?

I need some cordova plugin or function, which can stream video from device camera on ios. GetUserMedia is not supported on iOS.
I tryied Crosswalk project, it should support WebRTC (getUserMedia), but it doesnt work on phonegap build.
So I tryied cordova-camera-preview, but I am not able to make it fullscreen, because camera stream is shrinked.
Is there anybody, who used fullscreen video in cordova application?
<script>
document.addEventListener("deviceready", function () {
app_ready();
}, false);
function app_ready() {
var vw = window.innerWidth;
var vh = window.innerHeight;
var tapEnabled = true; //enable tap take picture
var dragEnabled = true; //enable preview box drag across the screen
var toBack = true; //send preview box to the back of the webview
var rect = {x: 0, y: 0, width: vw, height: vh};
cordova.plugins.camerapreview.startCamera(rect, "front", tapEnabled, dragEnabled, toBack);
}
</script>
After deep searching I found out some augmented reality plugin called "ezAR videooverlay", check out npm -> https://www.npmjs.com/package/com.ezartech.ezar.videooverlay
Hope it helps someone

Webview autoheight to content is not working on iOS (Appcelerator Titanium)

I want to add webview which height would be as it content. I make it running smoothly on Android but on iOS the longer the text is the longer space below text is.
Here is my code:
var window = Ti.UI.createWindow();
var scrollView = Ti.UI.createScrollView({
layout: 'vertical',
height: Ti.UI.SIZE
});
var view1 = Ti.UI.createView({
height: 200,
backgroundColor: 'red'
});
var webview = Ti.UI.createWebView({
height: Ti.UI.SIZE,
html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body style="margin:0; background-color: blue">Some page some text2</body></html>'
});
var view2 = Ti.UI.createView({
height: 200,
backgroundColor: 'green'
});
scrollView.add(view1);
scrollView.add(webview);
scrollView.add(view2);
window.add(scrollView);
window.open();
Thanks in advance.
The webview doesn't know the size of the content. But you can ASK the webview how high the content is.
For this you need to use evalJS.
Use the JS found on StackOverflow:
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
and preferably put this in a function inside the webview. Lets say the above Javascript is in function getDocumentHeight and that function returns the height property. Now, to get the height use eval like this:
var height = webview.evalJS('getDocumentHeight()');
webview.height = height;
Now, you want this to execute every time the content is loaded, assuming the content changes, so in that case you can watch the load event (doc here) and trigger the evalJS above every time this event is fired.
It will not be very pretty, as the webview is not intended to scale like this, but it works.
It seems it's a bug / discouraged method for iOS. No direct workaround. Can be checked here:
Jira Ticket about problem with iOS 9,
Jira Ticket about problem with webView + ScrollView

Mobile Safari not showing CSS transform rotateX and rotateY only rotateZ

This is weird. I'm playing with device orientation but can't seem to get rotateX and rotateY to work in Safari (iOS 8.0.2).
But! if I save it to my home screen with apple-web-app-capable meta tag it works fine.
This is my script:
$( document ).ready(function() {
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(e) {
var alpha = e.alpha;
var beta = e.beta;
var gamma = e.gamma;
$('#z').val(Math.round(alpha)); // Z
$('#x').val(Math.round(beta)); // X
$('#y').val(Math.round(gamma)); // Y
document.getElementById("box").style.webkitTransform="rotateZ("+Math.round(-alpha)+"deg) rotateX("+Math.round(beta)+"deg) rotateY("+Math.round(-gamma)+"deg)";
}
});
you can see it here live (on your iPhone): http://kohlin.net/matte/orientation.html
Then try saving it to your home screen.
Any clues? A bug?
This is a bug in ios Safari browser.
To fix this, surround the box div with another tag. Then move the css:
-webkit-perspective: 500px;
to the containing div. This should make the rotating box visible.

SSRS Reportviewer in MVC, removing iframe scrollbars by auto-sizing iframe to fit report

I have pieced together information on eliminating iframe scrollbars in favour of the browser scroll bars when rendering a reportviewer in an iframe. MVC does not support rendering a report viewer in a view, hence the need for an iframe.
Edit: i struggled to find this solution (below) hence i thought i would share.
In the aspx page (the page that will be rendered in the iframe)
$(function () {//jQuery document.ready
// attach an event handler, whenever a 'property' of the reportviewer changes, the function will be called to adjust the height of the iframe
Sys.Application.add_load(function () {
$find("ReportViewer").add_propertyChanged(viewerPropertyChanged); // $.find("ReportViewer") will return the reportviewer with id "ReportViewer"
});
function adjustIframeSize() {
// you can play around with these figures until your report is perfect
var extraHeightToAvoidCuttingOffPartOfReport = 100;
var extraWidthToAvoidCuttingOffPartOfReport = 10;
// '#ReportViewer_fixedTable' is a portion of the report viewer that contains the actual report, minus the parameters etc
var reportPage = $('#ReportViewer_fixedTable');
// get the height of the report. '#ParametersRowReportViewer' is that top part that contains parameters etc
var newHeight = reportPage.height() + $('#ParametersRowReportViewer').height() + extraHeightToAvoidCuttingOffPartOfReport;
// same for width
var newWidth = reportPage.width() + extraWidthToAvoidCuttingOffPartOfReport;
// get iframe from parent document, the rest of this function only works if both the iframe and the parent page are on the same domain
var reportIframe = $('#ReportViewerFrame', parent.document);
// just make sure that nothing went wrong with the calculations, other wise the entire report could be given a very small value for height and width, thereby hiding the report
if(newHeight>extraHeightToAvoidCuttingOffPartOfReport)
reportIframe.height(newHeight);
if (newWidth > extraWidthToAvoidCuttingOffPartOfReport)
reportIframe.width(newWidth);
}
function viewerPropertyChanged(sender, e) {
// only change the iframe dimensions when 'isLoading'
if (e.get_propertyName() == "isLoading") {
if (!$find("ReportViewer").get_isLoading()) {
adjustIframeSize();
}
}
};
});
Solved a similar problem using a set of extensions in ReportViewer for MVC.
#Html.ReportViewer(
ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer,
new { scrolling = "no" })

QML + Meego + webview failes to click anything on any website

I have been trying many "solutions" the last 5 days to try and "turn on" clicking in a QML webview object, and I can still not seem to click on any link, on any page.
I am embedding paypal checkout page, and probably it is something very simple I have missed. I tried an empty page with only webview and no options at all but width + height + javascripts (and without js), and I tried below code (and plenty of other stuff), still no clicks. Tried asking on IRC and got response back that "it should always be possible to click, even with the most basic webview setup". I have in the below code changed url from the one containing a real ap-key to just the dev login page, but the problem is the same, regardless if its google.com of paypal or any other site.
Please, anyone know how I can click on anything? I can not click forms either, get a keyboard to popup to fill out forms, or any click.
I am running QML + PySide on Meego platform. I load the below page/rectangle in a Loader object from my main.qml.
Any help would be extremely appreciated.
Note: I did ask same Q on qt-developer network but got no response yet. Trying here, this forums is more populated, so hoping that someone with experience about this problem will read (I noticed I am not the only one with these problems that just "should work").
import QtQuick 1.1
import QtWebKit 1.1
import com.nokia.meego 1.1
Rectangle {
Image {
id: background
source: "./images/bg.png"
anchors.fill: parent
Text {
id: logo
text: "My Fancy Logo"
x: 2
y: 2
font.pixelSize: 24
font.bold: true
font.italic: true
color: "white"
style: Text.Raised
styleColor: "black"
smooth: true
}
Rectangle {
id: rect
x: 0
y: 60
width: background.width
height: background.height - 70
Flickable {
id: flickable
width: parent.width
height: parent.height
contentWidth: Math.max(parent.width,webView.width)
contentHeight: Math.max(parent.height,webView.height)
flickableDirection: Flickable.HorizontalAndVerticalFlick
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
boundsBehavior: Flickable.DragOverBounds
clip:true
pressDelay: 200
WebView {
id: webView
settings.javascriptEnabled: true
settings.pluginsEnabled: true
url: "https://developer.paypal.com/"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
transformOrigin: Item.Top
smooth: false
focus: true
preferredWidth: flickable.width
preferredHeight: flickable.height
PinchArea {
id: pinchArea
property real minScale: 1.0
anchors.fill: parent
property real lastScale: 1.0
pinch.target: webView
pinch.minimumScale: minScale
pinch.maximumScale: 3.0
onPinchFinished: {
flickable.returnToBounds();
flickable.contentWidth = (flickable.width + flickable.width) * webView.scale;
flickable.contentHeight = (flickable.height + flickable.height) * webView.scale;
}
}
}
}
}
}
}
In your QML markup the PinchArea element is a child of the WebView and thus gets the mouse/touch press events before the WebView. If you move the PinchArea "behind" the WebView in the element hierarchy the links will become clickable (except the three below the login box, because they try to open new browser windows).

Resources