Solved

Disable jQuery functions for certain media query widths

Posted on 2013-01-15
31
513 Views
Last Modified: 2013-01-21
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
Comment
Question by:mike99c
  • 13
  • 11
  • 6
  • +1
31 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38780322
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
 

Author Comment

by:mike99c
ID: 38780393
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38780473
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38780484
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38780511
edit: "widths that accomodate your content/layout/design" -  pixel based media queries can be device agnostic.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38780529
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
 
LVL 5

Assisted Solution

by:Neil_Bradley
Neil_Bradley earned 250 total points
ID: 38781210
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
 

Author Comment

by:mike99c
ID: 38781777
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38782129
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
 

Author Comment

by:mike99c
ID: 38782171
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38782190
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38782202
btw, working with pixels is not dated. computers display information in pixels.
0
 

Author Comment

by:mike99c
ID: 38782238
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38782275
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38782335
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38782364
and btw, i can almost guaratee you'll be making device specific adjustments whether you use ems, pixels, or your granny's sliderule. :)
0
 

Accepted Solution

by:
mike99c earned 0 total points
ID: 38783637
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38784391
Hmmm...... DKE perhaps.

Cd&
0
 

Author Comment

by:mike99c
ID: 38784453
Sorry what does DKE mean?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38784592
Dunning-Kruger Effect


Cd&
0
 

Author Comment

by:mike99c
ID: 38785001
Dunning and Kruger were awarded the 2000 satirical Ig Nobel Prize in Psychology for their paper,
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38785092
Actually it is pretty good satire if you read it right and consider what it implies.

Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38792587
LOL

http://ethanmarcotte.com/

You should have a look at his media queries.
0
 

Author Comment

by:mike99c
ID: 38792630
kozaiwaniec

Ethan did not come up with the Goldilocks approach but endorsed it in his tweet.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38792696
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
 

Author Comment

by:mike99c
ID: 38792749
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38792844
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
 

Author Comment

by:mike99c
ID: 38792855
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38792960
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38793782
I needed a little entertainment... this is almost SNL. ;^)

Cd&
0
 

Author Closing Comment

by:mike99c
ID: 38800507
This method has been tried and tested and found to work correctly.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now