I have a website which will be opened most time in mobile, and I need that website to be displayed in landscape mode by default. (Though user is in portrait mode, then also it should be in landscape mode).
Please help me out, which code to use...
I used this code but it didn't help me out, in any way..
<script>
var start = function() {
screen.orientation.lock('landscape-primary').then(
startInternal,
function() {
alert('To start, rotate your screen to landscape.');
var orientationChangeHandler = function() {
if (!screen.orientation.type.startsWith('landscape')) {
return;
}
screen.orientation.removeEventListener('change', orientationChangeHandler);
startInternal();
}
screen.orientation.addEventListener('change', orientationChangeHandler);
});
}
window.onload = start;
</script>
might be easier if you used css ;
#media (orientation: portrait) {
.reorientMessage{
visibility: visible;
}
.mainContent{
visibility: hidden ;
}
}
#media (orientation: landscape) {
.reorientMessage{
visibility: hidden;
}
.mainContent{
visibility: visible ;
}
}
html eg.;
<div class="reorientMessage">please reorient etc..</div>
<div class="mainContent">normal stuff here</div>
Related
I'm making small web pages for fun and hosting them on my server just to learn stuff and sometimes i send them to some people i know to show them what i've learn but i'd like it so that my web pages aren't accesible to people on small screen.
i tried doing
#media (max-width: 800px){
body{
height: 0px !important;
width: 0px !important;
}
}
but it didn't work
Try this:
#media (max-width: 800px) {
html {
visibility: hidden;
}
}
#media (max-width: 800px){
body{
display:none;
}
}
A better way to do this is using window.innerWidth.
You can make an onload function that checks the viewport width.
window.onload = () => {
if (window.innerWidth <= 800) {
document.body.innerHTML = 'Page not accessible on small screens.'
} else {
loadDOM(); /* maybe put [display: none] on body as default and remove it here */
}
}
This method is better for the user. Atleast they'll know that they have to access the site from a larger device
My Webpage functions to change SVG size when the webpage is in either Landscape or Portrait
if webpage screen is resized then the appropriate SVG is loaded either:
car1-landscape.svg
car1-portrait.svg
on iPhone using safari or chrome browser if the page is scrolled up
the webpage will be reloaded/restart
the webpage works fine on Desktop/Laptop only but restarting occurs on mobile devices.
restarting occurs in iPhone safari or chrome browsers
I use the line "window.location.href = window.location.href;" to restart page
so it can correctly load the appropriate landscape or portrait SVG
my file
<script>
if(window.innerHeight > window.innerWidth)
{
// Portrait
//alert ("Resized..P");
document.write( '<object id=\"svg-objectp\" data=\"car1-portrait.svg\" type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectp").style.width = "100%";
document.getElementById("svg-objectp").style.height = "auto";
}else{
// Landscape
//alert ("Resized..L");
document.write( '<object id=\"svg-objectl\" data=\"car1-landscape.svg\" type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectl").style.width = "100%";
document.getElementById("svg-objectl").style.height = "auto";
}
// Listen for resize changes
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
//alert ("Resized..");
window.location.href = window.location.href;
}, false);
</script>
webpage:
http://www.qurantour.com/car/index.html
zip:
http://www.qurantour.com/car/car.zip
i have tried the following code, but it still seems to reload/flicker page on
mobile device
<style>
.svg-container {
width: 100%;
height: auto;
}
#media only screen and (orientation: landscape) {
.svg-container {
background: url('car1-landscape.svg') // set correct path here
}
}
#media only screen and (orientation: portrait) {
.svg-container {
background: url('car1-portrait.svg') // set correct path here
}
}
</style>
<div class="svg-container"></div>
i have tried above, but page still seems to reload when i scroll up,
anything else i can try please
thankyou
<style>
.svg-container-landscape,
.svg-container-portrait {
width: 100%;
height: auto;
}
.svg-container-landscape {
background: url(car1-landscape.svg);
background-repeat: no-repeat;
}
.svg-container-portrait {
background: url(car1-portrait.svg);
background-repeat: no-repeat;
}
#media only screen and (orientation: landscape) {
.svg-container-portrait {
opacity:0;
width: 100%;
height: auto;
}
}
#media only screen and (orientation: portrait) {
.svg-container-landscape {
opacity:0;
width: 100%;
height: auto;
}
}
</style>
<html>
<div class="svg-container-landscape"></div>
<div class="svg-container-portrait"></div>
</html>
To change the svg dynamically, try using css like below instead of reloading the content.
in HTML add the following container for the svg
<div class="svg-container-landscape"></div>
<div class="svg-container-portrait"></div>
in CSS add the svg as background
.svg-container-landscape,
.svg-container-portrait {
width: 100%;
height: auto;
opacity:1;
}
.svg-container-landscape {
background: url('car1-landscape.svg') // set correct path here
background-repeat: no-repeat; //if needed
}
.svg-container-portrait {
background: url('car1-portrait.svg') // set correct path here
background-repeat: no-repeat; //if needed
}
#media only screen and (orientation: landscape) {
.svg-container-portrait {
opacity:0;
}
}
#media only screen and (orientation: portrait) {
.svg-container-landscape {
opacity:0;
}
}
UPDATE:
Keeping both the svg in dom to prevent flicker on rotation, which happens when the new image is loaded and used to replace the other image. Now with opacity, both images would be loaded, but only one would be showed. You could test with display:none and display:block too
I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}
You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.
I have this code:
<h1 id="logo">
<a class="brand" href="/cgi-bin/koha/opac-main.pl">
CSU Library
</a>
</h1>
When my browser width is 701px and above, I don't want this to be seen (edit clarification: the element should be deleted from my html code); otherwise, the tag can be seen normally when my browser width is below 701px.
Is there any way I can do that? I don't know where to go from this code.
#media only screen and (min-width: 701px){
....??
}
This can be easily achieved in CSS if this is a responsive website you are building.
#media (min-width: 700px) {
#logo {
display: none;
}
}
For Modern browsers and IE9 and above you can use media queries like
#logo {
display: none;
}
#media (max-width: 701px) {
#logo {
display: block;
}
}
Try this as css
#logo { display : none; }
#media only screen and (min-width: 701px){
#logo { display : block; }
}
One method is to use media queries and another way is with jquery as :
$(document).ready(function(){
if($(window).width() > 701)
{
$("#logo").hide()
}
else
{
$("#logo").show()
}
});
OR
$( window ).resize(function() {
if($(window).width() > 701)
$("#logo").hide()
else
$("#logo").show()
});
According to the asker's comment... "but it leaves a blank space, and that's not what I want. I wanted it to be totally deleted from my html."
Yes, it is possible, but you'll need to use javascript. It is very simple with jQuery:
$("#logo").remove();
Well i do have the below query which is working fine without any problem. it is changing the background-image when i open it in explorer. and when i change the resolution it does not change the background-image automatically i need to refresh the page to change the background image.
i want to change it immediately when i change the screen resolution.
Please help....
<script type="text/javascript">
document.onload=pickIt()
function pickIt()
{
var w=screen.width
var h=screen.height
if(w==1440&&h==900)
{
//alert("1440x900");
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1440x900.png')";
}
else if(w==1280&&h==800)
{
//alert("1280x800")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==768)
{
//alert("1280x768")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==720)
{
//alert("1280x720")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
}
}
</script>
You can use media queries for this. compatibility is still not the best, but it is growing: http://caniuse.com/#feat=css-mediaqueries
#media (max-width: 1200px) and (max-height:600px) {
html {
background: url(http://lorempixel.com/1200/600);
}
}
#media (max-width: 900px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/900/500);
}
}
#media (max-width: 700px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/700/500);
}
}
#media (max-width: 500px) and (max-height:300px) {
html {
background: url(http://lorempixel.com/500/300);
}
}
Demo: http://jsfiddle.net/32X57/
Why not simply document.getElementsByTagName('body')[0].onresize=pickIt ?