i want to add to my css
the fullscreen check, similar to this below :
#media all and (display-mode: fullscreen) {
body {
background-color: red;
}
}
this example has taken from here:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/display-mode
I would need it to work on Chrome mobile Android, but as of today, I'm trying but it doesn't work, although it is compatible, on other mobile browsers(Edge or Samsung browser) it works.
Note: to launch Fullscreen on browser i use something like :
function fullScreenMode() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen();
requestFullScreen.call(docEl);
}
then fullScreenMode() via debug on Chrome:inspect on console,
Related
When the website I wrote is opened in the mobile browser, I want a warning at the top: Open in the mobile application.
How can I do that?
You can do this by simply running through a list of devices and checking if the useragent matches anything like so:
function detectMob() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
I am developing a website for a client, which contains a few videos, you can see it at this adress : https://clad.web.epfprojets-sceaux.com/index.php
The problem is about the 100% width video, not the 3 first.
To make videos go fullscreen on laptop, I use :
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
It appears it doesn't work when I browse the site from my iPhone 8 on google chrome.
Can someone help me find how to fix this problem please ?
I added zooming="true" inside the tag but when the page is loaded I cannot zoom to increase or decrease the view. I've also set webkitallowfullscreen mozallowfullscreen allowfullscreen to scale the page in order to fit the device screen but nothing changed and the page is still cut.
To explain this concept a little better I take for example Android native apps. Now, if you want to load a page from the web you use a WebView and the result is exactly like using an iframe on Ionic. But on android things become simpler regarding customization:
webview.getSettings().setBuiltInZoomControls(true);
to enable pinch-to-zoom, and
webview.getSettings().setUseWideViewPort(true);
to fit and scale the web page depending on the size of the (mobile) screen.
Now, using Windows 10 it's not possible for me to build native iOS apps so I have to rely on cross-platform development.
Here's my detail-page:
html:
<ion-content>
<iframe sandbox class="link" frameborder="0" [src]="webPage()" zooming="true" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</ion-content>
scss:
detail-page {
.scroll-content{
padding: 0px ;
}
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
iframe.link {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
}
ts:
webPage() {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent);
}
Hope you can help me.
Edit
I added document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%'; but I'm getting a Typescript error:
Typescript Error
Property 'contentWindow' does not exist on type 'NodeListOf<HTMLIFrameElement>'.
Here's my whole .ts file:
export class DetailPage {
entry:any = [];
constructor(private sanitizer: DomSanitizer, public nav: NavController, navParams:NavParams) {
console.log('run');
this.nav = nav;
this.entry = navParams.get('selectedEntry');
console.log('My entry is: "'+ this.entry.getElementsByTagName('title')[0].textContent + '"');
document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';
}
webPage() {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent);
}
}
Edit 2
After adding id="myframe" inside <iframe> I've also tried with the function ngAfterViewInit() but still no changes there.
ngAfterViewInit() {
var x = document.getElementById("myframe");
var y = (<HTMLIFrameElement> x).contentWindow.document;
y.body.style.zoom = "50%";
}
And in this form too:
ngAfterViewInit() {
var iframe:HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('myframe');
var iWindow = (<HTMLIFrameElement>iframe).contentWindow.document;
iWindow.body.style.zoom = "50%";
}
I think it is not possible to do in a IFrame as that will be a security flaw.
what you are basically doing is trying to access a webpage from your mobile hybrid app (Ionic App in your case).
it must not allow you to run javascript on that webpage, workaround for it will be by disabling web security on that browser or in your case webview (not sure how to do that in mobile but that is manual browser customization so will not work in your scenario).
more explanation on this post
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
You will need to track the gesture and apply the change of zoom to the iframe like this
document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';
Here the zoom is set to 50%, but this can be added dynamically using the gesture event values.
My website currently has a width too high to be viewed at 800x600 resolution or lower. What I would like to do is to create some kind of warning message, so when someone with a resolution this low they are made aware that the site will not view properly. Preferably, I would like a yellow bar to drop down from the top much like Internet Explorer does.
How can I do this by using HTML and CSS? If you can't, please tell me how to do it in any other language.
Thanks
.yellowbar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 30px;
background: yellow; /* Use a better color */
/* and so on... */
}
#media screen and (max-width: 799px), screen and (max-height: 599px) {
.yellowbar { display: block; }
}
Do note however: older versions of IE do not support media queries.
If you want to use jQuery, you can use the following:
var $window = $(window), $bar = $('.yellowbar');
$window.resize(function me () {
var small = $window.height() < 600 || $window.width() < 800;
$bar.css('display', small ? 'block' : 'none');
return me;
}());
This'll obviously work even in older versions of IE.
Don't check for a resolution, check for a viewport size. Browser windows can be resized.
Get the browser viewport dimensions with JavaScript should get you started. Output the HTML you want if the viewport is too small.
I would use Javascript or JQuery rather for this.
var width = $(window).width();
var height = $(window).height();
if (width < 800 || height < 600) {
alert("Your monitor is from the dark ages.");
}
Though I think the answer maybe in this other question's answer concerning the pdf specification, is it possible to not display the adobe acrobat toolbars in an embedded pdf document?
If you use any browser besides Firefox browser, then the following code will embed a PDF file without any toolbars:
<embed
src="http://URL_TO_PDF.com/pdf.pdf#toolbar=0&navpanes=0&scrollbar=0"
width="425" height="425" />
Please note that this does not work on Firefox
See the Web Designer's Guide blog post for details.
See the full list of embedded tag parameters for more information.
You can use #toolbar to hide above toolbar.. if toolbar =0, it will disable it.. when toolbar=1, this will enable it.. hope so it will work. this works for me
<embed src="filename.pdf#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="path/filename.pdf#toolbar=1" width="500" height="375"> (Enable toolbar
There is no guarantee that using #toolbar=0 in the URL will work, as this is exclusive to browsers that use the Adobe viewer, it may be that other viewers even have similar parameters to maintain compatibility, but certainly not everyone follows that, such as browsers for MacOS browsers or Linux.
In most browsers it is possible to change the view, which also probably will not work with #toolbar=0, because the viewer is something apart from the browser, for example Firefox has its own viewer internally and that does not work with this #toolbar=0, see the result of:
<iframe
src="sample.pdf#toolbar=0"
width="900"
height="200"
></iframe>
<br>
<embed type="application/pdf"
src="sample.pdf#toolbar=0"
width="900"
height="200"
>
And even if it works in Firefox as well as Chrome with extensions, it is possible to change the PDF viewer to anything else that may not support this parameter.
Even if you can remove all the buttons you want, you can still copy your PDF, or images, because everything is downloaded to your computer before rendering, the user can simply press F12 to open DevTools (Chrome / Firefox), look the network tab and filter it to get all PDFs loaded on the current page and by DevTools it will copy the PDF to any folder of it.
There is no way to stop, it is only possible to hinder. As already seen neither "iframe" nor "embed" will solve, I suggest (it's just a suggestion) use PDF.js.
So you can create your own buttons, navigation and the like and everything will run in <canvas>, example:
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5,
canvas = document.getElementById('pdf-example'),
ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').textContent = num;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* show previous page
*/
function onPrevPage() {
if (pageNum > 1) {
pageNum--;
queueRenderPage(pageNum);
}
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* show next page
*/
function onNextPage() {
if (pageNum < pdfDoc.numPages) {
pageNum++;
queueRenderPage(pageNum);
}
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* PDF async "download".
*/
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
//Set loaded PDF to main pdfDoc variable
pdfDoc = pdfDoc_;
//Show number of pages in document
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
#pdf-example {
border: 1px solid black;
}
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<div>
<button id="prev">Previous page</button>
<button id="next">Next page</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="pdf-example"></canvas>
Note that I used 1.5 to scale:
scale = 1.5,
...
var viewport = page.getViewport({scale: scale});
You can change this as needed. I recommend that you adjust it according to the view-port measurement (you can use window.innerWidth to calculate), but also make a minimum measurement, so it will be adaptive to different resolutions.
This works for me for hiding the pdf print view in react application
<iframe src={`${resumeUrl}#toolbar=0`} width="100%" height={500} />