We Keep Coding

ipad orientation not triggering CSS change

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);
});

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 to apply CSS to this Javascript code?

I'm working on an app which requires showing images according to the user's device. So I'm using the following Javascript code to show the menus and their icons:
var $imgsrc;
if(dummy_url_decode(results.rows.item(i).title) == "Web Info")
$imgsrc = "icons/web_info.png";
if(dummy_url_decode(results.rows.item(i).title) == "Misc.")
$imgsrc = "icons/misc.png";
Now I want to apply condition if the device is with retina display then it should show different icons for it. I have the media query syntax but dont know how to change the img path from CSS. Can anybody help me? The media query I'm using is:
#media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width : 768px) and (max-device-width : 1024px)

You can't change attributes from CSS.
Your best option would probably be to use a <span> or <div> instead of an image, style it to display:inline-block with suitable width and height, and then you can change the background-image property in your media queries.
Something like this:
HTML:
<span id="myIcon"></span>
CSS:
#myIcon {
display:inline-block;
width:32px;
height:32px;
background-image:url('icons/some_icon.png');
}
#media screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width:768px) and (max-device-width:1024px) {
#myIcon {
width:64px;
height:64px;
background-image:url('icons/some_hi-res_icon.png');
}
}

How to output different images depend on user screen?

For example if I have two sets of images for my website, one set is low resolution,
another set is high resolution, I to show the low res to the screen size like 1280 width users, and the others are high res images, how can I do that?
Using javascript? or any other method ? possible to define in css or html?

You can use CSS media queries for that. More about media queries here.
Example:
/* This block applies to all "screen" devices
*/
#media screen {
.some-content {
background-image: url(largeimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 1279px (e.g., < 1280)
*/
#media screen and (max-width: 1279px) {
/* Use `mediumimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(mediumimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 639px (e.g., < 640)
*/
#media screen and (max-width: 639px) {
/* Use `smallimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(smallimage.jpg);
}
}
Note the descending order of the above: First we specify for the largest device, then smaller ones, then smaller ones, so that latter queries override earlier ones (since a device with a screen of, say, 1024 pixels will match both of the first two rules).

you can design it with something like
body {width: 100%; height: 100%; position:relative;}
you will face this problem for browser compatibility.
define it in your css you can have any class you wish . i have done it for my website and you can have the same image working for you.