I'm working with WebView on Xamarin Forms 1.4.2
The problem I have seems to be a binding issue. But I'm not sure why this happens.
In my OnAppearing() event, I fetch data from SQLite Local Database and fill it into the WebView.
The content of webview is not been shown the first time the page loads.
I have a ListView under the WebView. On selecting any item in the listview the content of webview shows.
Has anyone experience this? Is there a work around?
i bind my webview directly to a HTML string :
webview.Source = new HtmlWebViewSource
{
Html = #"<html>
<head>
<meta name='viewport' content='width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>
</head>
<body height='100%'>"
+ htmlstring
+ #"</body>
</html>"
};
This is because of your line
<meta name='viewport' content='width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>
Correct it, or for now remove it and check after removing.
I've tried the following example and it works for me.
Depending on what you do in the OnAppearing you may have to wrap the update using Xamarin.Forms.Device.BeginInvokeOnMainThread(()=>{...});. I've included it, commented out, in the example below:-
XAML:-
<StackLayout>
<WebView x:Name="webView1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Button x:Name="cmdLoadTestHtml1" Text="Load Test Html 1" Clicked="cmdLoadTestHtml1_Clicked"/>
</StackLayout>
Code Behind:-
protected override void OnAppearing()
{
base.OnAppearing();
//
LoadTestHtml("OnAppearing....");
//
// Alternatively try this:-
//Xamarin.Forms.Device.BeginInvokeOnMainThread(() =>
// {
// LoadTestHtml("OnAppearing.");
// });
}
void cmdLoadTestHtml1_Clicked(object sender, EventArgs e)
{
LoadTestHtml("Button clicked");
}
void LoadTestHtml(string pstrSomeInnerContentToDisplay)
{
webView1.Source = new HtmlWebViewSource
{
Html = #"<html>
<head>
<meta name='viewport' content='width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>
</head>
<body height='100%'>"
+ pstrSomeInnerContentToDisplay
+ #"</body>
</html>"
};
}
Related
I have created a SAP UI5 Popover using Fragment. The fragment has XML code for opening the popover window.
My requirement is that when the popover is open and when the mouse pointer goes outside the popver (not mouse click outside), then the popover should close automatically.
Please help me with this.
You can use so called "Event Delegates".
See this little Demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.f"
data-sap-ui-theme='sap_fiori_3'></script>
<script>
var btn = new sap.m.Link({
text:'Hello World',
press: function(evt){
var pop = new sap.m.Popover({
title: "MyPopOver",
placement: "Bottom",
contentWidth: "200px",
content: [new sap.m.Text({text: "My Text"})]
})
pop.addEventDelegate({
onmouseout: function() {
pop.close()
}
}, this);
pop.openBy(evt.getSource());
}
});
btn.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Beware, this one already closes, if you touch a text inside the popup, but you'll get the generell idea.
we are making an HTML5 app where width is not know at design time.
So we change the viewport tag at runtime to match the desidered size.
e.g.
<meta name="viewport" id="viewport-meta" content="width=' + params.mobilePortraitWidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The problem on iOS is that after we change the viewport size, view is not correctly scaled until we double tap the screen.
EDIT, after double tap is all fine, so: how can we "DOUBLE TAP" programmatically?
Thank you very much
NSString *js = #"var t=document.createElement('meta'); t.name="viewport"; t.content="initial-scale=1.0, maximum-scale=3.0"; document.getElementsByTagName('head')[0].appendChild(t);";
[myWebView stringByEvaluatingJavaScriptFromString:js];
EDIT
Thanks for update.
I had very similar issue and remember that setting viewport meta tag solved it.
If you are trying to modify this meta tag just after loading html, try doing that in webViewDidFinishLoad (loadRequest is asynchronous).
Another solution would be to read your html file into NSString and replace that meta tag before loading it to webView.
Hope it helps!
Thank you very much for your replies, I would like to share the solution we found after some test on iPhone 5s with iOS 9.2 and iPad Air with iOS 8.4.
Basically, to make it work, we didn't set initial-scale=1.0, maximum-scale=1.0, user-scalable=no
Following a working example
<html>
<head>
<meta name="viewport" id="viewport-meta" content="width=device-width, user-scalable=no" />
<style>
html, body { -webkit-text-size-adjust: 100%; }
h1 { padding: 1em; background-color: #FF80BB; }
</style>
</head>
<body>
<h1>I am the page content</h1>
<button id="s320">Set 320</button><br />
<button id="s640">Set 640</button><br />
<button id="s960">Set 960</button>
<script>
function setViewportWidth(newWidth) {
var m = document.getElementById("viewport-meta");
m.setAttribute('content', 'width=' + newWidth + ', user-scalable=no');
}
document.getElementById("s320").onclick = function () { return setViewportWidth(320); };
document.getElementById("s640").onclick = function () { return setViewportWidth(640); };
document.getElementById("s960").onclick = function () { return setViewportWidth(960); };
</script>
</body>
</html>
I am trying to use video.js(gitHub link - https://github.com/videojs/video.js ) plugin in my jquery mobile project to get custom video player, I followed all the documentation from this site (http://videojs.com/), but due to some reasons I am getting following errors -
The element or ID supplied is not valid. (videojs).
this[a] is not a function.
My code -
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Js/jquery.js"></script>
<script src="Js/jquery.signalR-2.1.2.min.js"></script>
<script src="Js/jquery.mobile-1.4.5.js"></script>
<link href="mcss/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script type="text/javascript">
videojs("Mobile_VIDEO_1").ready(function () {
var vid = this;
vid.on("ended", function () {
alert("is");
$("#videoListXYZ").css("display", "block");
});
});
</script>
</head>
<body>
<div data-role="page" id="p-forget-password">
<div data-role="main" class="ui-content ui-body-cf ui-responsive">
<!-- inserted dyanamically using handlebars template "http://handlebarsjs.com"/ -->
<video id="Mobile_VIDEO_1" class="video-js vjs-default-skin" controls data-id="{{VideoId}}" data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "360" } } }' autoplay="autoplay" width="340" height="250">
<source src="{{Path}}" type="video/mp4" data-res="360" />
</video>
</div>
</div>
</body>
Please help me to find out what I am doing wrong.
-I tried using putting videojs(xyx).ready(....) inside document.ready
- I also tried sending my script at the bottom of my page as suggested by (http://help.videojs.com/discussions/problems/985-api-ready-call-fails), but it still not working
After many hit and trial, I realized that my event is firing much before the DOM initialization, so I searched for how to check when the whole page is fully loaded and I come across this document (https://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/) from this link I used this
$(window).bind("load", function() {
// code here
});
to check if my page is fully loaded or not . my final solution is mentioned below , if any of you come across a better solution then please share that to help others.
$(window).bind("load", function () {
var videoPath = $('#sv1').attr('src'); //to get the path of video
if (videoPath != "" && videoPath != null) { //checking for non-empty path
console.log(videoPath);
videojs('MY_VIDEO_1', { "plugins": { "resolutionSelector": { "default_res": "360" } } }, function () {
console.log('Good to go!');
this.play();
this.on('ended', function () {
console.log('awww...over so soon?');
$("#videoList").css("display", "block");
});
});
$("#replay").click(function () {
var myPlayer = videojs("MY_VIDEO_1");
myPlayer.play();
});
}
});
I am currently in the process of building an iOS app with ngCordova and Ionic. Part of the specification includes being able to access/play mp3 files stored inside the applications 'www' folder.
After experimenting I have been able to play a music file from an external URL, however when trying to use a locally stored mp3 I am having problems.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="editor">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Editor</h1>
</ion-header-bar>
<ion-content ng-controller="MusicController">
<button class="button" ng-click="play('www/elvis.mp3')">Play</button>
</ion-content>
</ion-pane>
</body>
</html>
And here is the Controller/App:
var editorApp = angular.module('editor', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
editorApp.controller("MusicController", function($scope, $cordovaMedia) {
$scope.play = function(src) {
var filePath = cordova.file.applicationDirectory + src;
var iOSPlayOptions = {
numberOfLoops: 2,
playAudioWhenScreenIsLocked : false
};
var media = $cordovaMedia.newMedia(filePath);
media.play(iOSPlayOptions);
};
});
When I "cordova build ios" and run this on a phone in xCode I get the following error:
2015-04-23 11:59:43.619 IonicProject[1487:375698] Unknown resource
'file:///private/var/mobile/Containers/Bundle/Application/FB22B00F-9020-46C9-BBA2-674009BD84F7/IonicProject.app/www/elvis.mp3'
You can use the direct audio tag for iOS app in ionic and no need to do these thing (these are required for Android app). Just write the following code:
HTML Code
<div ng-bind-html="audioCall()"></div>
Controller Code
$scope.audioCall = function () {
if ($scope.audioUrl) {
return $sce.trustAsHtml("<audio controls> <source src='" + $scope.audioUrl + "' type='audio/mpeg'/></audio>");
} else {
return "";
}
};
On my jQuery Mobile project I'm using the following code:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
I'm getting the Safari browser address bar and nav footer. How can I hide those so I can just have my app showing?
You can setup a few meta tags to tell iOS that your site can be added to the Home Screen as a web app. Once launched from there, all of the Safari elements are hidden.
Check out the section titled "Hiding Safari User Interface Components" here.
You can specify start up splash screen images and custom icons for the app as it appears on the home screen.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-startup-image" href="apple-touch-startup-image-320x460.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="apple-touch-startup-image-768x1004.png" />
You should not need a <meta> tag. jQuery mobile should take care of hiding the address bar on iOS. Never been able to get the nav footer disappear myself.
Rob,
try adding below script. This should do the trick of opening new request in the same window
<script type="text/javascript">
window.onload = function () {
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
if (a[i].className.match("noeffect")) {
// Does nothing
}
else {
a[i].onclick = function () {
window.location = this.getAttribute("href");
return false;
};
}
}
};
</script>