I have chart.js. It looks good when it is with a smaller size, but I have implemented also a fullscreen option to the chart.
It opens as expected, but the quality of the chart when on fullscreen is poor as it just resizes the small map to fullscreen.
Any idea how to call the chart again in a bigger size when opening on fullscreen?
This is the JS I am using to open the fullscreen
function toggleFullscreen(elem) {
var elem = document.getElementById("canvas");
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.getElementById('fs-doc-button').addEventListener('click', function () {
toggleFullscreen('#canvas');
});
document.getElementById('W').addEventListener('click', function () {
toggleFullscreen(this);
});
And this is the canvas holding the chart
<div class="chart-container">
<canvas id='canvas' style='background-color:white;width: 100%;'></canvas>
</div>
And this it the button I am opening it with
<button id='fs-doc-button'>Fullscreen</button>
The only thing I can think is creating a new hidden canvas with bigger chart size and opening it fullscreen, but sounds quite dirty to me:)
So, wondering I can combine somehow the two ideas.
Related
I have a video that if you press a button it becomes fullscreen. I need help making the video fullscreen automatically when the device is in landscape orientation. I have tried many ways but none have worked.
Here is my code:
var elem = document.getElementById("video");
function becomeFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
}
<video id="video" width="600" height="800">
<source src="videoplaceholder.mp4" />
</video>
<button id="button" onclick="becomeFullscreen()">Fullscreen</button>
You need to check the window.orientation property inside the orientationChange handler. Inside the event handler of orientationChange event, check the window.screen.orientation property. If it's landscape make video fullscreen.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
Add below code in your Javascript
window.addEventListener("orientationchange", function(event) {
var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
if ( ["landscape-primary","landscape-secondary"].indexOf(orientation)!=-1) {
becomeFullscreen();
}
else if (orientation === undefined) {
console.log("The orientation API isn't supported in this browser :(");
}
});
How to open a web page using auto full screen mode?
I am looking for a solution to open an web page automatically in full screen mode, when page is loaded.
At this moment I can do it when I clicked a button.
<body onload="myFunction()">
<h1>Screen Orientation Lock Demo</h1>
<button class="lock">Lock</button>
<textarea></textarea>
</body>
var fullscreen = {
request: function(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
},
};
$('.lock').on('click', function() {
fullscreen.request(this.parentNode);
});
function myFunction() {
fullscreen.request(this.parentNode);
}
As per documentation:
This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.
So, the requestFullScreen method should be called after a user interaction with the page or on orientation change.
When a video is played in fullscreen mode I want to exit fullscreen when the video has ended. I have this working on desktop and android, but not on my iPad (v10.3.2)
The code to exit fullscreen looks like this
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
None of these function exists on my iPad when it tries to exit when the video has ended.
Here is the code which triggers fullscreen:
if (screen.requestFullscreen) {
screen.requestFullscreen();
} else if (screen.mozRequestFullScreen) {
screen.mozRequestFullScreen();
} else if (screen.msRequestFullscreen) {
screen.msRequestFullscreen();
} else if (screen.webkitRequestFullscreen) {
screen.webkitRequestFullscreen((<any>Element).ALLOW_KEYBOARD_INPUT);
} else {
if (this.videoRef.nativeElement.webkitSupportsFullscreen) {
this.videoRef.nativeElement.webkitEnterFullscreen();
}
}
Any suggestion why this fails on my iPad?
Well you can do this with jQuery
$('video').get(0).webkitExitFullscreen();
and you can read more about the documentation of this method over here
https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1629468-webkitexitfullscreen
and how to use it at mozilla developer zone over here
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
I have got a HTML5 video tag on my page, there you can toggle fullscreen. When I'm pressing my fullscreen button, it's ok. Video is going on fullscreen.
I'm initiating fullscreen by:
var mediaElement = document.getElementById('videoAbout');
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(iOS) {
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();
}
else {
if(mediaElement.requestFullScreen) {
mediaElement.requestFullScreen();
}
else if(mediaElement.webkitRequestFullScreen) {
mediaElement.webkitRequestFullScreen();
}
else if(mediaElement.mozRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
else if(mediaElement.msRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
}
To exit from fullscreen i was trying to use:
var mediaElement = document.getElementById('videoAbout');
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(iOS) {
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();
}
else {
if(mediaElement.requestFullScreen) {
mediaElement.exitFullScreen();
}
else if(mediaElement.webkitRequestFullScreen) {
mediaElement.webkitExitFullScreen();
}
else if(mediaElement.mozRequestFullScreen) {
mediaElement.mozExitFullScreen();
}
else if(mediaElement.msRequestFullScreen) {
mediaElement.mozExitFullScreen();
}
}
Same with CancelFullScreen(), I was trying to add this to else if statement everything is not working. Console says that the function is not exists (CancelFullScreen or ExitFullScreen).
So here is my question, how to exit from fullscreen HTML5 video? I prefer not to use plugins.
I have my own HTML5 video player and my problem is I can't enter Fullscreen on Android Stock Browser (tested on Huawei ascend mate, htc desire, galaxy s2/s3). It works on another browsers(Chrome, Safari etc). I opened Youtube with Android stock browser and there no problems with this option. I noticed there isn't youtube player, but another standart player.
window.onload=function(){
var video = document.getElementById("video-player");
function enterFullscreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
return false;
}
var rF = document.getElementById("fullscreen-btn");
rF.addEventListener("click", function() {
enterFullscreen();
});
};
<video id="video-player" width="640" height="390" src="video.mp4" controls></video>
<button id="fullscreen-btn" type="button">Fullcsreen</button>