mardi 24 avril 2012
jQuery: how to use it only for mobile
Do you like this story?
Developing responsive web sites is not always easy. We have seen something about it with media queries, but that was aimed to managing CSS stylesheets. Today I'm going to show you how to deal with jQuery.
I've found the following trick somewhere on the web, but I don't remember where, so if you are the author please leave a comment and I will give you credit for it.
Let's try to clear up a bit the situation. We want to trigger some jQuery or, generally speaking, some JavaScript code just when the visit is coming from a smartphone. Because we know that those devices mainly have a screen width of 480px, we are going to use that as condition.
Main solution
Said that, it is quite easy to implement the solution. We basically have to check the screen width and then run the code:
jQuery.noConflict();
jQuery(function(){
if (jQuery(window).width() <= 480) {
yourCodeHere;
}
});
As you can see, we use window.width in jQuery to determine if the width is less or equal to 480. If so, we can insert our code (replace yourCodeHere with your jQuery code).The above solution is easy and effective, but there's another way of doing it.
"Modernizr.mq tests a given media query, live against the current state of the window."In order to conditionally load the external js file, we use a simple snippet:
Modernizr.load({
test: Modernizr.mq('only screen and (max-width: 480px)'),
yep : 'yourJSfile',
complete : function () {
//call the function inside yourJSfile
}
});
As you can see, we load yourJSfile only when the screen max width is 480px. After that, we use the code inside the loaded file.And that's all for today.
This post was written by: Franklin Manuel
Franklin Manuel is a professional blogger, web designer and front end web developer. Follow him on Twitter
0 Responses to “jQuery: how to use it only for mobile”
Enregistrer un commentaire