I'm using a webview in an app to display externally hosted content, but the web view lets the user zoom with a pinch gesture and I'd like to disable this.
I can't find any such property on the webview itself, and I've not had any success with a viewport meta tag such as:
<meta name="viewport" content="user-scalable=no">
Is there a way to do this?
I was able to disable pinch and zoom in Windows 8.1 WebView using following in CSS:
html, body
{
-ms-content-zooming:none;
}
There's a long list stuff try:
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
Unfortunately this is not possible.
http://social.msdn.microsoft.com/Forums/en-AU/winappswithcsharp/thread/8eecf85d-ebd3-4bc0-ad17-15f342efad25
If the WebView works similarly to the WP7 version then you may be able to catch the events in html and cancel them there similarly to this.
If you'd like to disable pinch zooming from your C# code, you can use InvokeScriptAsync to inject the -ms-content-zooming:none style as follows:
private void WebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
if (!args.IsSuccess) return;
DisablePinchZoom(sender);
}
private static void DisablePinchZoom(WebView webView)
{
string[] args = {"document.body.style['-ms-content-zooming']='none';"};
webView.InvokeScriptAsync("eval", args);
}
Source: https://social.msdn.microsoft.com/Forums/vstudio/en-US/61fa3676-9420-4239-a6d6-b327153884c8/how-do-i-arrange-multiple-webviews-in-a-scrolling-stack-panel?forum=w81prevwCsharp
And if you want to disable the Ctrl + '+/-' or Ctrl + MouseWheel zoom, you can place the Webview inside a ScrollViewer and set ZoomMode="Disabled":
<ScrollViewer ZoomMode="Disabled">
<WebView NavigationCompleted="WebView_NavigationCompleted" />
</ScrollViewer>
I used this code, and finally got it to work.
html, body
{
-ms-content-zooming:none;
touch-action: none;
content-zooming: none;
overflow-y: hidden; // hide vertical
overflow-x: hidden;
overflow-y: none; // hide vertical
overflow-x: none;
}
Just put a
<Rectangle Fill="Transparent"/>
over the webview and that is it.
Related
new to ASP.net core, how do I add background colour to the page using the cshtml? I am using the automatically generated page but this is invariable white with black text and it doesn't seem to like the use of inline.
In .net core application,there is a default layout in shared/_layout.cshtml.And each view will use the layout.And in _layout.cshtml,we often reference site.css in <head></head>.So if you want to change the background color of all the pages,you can change the style in site.css.Also, you can change the style in _layout.cshtml by.
For example,I change the background color of body:
In site.css:
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
background-color:red;
}
In _layout.cshtml:
<style>
body {
background-color:red;
}
</style>
Result:
You could also do something like...
<body style="background-color:red">
I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?
I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}
The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations
I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .
CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: absolute !important;
}
In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).
I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
I'm a bit of a noob to ionic so this may be a dumb question.
On the press of a button I want to overlay my entire app with a black image (or make everything invisible) but still have the buttons working underneath.
My app is based on the tab sample app.
So far I've tried the following
app.scss
.dark-overlay {
background-color: #000 !important;
opacity: 1;
}
my-tab.html
<ion-content class="dark-overlay" (ng-hide)="showOverlay">
....
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div>
my-tab.ts
stealthMode () {
this.myElements = document.querySelectorAll("dark-overlay");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
}
Even if i can get this to work it's not going to be the final answer as setting the opacity in app.scss to 0 still leaves the tabbar visible but I need that to go black too.
I think it's related to property binding.
Any ideas?
Thanks
you need to use pointer-events to let events go through your dark overlay.
I have demonstrated that in this Plunkr (go to second tab which shows home page)
style.css
.dark-overlay{
position:absolute;
width:100%;
height:100%;
background-color:#888;
opacity:0.9;
top:0px;
left:0px;
z-index:1000;
pointer-events: none;
}
and have this in home.html
<button (click)="stealthMode()">Tint</button>
<div class="dark-overlay" [hidden]="showOverlay"></div>
and this in home.ts
showOverlay:boolean = false;
stealthMode(){
this.showOverlay = !this.showOverlay;
}
You can make a binding to render that part dynamically using angular directives.
Check this for clean implementation:
ngIF
I made a vertical carousel which consists of images that when clicked should be visible fullscreen. But the problem is i'm not able to figure out how to make sure the fullscreen images are preloaded or something and works like the thumbnail images(getting preloaded).
I'm not sure what approach to follow for preloading the fullscreen images using css background and how to make sure the images fadeIn or just some transition when i click on the thumbnail in the carousel.
Please have a look at the following link where my code is uploaded.
http://www.lluvia.me/slideshow/carousel.html
If its convenient,feel free to check the script by checking the source.
Help would be appreciated. Thanks!
Found this post and figured it might help you, Preloading images with jQuery
Try and post some of the code in your body for future reference. :)
Quick and easy:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Or, if you want a jQuery plugin:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
Alternatively, if you want to stick purely with CSS check out this page: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ You can just have the background image be positioned off screen then come on screen when needed.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
I am trying to do a images gallery for mobile webkit,
The only way it is actually fast enough is using the hardware accelerated translateX .
My problem is that the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div
You can see an example here, in the callback events section:
http://position-absolute.com/jqtouch/demos/main/#home
.slideGalLeft {
-webkit-animation-name: slideColis;
}
#-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
Do not use webkit animation for this as it comes back to the default values once played.
Instead define
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly
Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).
According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%) translateZ(0);
}
Follow Guillaume's advice beyond that.
Use:
-webkit-animation-fill-mode: none/backwards/forwards/both;
This allows you to define at what end of your animation the element remains when the animation is finished.
I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:
.paused {
-webkit-animation-play-state: paused;
}
.hiddendiv {
display:none;
}
Then in your jQuery code:
$('div.sideimage').click(
function () {
$(this).removeClass("paused").delay(2000).queue(
function(next) {
$(this).addClass("hiddendiv");
next();
}
);
}
);
Should work!