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
Related
I'm trying to prevent the html page from moving, resizing while width page is under 1350 px.
Btw on my css code, for the width, height, transformation: translate, i'm using the value vmax , and not px or %. So the min-width maybe doesn't work with it, all of my elements keep resizing because they are using vmax, so they just adapt there size with the window size too.. :(
I tried this but this doesn't work too (I was trying to stop resizing the three white rectangle, tabcmp0, 1 and 2)
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
}
#tabcmp1 {
width: 370px;
}
#tabcmp2 {
width: 370px;
}
body {
max-width: 1350px;
}
}
Code + preview
See this page for exemple , when she is less than some px, the page stop from resizing and a scroll bar appear, i want the same result but i don't know how to do it ...
i think there is no choice to return px model if you want to create a static content there.
#media only screen and (max-width: 1350px) {
#tabcmp0 {
width: 370px;
height:580px;
left:210px;
}
#tabcmp1 {
width: 370px;
height:580px;
left:590px;
}
#tabcmp2 {
width: 370px;
height:580px;
left:980px;
}
.select_dev {
width:202.5px;
}
body {
max-width: 1350px;
}
}
i think you should give all exact px values instead of dynamic vmax values like that for each element like headers, left menu etc...
I have the below code:
$(window).resize(function(){
if ($(".gallery-container").css("position") === "fixed" ){
$(".pd-text").removeAttr("style");
};
});
I would like to perform the action only if, on window resize, .gallery-container went from position: relative to position: fixed (which is when the screen size has a min-width of 650px).
Is there a way to do this?
Since your real condition is the MediaQuery min-width: 650px, use the MediaQuery API:
var query = matchMedia('(min-width: 650px)');
query.onchange = updateState; // will trigger when the query status change
updateState();
function updateState(){
state.textContent = 'background is ' + (query.matches ? 'green' : 'red');
}
.rect{
height: 250px;
width: 250px;
background-color: red;
}
#media (min-width: 650px) {
.rect {
background: green;
}
}
<h3>Run the snippet in 'full page' and resize your window</h3>
<pre id="state"></pre>
<div class="rect"></div>
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>
So, I want the background-size to change when the browser height is equal to 2/3 of the browser width. Here is the code I've tried, and I can't get it to work.
<body id="body" onresize="BG_resize()">
<script>
function BG_resize() {
var w = window.innerWidth;
var h = window.innerHeight;
if ((w * (2 / 3)) < h){
document.getElementById("body").style.background-size = "auto 100%";
}
}
</script>
</body>
The css:
#body {
background:url("Layout/BG.jpg");
background-size:100% auto;
}
Your JS should use backgroundSize, not background-size:
document.getElementById("body").style.backgroundSize = "auto 100%";
Another alternative to all of these is to use media queries (since you're doing this on the window) and get rid of the javascript all together. This will run smoother as the browser does most of the work for you.
Looks like the query you are looking for is the aspect-ratio so something like:
#media screen and (min-aspect-ratio: 2/3)
{
body {
background-size: auto 100%;
}
}
#media screen and (max-aspect-ratio: 2/3)
{
body {
background-size: 100% auto;
}
}
Another alternative which I find easier is using jQuery. You can simply use the resize() event handler. Below is an example:
$(window).on('resize', function () {
//Here you can add your code that you want to execute on resize
})
To then change the css you can also use jQuery .css().
http://fofwebdesign.co.uk/template/_...tio-resize.htm
.target-ratio-resize {
max-width: 960px; /* actual img width */
max-height: 150px; /* actual img height */
*height: 150px; /* actual img height - IE7 */
background-image: url(students.jpg);
background-size: cover;
background-position: center;
}
.target-ratio-resize:after {
content: " ";
display: block;
width: 100%;
padding-top: 66.666%; /* 2:3 ratio */
}
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 ?