ipad orientation not triggering CSS change - javascript

I have a website whereby a page is populated using JavaScript - a field called salary is controlled on desktop or device using the following on page load
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.salary-desktop').hide();
$('.salary-tablet').show();
}
The CSS for the field is as follows:
#media screen and (max-width: 480px) {
#account-details article table .salary-tablet {
display: none;
}
#media screen and (max-width: 768px) {
#account-details article table .salary-tablet {
display: table-row;
}
}
If I access the page on an iPad in portrait, the salary displays OK and if I change the orientation to landscape, the salary hides. All correct.
If I access the page on an iPad in landscape, the salary displays and any change of orientation has the salary always displaying.
Is there something wrong with the CSS or is the fact that the $('.salary-tablet').show(); being called on the iPad when in landscape then caching/overriding any style the CSS attempts to apply to it?
Thanks

The jQuery you wrote is going to add inline styles, which will take priority over your CSS code. If you want to run specific code for certain orientations, you should target the orientation specifically. In css, something like:
/* portrait */
#media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
#media screen and (orientation:landscape) {
/* landscape-specific styles */
}
and in jQuery, something like:
$( window ).on( "orientationchange", function( event ) {
//orientation change code here);
});

Related

How to check CSS media query with Javascript?

on the following url:
https://gist.github.com/marcedwards/3446599
I found the following CSS code to check high DPI screens.
#media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Your code to swap higher DPI images */
}
This code is based on:
https://bjango.com/articles/min-device-pixel-ratio/
My question is: Is there any way to create a flag (true/false) based on if above conditions are meet or not?
My goal is: I have a set of images: <img src="..." /> where depending on the screen resolution (above condition meets or not) I wanna use one image or other.
Thanks!
As #Huangism and #phuzi pointed out, the way is to use: srcset.
The only caveat about this is it is not supported by IE yet (as of today).
Could use some temporary element with a class to change on media query trigger to test:
HTML:
<p class="my-flag">Did the media query trigger?</p>
CSS:
#media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Your code to swap higher DPI images */
.my-flag {
color: red;
}
}
And if you need this check in JS just ask
if($('.my-flag').style.color == "red")) {
/* do stuff */
}

initial window.orientation always 0 on Windows Phone

I'm trying to detect device orientation on my website.
Orientation value seems to be ok after orientationchange event.
$(window).on("orientationchange",function(event){alert(window.orientation);})
However problem is initial window.orientation value at page startup which is always 0 even when device is in landscape position.
$(document).ready(function(){alert(window.orientation);});
It doesn't change after some delay (i've checked that) it changes to right value only after orientationchange event.
Is there any way to get proper orientation at page startup?
It looks like that property isn't actually supported in anything other than chrome for android: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
Depending on what it is you want to do you could use CSS rules?
#media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}
#media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
have you tried approaching the issue like this:
$(document).ready(function(){
$(window).load(function(){
alert(window.orientation);
});
});
alternatively you can get the orientation of the device manually:
$(document).ready(function(){
alert((($(window).width()>$(window).height()) ? 90 : 0));
});
I just tested it on a Windows Phone and there it works. Which phone/os/browser are you using?

Is it possible to hide / show div based on orientation change javascript / query

something like:
if orientation = landscape {
hide divA
else
show divA}
excuse non script example, thought it would be easier to explain that way as not too sure the best way to go about it
Yes you can do this with css media queries.
jsfiddle demo (Make the width of the html view smaller and see what happens)
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}

How do I show a previously hidden div if the view port is resized?

I am developing a responsive site using Bootstrap 3. I have a JS show/hide script which is available when the screen is max-width 767px, but if I have shown and then hidden the div in that size, when I resize the screen back to desktop the div is still hidden.
Is there away to force the div to come back if the screen goes beyond a 767px?
<script type="text/javascript">
function showFunction() {
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction() {
document.getElementById("left-col").style.visibility="hidden";
}
</script>
Why not use a media query then?
#media (max-width: 767px) {
.left-col {
display: none;
}
}
http://jsfiddle.net/x9y1s14o/
Generally, there are two ways to do this:
Use CSS to force the div to be shown at one size, and hidden at another
Use JavaScript to listen for changes in the browser and then call a function to modify the state of the dom
With CSS, you tell the browser what to do when the window is bigger than your breakpoint, and what to do when your window is smaller than your breakpoint, which 767 px.
#media (min-width: 767px) {
.left-col {
visibility: visible;
}
}
#media (max-width: 767px) {
.left-col {
visibility: hidden;
}
}
With JavaScript, you tell the browser to call a function when the window resizes:
var breakpoint = 767;
window.onresize = function(event) {
if (window.innerWidth >= breakpoint) {
showFunction();
} else {
hideFunction();
}
};
Note: Your specifics might be slightly different, but this is meant to illustrate the idea behind it. Tweak the details that you need to.

Wordpress Theme Customizer: Live Preview CSS by Media Query

I'm using Worpress' Theme Customization API to allow changes by a user to my website colors. My website is responsive and the navigation changes color for mobile devices. My CSS looks similar to the following:
nav { background-color: #fff; }
#media only screen and max-width 767px {
nav { background-color: #b00; }
}
I set up all of the JavaScript for the live preview as follows, but this binds to all display sizes. I'm not able to figure out how to make this bind to a media query.
wp.customize( 'background_color', function( value ) {
value.bind( function( newval ) {
$('nav').css('background-color', newval );
} );
} );
Any help would be appreciated.
Thanks
Your media query in CSS should be:
#media only screen and (max-width: 767px) <-- brackets and colon missing here.
Further Info here.

Categories