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/
Related
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;
Foundation has some JS functions to detect Media Queries. My question is how to define some functions just Firing in Medium-up media queries?
Exactly I want to firing Foundation Equalizer on medium-up or actually stop working on Mobile.
Thanks :)
#parhum,
I am not sure if this is the right approach but you can always remove the data-equalizer attribute and add it back on.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 767px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 767px
$('.row').attr('data-equalizer','data-equalizer');
}
else {
// window width is less than 767px
$('.row').removeAttr('data-equalizer');
}
}
For some reason, I was not able to get this working
Foundation.utils.register_media('custom', "(min-width: 767px)");
if (matchMedia(Foundation.media_queries['custom']).matches) {
// window width is at least 767px
$('.row').attr('data-equalizer', 'data-equalizer');
} else {
// window width is less than 767px
$('.row').removeAttr('data-equalizer');
}
Preview : #Fiddle | Code : #Editor
~Arvind
Foundation 6 supports a Equalizer property called "equalizeOn", which lets you set a breakpoint. Equalizer will do it's stuff to this breakpoint and up (Mobile First Approach).
Here's a link to the docs (Section, Plugin Options):
http://foundation.zurb.com/sites/docs/equalizer.html
You can set the option via data attributes in your HTML or via JavaScript.
I'm having a problem detecting a retina iPad (and similar devices) using just screen.availWidth and window.devicePixelRatio. The problem is that iPhones and iPads give the number of dips for screen.availWidth whereas android devices seem to report the number of physical pixels so I can't reliably do screen.availWidth / window.devicePixelRatio to calculate if the screen is of a tablet size.
Is there some other DOM property I can use to help me?
edit - To sum up in a way which hopefully makes clear that the question isn't a duplicate
How can I tell if screen.availWidth reports a value that has already been adjusted to take account of window.devicePixelRatio
That should help
var retina = (window.retina || window.devicePixelRatio > 1);
UPDATE
Retina.isRetina = function(){
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\
(min-resolution: 1.5dppx)";
if (root.devicePixelRatio > 1)
return true;
if (root.matchMedia && root.matchMedia(mediaQuery).matches)
return true;
return false;
};
I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.
Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)
measure window.devicePixelRatio and screen.availWidth
Write a style tag to the head which includes a media query something like the following
#my-test-el {
display: none;
visibility: visible;
}
#media screen and (min-device-width:screen.availWidth) {
#my-test-el {
visibility: hidden;
}
}
Append <div id="my-test-el"> to the page
Read off the style.visibility attribute. If it equals hidden then the css value is the same value as screen.availWidth => screen.availWidth has been preadjusted for dpr.
edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too
edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful
This Modernizr plugin may help : Modernizr Retina : HiDPI Test
Note: Requires Modernizr's Media Queries feature
I have been looking for an answer to this problem for hours and can't find anything that works.
I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.
I have a script for returning the window size and putting that value into a variable.
I have got it to show a message if the variable value is less than 1056. (for testing)
I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.
The id of the image I'm trying to hide is #go2.
here is a part of the script I have been trying to get to work:
if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';
I have had to use {literal} tags as the pages are using SMARTY templates!
I am very new to javascript and jQuery and wouold appreciate any help.
Thanks.
To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:
jQuery(window).resize(function() {
if(jQuery(window).width() < 1056) {
jQuery(".hide-these").hide();
}
});
You can do, with jQuery:
if(viewportwidth <1056) {
$('.target').hide();
}
Also, you can hide the elements with CSS3, like so:
#media only screen and (min-width: 1056px) {
#go2 {
display:none;
}
}
CSS3 media queries do what you want without Javascript, however browser support is pretty patchy:
http://www.w3.org/TR/css3-mediaqueries/
Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.
In Javascript is there a direct way (not involving parsing the css code) to determine which media query is active?
For instance I have two queries:
#media screen and (max-width:800px)
#media screen and (min-width:801px)
without parsing and looking at the clientWidth, how can I tell which one of these has evaluated to true.
Though this is an old question it ranks highly when googling for this problem.
Window.matchMedia is official and is supported by all major browsers (IE10+) and will allow you to query if a certain media query currently matches.
From the original question:
if (window.matchMedia('screen and (max-width:800px)').matches) {
// it matches
} else {
// does not match
}
You can also listen for when the query match result changes by attaching an event listener to the MediaQueryList that window.matchMedia returns:
var mql = window.matchMedia('screen and (max-width:800px)');
mql.addEventListener(
function(mq) {
if (mq.matches) {
// it matches
} else {
// does not match
}
}
);
Paul Irish's MatchMedia may do the trick:
https://github.com/paulirish/matchMedia.js
Would that suit what you are trying to do?
To see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
Hi and i hope this helps, am actually adding a class to a selector and i am working with this tool: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/
in fact, they have a clear example of what is turn on within the resized window here
http://robnyman.github.io/matchmedia/
in my case am just doing specific task when am on a specific size that you can get using the function.
I'm not sure how would you know which media-query is active, but...
...can't you just check the screen width with javascript?
if ( window.innerWidth >= 801 ) {
// #media screen and (min-width:801px)
} else {
// #media screen and (max-width:800px
}
or, what am i missing here?