Showing Image in full screen - using JavaScript/HTML5 - javascript

I have an image on a web page. When I click on it, it should display full screen.
I have the following code:
<!doctype html>
<html>
<head>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Click Image to display Full Screen...</br>
<img id="theImage" style="width:400px; height:auto;" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
Problem I am facing - In full screen mode:
The image displays in small size (i.e same as the size on browser page), not its original size - on all browsers.
In IE - The image is not centered, it shows up on left side of the full screen (why not centered?). In Chrome - it is centered - as desired.

So, found the solution after some trial...
The solution is in the style section:
- width, height, margin are set to 'auto',
- but also marked as '!important' - this allows you to override the inline styling of the image on the webpage - when in fullscreen mode.
<!doctype html>
<html>
<head>
<style>
.fullscreen:-webkit-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-moz-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-ms-fullscreen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
</style>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Hello Image...</br>
<img id="theImage" style="width:400px; height:auto;" class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>

Related

javascript - Google Maps Full Screen Button Not Working ( Non-google maps app )

As shown below, beides the '+' icon is the full screen button.
When clicked on it, it does not go full screen.
I tried basic jQuery :
$("#fullScreen-btn").css({height: 100%, width: 100%});
This does not seem to work.
I need it to work like we press F11 on browsers, it must go full screen on mobile (not the google maps app)
Can anyone help me out here ?
In order to make a Mobile Browser visible in full screen mode, you should use the requestFullscreen()
Add an event listener to the button dynamically when it gets loaded as
button.addEventListener("click",function(){
document.body.requestFullscreen();
});
Or
button.addEventListener("click",function(){
document.documentElement.requestFullscreen();
});
Works for Chrome for android.
Also many browser for Computers also have this ability.
Read more on MDN
Your jQuery needs correction - you missed the quotes, try this:
$("#fullScreen-elm").css({"height": "100%", "width": "100%"});
and moreover you need to update this css for the screen element you want to resize and not the fullscreen button.
And yes, Element.requestFullscreen() is definitely an other option refer MDN
Try this. I calculated the height separately to achieve the results. Tested in android device.
$(document).ready(function() {
let height = $(document).height();
$('.fullscreen').on('click', function() {
$('iframe').css({
height: height,
width: '100%'
});
});
});
body {
margin: 0;
padding: 0;
}
.fullscreen {
position: absolute;
top: 10px;
right: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423283.3363121453!2d-118.69191670818714!3d34.020750397391296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2srw!4v1499159650271"
width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="container">
<input type="button" name="fullscreen" value="fullscreen" class="fullscreen" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
You can activate full screen mode using JavaScript without jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Test</title>
</head>
<body id="body">
<h1>test</h1>
<script>
var elem = document.getElementById("body");
elem.onclick = function() {
req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
req.call(elem);
}
</script>
</body>
</html>
One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action1 (e.g. on page load).
Here is a cross browser function to toggle full screen mode (as obtained from the MDN):
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.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();
}
}
}
For more information, check out the MDN page on full screen APIs.
If you need a plugin that supports versions of IE prior to IE11 (IE8-10), take a look at jQuery.fullscreen. IE did not support this feature natively until IE11.

Is there any ways to open my web application in full screen in ASP.Net MVC without any user interaction

Is there any ways to open my web application in full screen (as like press F11) in ASP.Net MVC without any user interaction.
I am using below codes but this not working on page load time, this is working when user action in page.
But I need to open my web page in full screen when page is loaded.
Below code is working on click event but not working on page load.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:-ms-fullscreen {
background: red;
width: 100%;
}
html:fullscreen {
background: red;
}
</style>
</head>
<body style="background:white;">
<button id="btn">Fullscreen</button>
<div id="test" style="width:512px; height:100px; background-color:#000000;" >
<span>this is test</span>
</div>
<script>
$(document).ready(function () {
var canvas = document.getElementById('test');
fullScreen(canvas);
});
function fullScreen(element) {
if (element.requestFullScreen) {
console.log("1");
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
console.log("2");
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
console.log("3");
element.mozRequestFullScreen();
}
}
</script>
</body>
</html>
Please suggest how can we done it?

Change logo image based on screen resolution of the browser

I have two images, one with the logo in black and one with the logo in white. I would like to have the white logo when the browser is less than 768px width and black logo when it's bigger. I tried something but is not changing in real time, only if I reload the page.
$(function() {
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
});
Any suggestion? Thank you
https://api.jquery.com/resize/
You are correctly checking for the window's width, but you are only doing it when the page first loads in!
Instead, use the resize function to run a script every time the screen is resized
$(window).on("resize", function(){
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
})
though this sounds more like a job for css media queries, though we don't about all your needs and requirements :)
You can do it just with css and media queries.
img {
width: 400px;
content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
#media screen and (max-width: 768px) {
img {
content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
}
}
<img alt="">
I have a pure JavaScript solution
document.getElementsByTagName("BODY")[0].onresize = function() {
if (window.outerWidth < 768) {
document.getElementById("img").src = yourFirstImage.png;
} else {
document.getElementById("img").src = yourSecondImage.png;
}
}
If you have the vector version of logo, make an imgname.SVG then change color using css. (SVG is scalable vector graphics and lmage will be of good quality)
HTML
<div class="logo"> <img src="images/imagename.svg"> </div>
CSS
#media only screen and (max-width: 768px) {
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}
Here is the most simple solution, using CSS3 media queries,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>media queries</title>
<style>
#media screen and (max-width: 780px) {
body {
background-image: url("/images/Trin-02.png");
}
}
#media screen and (min-width: 780px) {
body {
background-image: url("/images/Trin-01.png");
}
}
</style>
</head>
<body>
</body>
</html>
So, u can have image acc. to device you are using
There is no need to target the image multiple times. Save a reference once, use it multiple times.
Create a callback function for the resize event and bind it. That way you can also call the callback function to set the right image on init.
var image = $('.logo').find("img");
function setImage() {
var windowWidth = window.innerWidth,
src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();
https://jsfiddle.net/0nxdpdp6/1/

HTML5 full-screen doesn't work when set inside a timer

I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).

Place popup at bottom of screen (NOT at bottom of browser window)

my question is. How to alace a popup window at bottom of screen (NOT at bottom of browser window)?
Which property do I use for that?
Properties of the screen are in window.screen and it contains data for the availHeight and availWidth amongst others.
https://developer.mozilla.org/en-US/docs/DOM/window.screen
As an example of how to use these to open a popup window at the bottom right of the screen: http://jsfiddle.net/steveukx/56XG6/
###Webkit-Notifications?
If you are looking for Webkit Notifications, then, use something like this:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Desktop Notifications</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function checkNotifications() {
if (window.webkitNotifications)
alert("Notifications are supported!");
else
alert("Notifications are not supported for this Browser/OS version yet.");
}
function createNotificationInstance(options) {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
if (options.notificationType == 'simple') {
return window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...');
} else if (options.notificationType == 'html') {
return window.webkitNotifications.createHTMLNotification('http://localhost/');
}
} else {
window.webkitNotifications.requestPermission();
}
}
</script>
<style type="text/css">
* {font-family: Verdana, sans-serif;}
body {font-size: 10pt; margin: 0; padding: 0;}
p {margin: 5px;}
a {color: #09f; text-decoration: none;}
a:hover {color: #f00;}
</style>
</head>
<body>
<p><strong>Desktop Notifications</strong></p>
<p>Lets see how the notifications work in this browser.</p>
<p>
Check Notification Support.
Next Check Notification Permissions
and if permissions are not there,
Request Permissions.
Create a
Simple Notification
or
HTML Notification.
</p>
</body>
<script type="text/javascript">
document.querySelector("#html").addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) {
createNotificationInstance({ notificationType: 'html' });
} else {
window.webkitNotifications.requestPermission();
}
}, false);
document.querySelector("#text").addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) {
createNotificationInstance({ notificationType: 'simple' }).show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
</script>
</html>
###Screenshot
(source: akamai.net)
Note: This works only in Chrome and other WebKit based browsers... For more info, see Can I use Web Notifications?

Categories

Resources