We Keep Coding

Turn off JavaScript when screen is a set size

How do I turn Javascript off when my page is viewed on mobiles?
I need a sort of media query that will disable all javascript on a page when viewed on a specific device.
So far I have this but do not know how to actually disable all javascript
if(screen.width < 480) {
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
Thanks

You could use matchMedia.js (found at https://github.com/paulirish/matchMedia.js) and check if the screen is below a certain size.
Eg.
if (matchMedia('(max-width: 480px)')) {
// Run Code Here
}

You can check the
navigator.userAgent
property with Javascript. This will show the used browser and you can determine if its mobile or not.
Documentation:
userAgent Docs
You can do it also width the viewport width of your users browser in pure Javascript:
var w = document.documentElement.clientWidth;

Activating a jquery function only in desktop mode?

I have a jquery funciton which sticks the navbar to the top of the webpage, but I only want this feature in desktop and tablet mode (not in phone mode). How do I de-activate this function?
$(document).scroll(function(){
var elem = $('.navbar');
if (!elem.attr('data-top')) {
if (elem.hasClass('navbar-fixed-top'))
return;
var offset = elem.offset()
elem.attr('data-top', offset.top);
}
if (elem.attr('data-top') <= $(this).scrollTop() )
elem.addClass('navbar-fixed-top');
else
elem.removeClass('navbar-fixed-top');
});

Use CSS media queries to manipulate the nav bar. Browser/OS detection shouldn't factor into styling, just resolution and media type.
What is the syntax for a CSS media query that applies to more than one property (AND operator)?
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Based on your question, it seems like the real concern here is saving screen real estate on a mobile device. So as most of the other users have pointed out, you can rely on using media queries here instead. In order to make sure the listener isn't even attached in case of small screens, you can use Modernizr.mq to test a media query and use the returned value:
if( Modernizr.mq('only screen and (min-height: 640px)') ) {
// Case specific code here, only executed if screen height is > 640px
}
This is assuming you're willing to add Modernizr or are already using it. If you don't have it already included and only plan on using this single test, you can download a custom build(2kB) from modernizr.com which only includes the media query test.

Check this out -- It maybe what you're looking for they're Open source mobile phone detection
http://detectmobilebrowsers.com/

Perform function when window.width is resized but not the height

I'm developing a responsive website and I have some tabs that change from tabs to an accordion on small screens. Here is how I am doing it at the moment:
var myGlobalVariable = {};
$(window).resize(function(e) {
duringResize();
myGlobalVariable.windowWidth = window.innerWidth;
});
function widthHasChanged() {
return window.innerWidth !== myGlobalVariable.windowWidth;
}
function duringResize() {
if(widthHasChanged()) {
if(Modernizr.mq('all and (min-width:1000px)')) {
/* Do stuff for tabs */
} else {
/* Do stuff for accordion */
}
}
}
I'm not happy about this because I'm having to use a global variable to store the last width of the browser window in order to check wether the width has changed.
The reason I have to do this is because on mobiles when the tabs are in accordion mode clicking on one actually makes the document taller to accommodate the tab content. For some reason this is classed as a resize even though the 'window' is still the same size on a mobile. This meant that my tab/accordion code was being called even when the width hadn't changed and this was messing things up.
Is there something I'm missing or is this the only way to achieve this? jQuery and vanilla javascript solutions are welcome.

There is no specific event to bind to for window width change. Your solution looks fine to me.
The only other way I could think of was to do a regular check on $(window).width inside a timer. I think on balance, the single global variable is preferable :)

Removing Div tag when screen is at a certain size using jQuery or javascript?

Hi I wanted to know using jQuery or javascript can I remove a certain div tag so that its not displayed at all when the screen gets to a certain size lets say 500px.

You should use the matchMedia Javascript API, which has a very good support across browsers nowadays.
For instance:
var width = window.matchMedia('screen and (width: 500px)');
matchMedia will return a MediaQueryList object, which among other things contains a matches boolean that indicates if the passed in media query currently matches or not.
The great thing about those MediaQueryList objects is, that they provide methods to add and remove listeners, when this state changes.
For instance:
width.addListener(function( mql ) {
if( mql.matches ) {
// yes, the device screen width is now 500 pixels
} else {
// no, the width is below 500 pixels
}
});

You can write something like this in jQuery
$(document).ready(function(){
$(window).resize(function(){
if($(window).width()==500)
$('div').hide();
else
$('div').show();
});
});

You can do this using CSS media queries:
#media screen and (min-width: 500px) {
div.whatever { display: none; }
}

Optional Javascript Execution based on Media Queries

I'm trying to figure out how I can optionally run a block of javascript based on the current device/media query. I'm using Twitter Bootstrap and have essentially two versions of media queries:
#media (min-width: 980px) { ... } <!-- Desktops -->
#media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->
I have a map that I generate, but am not showing it in the mobile/small screen version forb andwidth reasons. Yet, the javascript still executes in the background even though you can't see it on the mobile screen. So, I'm trying to find a way in javascript where I can do something like:
// Imaginary function
var screenType = getScreenType();
if(screenType == 1) {
// Load map
}
I've read about people setting CSS properties to specific values in their media queries and then trying to find that element in the DOM based on the CSS property, but there has got to be a better way. Any ideas?

The current accepted answer is not good enough, you should check window.matchMedia
You can detect viewport dimension changes, but you must calculate factors such as orientation and aspect ratios and there is no guarantee our calculation will match our browser assumptions when it applies media query rules.
I mean, you can calculate X, but your browser assumption can be Y.
So i think is better to use same browser rules, and window.matchMedia does it
var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
// window width is at least 480px
}
else {
// window width is less than 480px
}
You can even receive query notification using a listener
var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);
function handleOrientationChange(jmediaquery) {
if (jmediaquery.matches) {
// orientation changed
}
}
If you no longer need to receive notifications about changes simply call removeListener()
jmediaquery.removeListener(handleOrientationChange);

You might find the Enquire.js library helpful:
http://wickynilliams.github.com/enquire.js/
CSS-Tricks article: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

How about using javascript for that?
<script type="text/javascript">
if (screen.width < 980) {
document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');
} else {
document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');
}
</script>

You can also using a plugin called minwidth:
minwidth(940, function () {
//do whatever you need
});
But it only works when the page loads not when resizing..
http://edenspiekermann.com/en/blog/responsive-javascript-helpers