I'm having a problem with my mobile/tablet device orientation.
So i'm trying to show a div when the device is held in landscape, but not when it's held in portrait. It works when i reload the site in portrait and turn it to landscape, but if i refresh in landscape, then the div dosen't show anymore?
my Js.
window.addEventListener("orientationchange", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
if(window.innerWidth > window.innerHeight){
$('#rotate').css({display: "block"});
}else{
$('#rotate').css({display: "none"});
}
}
}, false);
my Css
#media only screen and (max-width:768px){
#rotate{
width:100vw;
height:100vh;
z-index:1000;
position:fixed;
top:0;
left:0;
display:none;
background-color:#F8F8F8;
}
}
Hope sombody can help me! Thanks
If you can use only JavaScript this solutions seems to be more elegant and works every time the page is refreshed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script type="text/javascript">
function rotate(){
if (screen.width <= 768) { // do this if the screen is under 768px
if (window.innerHeight < window.innerWidth) { // landscape mode
document.getElementById("rotate").style.display='block';
}
else { // portrait mode
document.getElementById("rotate").style.display='none';
}
}
}
</script>
<style type="text/css">
#rotate{
width:100vw;
height:100vh;
z-index:1000;
position:fixed;
top:0;
left:0;
background-color:#F8F8F8;
}
</style>
</head>
<body>
<div id="rotate"><p>Hello world</p></div>
<script type="text/javascript">
window.onload = rotate();
</script>
</body>
</html>
Related
It looks like the visible display of a iphone 6 is 559px in safari. The address bar and bottom tool bar taking up some real estate. How do you get the visible height (559px) using javascript or jquery?
run the snippet and inspect with developer for iphone 6,7,and 8
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height">
<title>space</title>
<style>
body{
margin:0;
height:100%;
position:fixed;
top:0px;
}
div{
height:110px;
width:100%;
position:fixed;
background-color:blue;
}
#a1{
top:0px;
background-color:lightgreen
}
#a2{
top:110px;
}
#a3{
top:220px;
background-color:green;
}
#a0{
top:330px;
height:7px;
}
#a4{
top:337px;
background-color:green;
}
#a5{
top:447px;
}
#a6{
top:557px;
background-color:green;
}
</style>
</head>
<body>
<div id='a1' onclick="myFunction()">110</div>
<div id='a2'>220</div>
<div id='a3'>330</div>
<div id='a0'>337</div>
<div id='a4'>447</div>
<div id='a5'>557</div>
<div id='a6'>667</div>
<script>
function myFunction(){
var h = window.innerHeight;
console.log(h);
}
</script>
</body>
</html>
window.innerHeight should give the visible height of the screen.
This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 5 years ago.
Sorry, not quite the same as previously asked versions of this. I've tried those solutions to no avail.
I have worked with some folks to iron out some issues with a snippet we were working on. Finally got it working on JSfiddle how we need it, but for whatever reason, it's not working on a plain HTML site. The content looks to load, but the preview doesnt work after choosing an image.
Here is the JSfiddle working here: http://jsfiddle.net/ELcf6/568/
Here is all of the code pieces compiled into a single page for testing. This is the example that seems to not work. Does JSfiddle inject any pre-requisites that I might be missing?
Any help in figuring this out would be greatly appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
</body>
</html>
Your script is running before the DOM has loaded and that's why you are getting the "Cannot read property 'addEventListener' of null" error.
Move the script so that it is just before the close of the body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>
This question already has answers here:
How to stay on current window when the link opens in new tab?
(8 answers)
Closed 6 years ago.
I created a popup scrip where if user click on a certain link it closes and open a link into a new tab. What I am trying to get is to stay on the parent window instead of newly opened tab.
I googled a lot, but didn't find suitable answer.
the solution should work like this
Here's my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
</style>
</head><body>
<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
Simple Modal Window |
<a class="close" onClick="window.open('http://google.com','').blur();">Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>
Browser's security won't allow that... sorry :-(
I find the document.body.clientWidth can be used as the actual client Width even there is nothing display in the window. If you zoom the window, the value will change dynamic.
But if there is nothing displayed in the window, how can I know the actual client Height in case of not using any JQuery Libs?
my code is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
border:0px;
/* border-color:#FEFEFE;*/
/* background-image:url(bg.png);*/
background-repeat: repeat;
display:block;
z-index:-9999;
width:100%;
height:100%;
left:0px;
top:0px;
}
div
{
background-color:#a0a0a0;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
display:block;
z-index:-8888;
}
</style>
</head>
<body id="body">
<div id="bg">
<span id="s1">
test
</span>
</div>
</body>
<script type="text/javascript">
(function (d) {
setInterval(function () {
w = d.body.clientWidth;
document.title = w;
}, 1);
})(document)
</script>
</html>
You can use window.innerHeight like the following:
var intViewportHeight = window.innerHeight;
According Mozilla MDN: window.innerHeight retrieves Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
Here is a plunker example.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Model</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
body {
font-family:verdana;
font-size:15px;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
div.window{
border-width:3px;
border-style:solid;
border-color:gray;
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
#dialog1 .d-header {
background:url(images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}
#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}
#dialog1 .d-blank {
float:left;
background:url(images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}
</style>
</head>
<body>
<ul>
<li>Simple Window</li>
</ul>
<div id="boxes">
<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
<img src="facebook-24x24.png" width="24" height="24" alt="Facebook" />
</div>
<div id="mask"></div>
</div>
</body>
</html>
After clicking a simple window link a div element is created. In that div element there is a Facebook button. On clicking that Facebook button it loads the Facebook login page in new window. Is it possible to load the Facebook page in that div element itself or any other ways to do like that?
The simple answer is no (unless your using coldfusion with their tag) you can also use Iframes but this will open you up to cross site scripting. You have started me wondering if it would be possible to tke the contents of the page you are calling via another page, accessed via an ajax call to be presented within the div.
but I doubt you could truest that all css, images and associated scripts of that content would still link. It is an interesting question, but the solution to this problem will no doubt be more complex than the simplicity you have already stated (opening the facebook login in another window).