We Keep Coding

Menu Still Show When Change #media query

I have 2 sidebar (side-bar and side-bar-mobile). First sidebar i want to see it when screen in width > 768px, so i do that.
#media only screen and (min-width: 768px){
.side-bar{
display: block;
}
.side-bar-mobile{
display: none;
}
}
And when screen in width < 768px, side-bar is hide and side-bar-mobile is show toggle when i click a button.
CSS
#media only screen and (max-width: 768px){
.side-bar{
display: none;
}
.side-bar-mobile{
display: none;
}
}
JS
$('#toggle-menu').on('click', function(e){
$('.side-bar-mobile').slideToggle();
e.preventDefault();
})
Side-bar-mobile is slide good. But when i resize my window to normal size (width > 768px), the side-bar-mobile is still show. What can i do now? I think problem in slidetoggle functions, it make side-bar-mobile is show when i resize window. But i can't solve this problem. Help me! Thank you.

When screen width > 768 the side-bar-mobile must be hidden no matter what.
So in order to do that you need to register window resize listener like this:
window.onresize = function(){
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.getElementsByTagName('body')[0].clientWidth;
if(w > 768 ){
$('.side-bar-mobile').css({display:"none"});
}
}

also put window resize condition.
try this one
$(function(){
var nb = $('#toggle-menu');
var n = $('.side-bar');
$(window).on('resize', function(){
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() >768) {
$('.side-bar').show().addClass('keep-nav-closed');
}
});

Detect if webapp is in landscape orientation and add padding-top

What I want the script:
-detect if site is in standalone app
-detect if site is in landscape
-add padding-top to header
if (window.navigator.standalone == true && window.innerWidth > window.innerHeight){
$('header').css('padding-top','20px');
}

Use media queries for device-conditional layout:
#media screen and (orientation:landscape) {
header {
padding-top:20px;
}
}
If the standalone property is really important, detect it in Javascript and add a class to the body:
if (window.navigator.standalone == true)
$('body').addClass('standalone');
Then use it in your CSS to apply extra requirements:
.standalone header {
padding-top:20px; /* only applied if standalone */
}
You can of course combine the media query with this.

I figured it out
if (window.navigator.standalone){
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$('header').css('padding-top','20px');
}
else{
$('header').css('padding-top','0px');
}
});
}

how to reset slidetoggle()

I am working on a responsive site that with the aid of twitter bootstrap, in this case it takes the footer heading and when the screen width is a certain width , it then turns on slideToggle(), this works fine, but the problem is when I increase the browser size again I want this functionality to not only turn off but to reset back display:block.
Im currently still learning jQuery and JS so it may be an obvious one.
I need it to work so its not relying on a click to reset it back...
Here is the entire code including getting screen size:
var myWidth = 0, myHeight = 0;
function getSize(){
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
}
getSize(); // run first time
$(window).resize(function(){
getSize(); // do it on resize
});
$("#footer h3").click(function () {
if (myWidth < 980) {
$(this).toggleClass("active");
$(this).parent().find("ul").slideToggle('medium');
}
});
Im thinking slideDown() but not sure how to make it happen automatically.

Inside the code that checks for screen width (maybe you can post that anyway?) you can do something like this:
if (myWidth < 980) {
$(this).parent().find("ul").slideDown('medium');
} else {
$(this).parent().find("ul").slideUp('medium');
}
For more control over the slide behavior it's better to use the separate slideDown and slideUp methods instead of slideToggle. In that case you know for sure your ul gets slide up/down instead of just toggled.
Also, you might want to add the stop() method to avoid buildup of slide animations if the window width passes the 980 threshold multiple times in short succession:
if (myWidth < 980) {
$(this).parent().find("ul").stop().slideDown('medium');
} else {
$(this).parent().find("ul").stop().slideUp('medium');
}

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