• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 602
  • Last Modified:

Disable jQuery functions for certain media query widths

I am building a responsive website in which I use css3 media queries to detect the width in ems of the browser. For example:

<link href="/css/tablet-desktop.css" rel="stylesheet" media="all and (min-width: 33.236em)">

However I would like to disable certain JQuery functions for certain widths. For example I may want to disable an image magnifier for a product page when viewed on a mobile device. I may also want to disable the jQuery UI tabs function so the tabs collapse on top of each other when on a mobile device.

Is there a way to detect the width in ems of a browser in jQuery then use this to disable some jQuery functions?

Incidentally I do use modernizr but could not find any suitable functions to help me.
0
mike99c
Asked:
mike99c
  • 13
  • 11
  • 6
  • +1
2 Solutions
 
Kyle HamiltonData ScientistCommented:
why are you using ems for window widths? ems are relative values. what exactly is your min-width 33.236em relative to? it doesnt make sense.
0
 
mike99cAuthor Commented:
We are using the Goldilocks approach to responsive web design so our designs are device independent and not just applied to specific commercial devices such as iPads or iPhones.

Other approaches use speciifc pixel widths to cater for known devices. But this would mean having to set up more media queries and style sheets as new devices come on the market.

The following page explains it in more detail:
http://www.designbyfront.com/demo/goldilocks-approach/

When I first reviewed all the approaches to responsive design, I actually decided to tweet Ethan Marcotte (the father of responsive design) and this was his response:

Totally! Tuning your breakpoints to your content, rather than to known devices, is absolutely the way to go.

Also, em-based queries can be more future-proof than px-based ones
0
 
COBOLdinosaurCommented:
Goldilocks... I looked, I analyzed, I experimented... conclusion:  It is just as stupid as it sounds.  It assumes that users will only apply settings that work with the page.  Guess what? Pages adjust to users.  Users don't adjust they just go somewhere else.  

Yet another approach to responsive design that promises big, but is full of holes.  If this approach was valid; it would not be necessary you disable jquery function, because everything should resize perfectly.  However the em size is dependent on the font and point size; and user are known to have font preferences that will screw things up big time.

Cd&
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Kyle HamiltonData ScientistCommented:
im not talking about targeting specific device widths, but pixel widths which accomodate your design. then you can sync with widths in javascript which return pixel values. maybe there is a way in js to convert to ems, but thats extra processing and would be detrimental to performance.
0
 
Kyle HamiltonData ScientistCommented:
edit: "widths that accomodate your content/layout/design" -  pixel based media queries can be device agnostic.
0
 
COBOLdinosaurCommented:
To convert from em to pixels you must know the font size.  However there will still be some errors because the em calculation can still be off because the pixel value will not necessarily be the same across all fonts.  It is guaranteed that height and widths will get screwed up and dynamic positioning will be freaky.

Cd&
0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
I used this recently to help me enable various scripts depending on browser width.
<script type="text/javascript">
if ( $(window).width() > 960) {
// do something
}
</script>
The 960 refers to pixels so not sure if it helps you out..
Cheers,
N
0
 
mike99cAuthor Commented:
First of all I would just like to respond to some comments even though it does not really relate to my question.

COBOLdinosaur said:

If this approach was valid; it would not be necessary you disable jquery function, because everything should resize perfectly.

My desire to turn off certain JQuery functions has absolutely nothing to do with the responsive design approach I am taking. It is purely a need to disable scripting features that I do not need for certain devices. CSS3 media queries only work on style sheets and were never designed to affect scripting.

Also I am definately sticking to using ems as this ensures the design scales naturally and does not break the design even if a user has adjusted their settings.

The response from Neil_Bradley is closer to answering my question. However I looked around and found this script which converts pixels to ems and takes the default font size of the body into account:

http://filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/
0
 
Kyle HamiltonData ScientistCommented:
You want to give yourself a headache go ahead and base your layout on font size. Now you have to bloat your page with yet another plugin to accomodate your css.
0
 
mike99cAuthor Commented:
kozaiwaniec,

With respect you have completely misunderstood what i am doing here. This question was about turning off JQuery functions in certain modes and has NOTHING to do with the css. If there was a way to apply a style="display:none" to a script block then I would not have this problem.

As I mentioned before, my approach has been blessed by Ethan Marcotte himself and as far as I am concerned the use of pixels in media queries is a very dated approach.

I am going to post a working solution to this issue shortly and it certainly will not bloat my page.
0
 
Kyle HamiltonData ScientistCommented:
that script that converts to ems has to manipulate the DOM. thats one of the most expensive operations js can do, so yes, it will bloat your page.
window resizing is also one of the most expensive browser operations. now youre going to be doing DOM manipulation while resizing.

you may have convinced everyone you work with of the greatness of ems, sp its hard to go back. but i would strongly encourage you to think again. working with ems is going to give you a headache.

Marcotte is not god. dont believe everything you read on the internet.
0
 
Kyle HamiltonData ScientistCommented:
btw, working with pixels is not dated. computers display information in pixels.
0
 
mike99cAuthor Commented:
kozaiwaniec

I was simply referring to using pixels when designing websites to be responsive to different devices. Of course pixels will always be used but when you are trying to design a website which displays correctly on not only current devices but devices that have not been invented yet, then pixels is not the most efficient approach. Unless of course you want to define separate style sheets for different devices.
0
 
Kyle HamiltonData ScientistCommented:
i think this time youre misunderstanding what i said. you can (and should) use device agnostic queries. you decide based on your content and layout where the breakpoonts should be. it then doesnt matter what device youre looking on. its a hellavalot easier to maintain.
0
 
Kyle HamiltonData ScientistCommented:
ultimately though, you'll have to test your pages on actual devices that exist today.

by the time a radically different kind of device comes out, that doesnt use pixels and transports you to the moon, you will be redoing your pages anyway. the lifespan of a front end code base is only getting shorter and shorter.
0
 
Kyle HamiltonData ScientistCommented:
and btw, i can almost guaratee you'll be making device specific adjustments whether you use ems, pixels, or your granny's sliderule. :)
0
 
mike99cAuthor Commented:
Ok I have found a complete working solution. First of all thanks to Neil_Bradley for the window width tip. I combined this with the plug-in to calculate the ems:

http://filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/

The inserted code block shows the declaration in the head part which does the following:

1. Read the pixel width

2. Convert the pixel width to ems

3. Work out which device resolution is being used

4. Only declare the tabs function if it is not a mobile.


<script src="pxem.jQuery.js" type="text/javascript"></script>
<script>

  var pw;
  var emval;
  var device = "d";  // m = mobile, tn = tablet narrow, tw = tablet wide, d = desktop

  function GetWidths() {
  
	pw = $(window).width();       // width in pixels
	emval = $(pw).toEm();         
	emval = emval.split("em")[0]  // width in ems

	if( (emval > 33.236) && (emval <= 45) )  {
	
	   device = "tn"   // NARROW TABLET between 33.236em and 45em
	   
	} else if( (emval > 45) && (emval <= 63.236) )  {

	   device = "tw"   // WIDE TABLET between 45em and 63.236em

	} else if ( emval > 63.236 )  {

	   device = "d"    // DESKTOP over 63.236em
	
	} else {
	
	   device = "m"   // MOBILE less than or equal to 33.236em
	};
  
  };

  $(function() {

    GetWidths();
		
	if( device !== "m" )  {
	  $( "#tabs" ).tabs();
	};
			
  });
  
</script>

Open in new window

0
 
COBOLdinosaurCommented:
Hmmm...... DKE perhaps.

Cd&
0
 
mike99cAuthor Commented:
Sorry what does DKE mean?
0
 
COBOLdinosaurCommented:
Dunning-Kruger Effect


Cd&
0
 
mike99cAuthor Commented:
Dunning and Kruger were awarded the 2000 satirical Ig Nobel Prize in Psychology for their paper,
0
 
COBOLdinosaurCommented:
Actually it is pretty good satire if you read it right and consider what it implies.

Cd&
0
 
Kyle HamiltonData ScientistCommented:
LOL

http://ethanmarcotte.com/

You should have a look at his media queries.
0
 
mike99cAuthor Commented:
kozaiwaniec

Ethan did not come up with the Goldilocks approach but endorsed it in his tweet.
0
 
Kyle HamiltonData ScientistCommented:
what people do is a lot more telling than what they preach or endorse.

id look at what goldilocks did, but their site 504s
0
 
mike99cAuthor Commented:
This is the page to go:
http://www.designbyfront.com/demo/goldilocks-approach/

Also we have adapted their version and improved on it. It was really the idea of using ems that worked well for us.
0
 
Kyle HamiltonData ScientistCommented:
the point is to see what they actually do on their own website, not what they talk about doing.

the fact that their site doesnt even come up doesnt do much for their credibility.
0
 
mike99cAuthor Commented:
Well actually the point is to download their boilerplate example and give it a try. I was more interested in that and it has worked for me.
0
 
Kyle HamiltonData ScientistCommented:
That might be the point you're trying to make. You're still missing the point I made...

Doesn't matter... to each his own.
0
 
COBOLdinosaurCommented:
I needed a little entertainment... this is almost SNL. ;^)

Cd&
0
 
mike99cAuthor Commented:
This method has been tried and tested and found to work correctly.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 13
  • 11
  • 6
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now