We Keep Coding

Javascript Media Query no responding

So I am building a website, I have some custom menus that use HTML and JS. when the menu is open it is 25% of the screen:
function opensideNav() {
document.getElementById("mySidenav").style.width = "25%";
}
//Closes Right sidenav
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
If i use
var mq = window.matchMedia( "(min-width: 1023px)" );
if (mq.matches) {
function opensideNav() {
document.getElementById("mySidenav").style.width = "25%";
}
//Closes Right sidenav
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
} else {
function opensideNav() {
document.getElementById("mySidenav").style.width = "100%";
}
//Closes Right sidenav
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
}
It will only open the menu on a smaller screen than 1023.... I have tried changing the min to max but still the same problem. Pls help :)

Why not just use CSS media queries for this? you can do:
function toggleNav() {
document.getElementById("mySidenav").classList.toggle("open");
}
in your JavaScript which toggles the open class on and off, this needs to be attached to whatever it is you're clicking to toggle the menu.
Then in your CSS you can do:
#mySidenav {
width: 0;
}
#mySidenav.open {
width: 100%;
}
#media screen and (min-width: 1023px) {
#mySidenav.open {
width: 25%;
}
}
So what this is doing is the function in the JS is toggling the open class on and off of the mySidenav element when clicked. By default the CSS is giving mySidenav a width of 0, then overriding that when the open class is applied. This also looks at the width of the viewport and changes what the width being applied is based on that.
Note your open nav button would be something like:
<button onclick="toggleNav()">Menu</button>

You misunderstood min-width. min-width in the context of media queries means that it will be applied if the viewport is having a minimum width of the given value. However, you intend to query by the width of the device, so min-width and max-width are not really helpful for your purpose. You will need to use min-device-width and max-device-width, respectively to query the width of the device instead of the width of the viewport.

zslider javascript should work only in screen resolution below 768px

i want to use zslider javascript in my website, but can any one tell me how to make it work only in screen resolution below 768px
Here is the zslider script link:
http://www.cssscript.com/demo/mobile-friendly-content-carousel-slider-with-pure-javascript-zslider/

Use media queries to show slider content below 768px:
#media (min-width: 768px) {
.z-slide-wrap {
display: none;
}
}
Than use JavaScript to initialize slider only if width is below 768px:
if (window.innerWidth <= 768) {
var slider1 = new Slider('#demo', '.z-slide-item', {
// OPTIONS HERE
});
}

CSS Media Query and Javascript/jQuery don't match up

In my CSS I have a media query like so:
#media (min-width: 800px) { /* styles */ }
And then in my jQuery, I'm targeting the window width and performing some actions.
Edit: as per the answers below, I have changed this function but my JS and CSS still didn't align. The problem was fixed by using the Modernizr function as specified in the accepted answer.
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
The problem is that while the jQuery is executing bang on 800px or more, the CSS is kicking in at 740px.
Is there a known problem with these not aligning? Or could there be something on my page affecting the CSS and why it's 740px not 800px? Maybe there's something else I should be using instead of $(window)?
Edit: I've tested in Safari and it works perfectly. In Chrome and Firefox, the jQuery functions run spot on to 800px and so does the CSS. But in Chrome, the CSS actually runs after 740px, even though the media query is 800px - how can I get these to align perfectly?

You can use Modernizr to execute the media query in JS (the mq() method will return a boolean):
$(window).resize(function() {
if (Modernizr.mq('(min-width: 800px)')) {
// do something
}
});

Move your width check, or else the viewportWidth variable will always be the same thing:
$(window).resize(function() {
var viewportWidth = $(this).width();
if (viewportWidth >= 800) {
// do something
}
});

Valid code would be:
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
Everytime window resizes the new value will be stored in viewportWidth variable. In your code viewportWidth gets the only value of the $(window).width() when the page was loaded.

What I just tried, and it seems to work, is to use the CSS media query to style an object, and then use javascript to test if the object has that style. Javascript is asking CSS what the answer is, rather than having two parts of the page determine it separately:
CSS:
#media (min-width: 800px) {
#viewType {width:3px;}
}
HTML :
<div id="viewType" style="display:none"></div>
JavaScript:
var answer = ($("#viewType").width()==3)

I agree with Steve answer. the jquery(window).width(); is does not match with the media queries and even doesn't provide accurate window width size. here is my answer taken from Steve and modified.
CSS :
#media (max-width: 767px) {
//define your class value, anything make sure it won't affect your layout styling
.open {
min-width: 1px !important;
}
}
.open {
min-width: 2px;
}
Js :
// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.
$(window).on('resize orientation', function() {
var media = $('.open').css('min-width');
if( media == '1px') // means < 767px
{
// do your stuff
}
});
That's it~ hope it help.

Detecting a screen's width with Javascript

if(screen.availWidth > 850){
//Do this
} else {
//Do this
}
This is what I have right now. My issue right now is if someone was to zoom in to the page, I want the width to change as it will affect how the page is displayed.

Shouldn't you be more worried about someone resizing their browser window? Not everyone keeps their browsers maximized.
To do this:
if( (window.innerWidth || document.documentElement.clientWidth) > 850) {
// do something
}
else {
// do other thing
}
I'm fairly sure this takes the zoom into account, but I've never tested that.

Bind an event handler to the window.onresize event:
window.onresize = function(event) {
if (screen.availWidth > 850) { ... }
};
If you use jQuery:
$(window).resize(function(){
if ($(window).width() > 850) { ... }
});
Besides, if you want to create a responsive design, consider using CSS media queries. This automatically adapts the page if the user zooms or resizes the browser window and also works if the user has JavaScript deactivated.
/* CSS */
#media (min-width: 850px) {
/* style */
}

Change CSS Based on Mobile Orientation

What is the best approach to change a css file when a mobile application page orientation changes from landscape to portrait and vice versa. I need to suport both Android and iPhone only. It seems media queries aren't the cleanest way, any other ideas?

Example
/* For portrait */
#media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape */
#media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
}
For more details see here

The below JQuery code seems to work best for me...the binding examples did not.
$(document).ready(function() {
$(window).resize(function() {
alert(window.orientation);
});
});

First give your style sheet include line an id="cssElement" or something.
Then Using jQuery:
$(document).ready(function(){
// The event for orientation change
var onChanged = function() {
// The orientation
var orientation = window.orientation;
if(orientation == 90) {
$('#cssElement').attr('href', '/path/to/landscape.css');
} else {
$('#cssElement').attr('href', '/path/to/portrait.css');
}
};
// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);
});

You can use window.onorientationchange event.