We Keep Coding

Why does changing an element through jQuery affect my media queries?

I am trying to create a Navigation bar that on mobile is transparent until you scroll past a certain point, but it switches back and forth through the use of a JavaScript function I'm using for the window scroll listener. But once that function changes the navigation properly, I find that my media query to show the navigation bar again on a desktop width does not change, but only when my JS has ran for the mobile width. I wanna believe it's how I'm using classes and IDs, but I've tried all the different ways and the media query still doesn't work properly.
#media screen and (min-width: 768px) {
/* Change navbar for desktop */
.navigation-bar {
background: black;
justify-content: space-between;
}
.navigation-bar .logo {
display: inline;
}
}
The above is my desktop media query for the navigation
/**
* Show navigation bar on mobile
* after 400 pixels scrolled
*/
function showNavOnMobile() {
if(window.innerWidth <= 768) {
if($(window).scrollTop() > 400) {
$(".navigation-bar").css("background", "black");
$(".navigation-bar .logo").css("display", "inline");
}
else {
$(".navigation-bar").css("background", "none");
$(".navigation-bar .logo").css("display", "none");
}
}
}
Only when that function runs, the media query doesn't work, but if I was to not scroll the page, the media query would work just as I need it to.
This is my first post, so I apologize if it's not exactly the way you should format it.

How to use different menu for mobile - Shopify (mmenu)

I started to work on Shopify store. The previous developer used mmenu to create the mobile menu.
I want to use different menus for mobile and desktop, the question is, how can I control which menu is shown by mmenu?
Thanks

First, you need to make sure you are cloning the menu (Because the plugin makes lot of changes to the html) with the following option:
$("#my-menu").mmenu({
// options
}, {
// configuration
clone: true
});
Then you need to add the css based on the id (prepend mm-) in order to display the original or the clone.
#media (max-width: 600px) {
#my-menu {
display: none !important;
}
}
#media (min-width: 601px) {
#mm-my-menu{
display: none !important;
}
}
Here's the actual documentation for that

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

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