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?
Related
I have created a webpage using HTML, CSS, JS (Paper.js)
But I want my webpage to be displayed only when opened in desktop sites
if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded
because in touch screen devices all functions does not work properly
link to my webpage is -
https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html
You could use JS to not display the div/tag if the page is less than a certain width
Something like this might do:
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message" style="display: none;">Please use this on a desktop.</p>
<script>
if (window.innerWidth < 500){
document.getElementById("demo").style.display = "none";
document.getElementById("message").style.display = "block";
}
</script>
You could also use CSS
<style>
#message {
display: none;
}
#media (max-width: 500px){
#demo {
display: none;
}
#message {
display: block;
}
}
</style>
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message">Please use this on a desktop.</p>
you can do this in bootstrap like this. The paragraph hides on mobile size if you want to hide it on tablet size too, change the "sm" to "md" to find out how to use it visit this link https://getbootstrap.com/docs/4.2/utilities/display/:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>title</title>
</head>
<body>
<div class="d-none d-sm-block">
<p>hide me on mobile</p>
</div>
<div class="d-block d-sm-none">
<p><strong>show me on mobile</strong></p>
</div>
</body>
</html>
add a
<script>
var userAgent;
(function() {
userAgent = navigator.userAgent.toLowerCase();
if (typeof orientation !== 'undefined' || userAgent.indexOf('mobile') >= 0); {
alert('open in desktop');
} else {
document.body.innerHTML = 'your HTML as a string here';
}
})();
</script>
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 (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?
If you run this code snippet you will see a button. If you click on it, it will rotate. I have the exact same code in Visual Studio (as you can see in the picture below). However, when i debug the code or press 'view in browser (Google Chrome)' it doesn't work at all.
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
body {
}
#rotate {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/css.css" />
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="rotate"></button>
</body>
</html>
Did you wrap your button binding inside $(document).ready(function () { });? That is not clear from your example because it works fine if it is.
Or place your javascript code beneath the button without the &(document).ready function, that also works because if it is above the button the browser will try to bind a button that does not exits yet.
<script>
$(document).ready(function () {
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
});
</script>
<style>
#rotate {
width: 100px;
height: 30px;
}
</style>
<button id="rotate" type="button">button</button>
OK, here's my issue and I bet it'll be super-easy for you (I guess it wasn't... lol).
So, let's say I'm having several divs. Once the user clicks on one of them, I want to highlight just this one. In a few words : a) remove (if exists) a specific class from all divs, b) add it to the div being clicked.
And here's the full code...
index.html
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
</div>
<script src="custom.js"></script>
</body>
</html>
custom.js
$(function() {
$("div").click( function() {
$("div").removeClass("msp-selected");
$(this).addClass("msp-selected");
});
});
custom.css
media screen and (orientation: portrait) {
.ui-mobile, .ui-mobile .ui-page {
min-height: 420px;
}
}
media screen and (orientation: landscape) {
.ui-mobile, .ui-mobile .ui-page {
min-height: 300px;
}
}
div {
outline:0;
}
div:hover {
outline-width:1px;
outline-color:red;
outline-style: dotted;
overflow:hidden;
}
.msp-selected {
outline-width:1px;
outline-color:red;
outline-style: solid;
}
P.S.
The situation may not be as simple as it initially seemed. I'm using jQuery 1.8.2 and jQuery Mobile 1.3.2. And the actual page is running inside a Webview, itself inside a Cocoa/OS X app. Quite complicated, huh? lol
I can't see any error (not easy to have access to a console that... doesn't exist...). The only thing that I noticed is that when I remove the removeClass part, it does work. Adding it, seems to make the whole thing a mess.
$(function() {
$('div').on( "click", function() {
$(this).addClass('msp-selected');
$(this).siblings().removeClass('msp-selected');
})
Try something like:
$(".box").click( function() {
if($(".activeBox").length > 0) { //check if there is an activeBox element
$(".activeBox").removeClass("activeBox"); //if there is, remove it
}
$(this).addClass("activeBox"); //make the clicked div the activeBox
});
.box and .activeBox classes to be replaced by your own inactive and active selectors as you want.
Here's a jsFiddle example
Update:
With the new HTML, I got this working as a jsFiddle
Here's the code:
HTML within jsFiddle's existing head/body tags:
<div data-role="page">
</div>
CSS from OP:
div {
outline:0;
}
div:hover {
outline-width:1px;
outline-color:red;
outline-style: dotted;
overflow:hidden;
}
.msp-selected {
outline-width:1px;
outline-color:red;
outline-style: solid;
}
jQuery:
$("div").click( function() {
if($(".msp-selected").length > 0) {
$(".msp-selected").removeClass("msp-selected");
}
$(this).addClass("msp-selected");
});
I tested this with the various versions of jQuery available back to 1.7.2 and mobile 1.1.1, with the class being added on click each time. My only suggestion if this still doesn't work is to encase the whole thing in $(document).ready( function() { //click function }); or switch to $("div").on("click", function() {});