We Keep Coding

Hide certain elements if user is using mobile phone, provide button to make elements reappear

Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:
index.html:
<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
Fried Calamari
</div>
<div class="menu-item">
Mozzarella Sticks
</div>
using javascript to hide what's normally there and present the button:
/* Function definitions */
function hideElements(className){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = 'none';
}}
function showElements(className, displayType){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = displayType;
}}
/* Main Program */
//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
hideElements('food-section-heading')
hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/
Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)

There are many ways to go about displaying the same document differently on different devices.
When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:
the browser viewport size / viewport orientation / device screen size; or
browser make and version; or
data related to the browser's touch capability
Then, you can use:
CSS #media queries (commonly used in Responsive Design)
Client side browser sniffing (via javascript)
Server-side browser sniffing (used in RESS / Responsive with Server Side)
Touch detection (again, via javascript)
and more.
Targeting via CSS #media queries for screen size
One of the more easily-implemented approaches is to deploy one or several CSS #media queries.
Here is a simple #media query targeting screen sizes which are 800px wide or narrower:
#media only screen and (max-width: 800px) {
.menu-item {
display: none;
}
}
Adding in #media query hover: hover | none
If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):
#media only screen and (max-width: 800px) and (hover: none) {
.menu-item {
display: none;
}
}
Older approach using device-size #media queries (not recommended)
Before the #media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a #media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-device-width: 360px) and (max-device-width: 598px) {
.menu-item {
display: none;
}
}
But in practice this tends to be less useful and harder to maintain.

I think you might find some useful information in this thread.
Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.

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

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?

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.