How to apply CSS to this Javascript code? - javascript

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

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 */
}

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

Changing image size Javascript depending on screensize

Am using bootstrap, which for some reason means whenever i try the #media (min-height: 1000px) there is no response from the image class.
I would like to run a javascript that resizes the image when the screen height gets above a certain size. (Lets say 1000 px)
the best code I have found is this
<script>
$(function() {
if ($(window).height() >= 710) {
$("img").each(function() {
$(this).attr("src", $(this).attr("src").replace("logo1.png", "logo2.png"));
});
}
});
</script>
However when i replace src with width, and change the corresponding values of logo1.png and logo2.png to 500 and 800 nothing happens.
Any pointers using Javascript very much appreciated.
I tried this in CSS
#media screen and (max-width: 980px) and (min-height: 1000px) {
.iphonegangster {
min-width: 950px;
height: auto;
}
Instead of using JS, you can use CSS media queries with image background. Ex., <i role=image class=img1/>. Using CSS media query pick image based on screen size.

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 */
}

I want to display a message that this app can not be viewed in this small device

I want to display a message that this app can not be viewed in this small device
for eg (min-device-width : 320px) and (max-device-width : 480px)
give it the id noshowmessage and this css
#media (min-width:480px){
#noshowmessage{
display:none;
}
}
Using css you can do with media query , if you want to do in javascript/jquery try using this ,
if(window.matchMedia("(max-width : 480px)").matches) {
}

Categories