2

I'm using jQuery Backstrech plugin to implement full size background images to a responsive website.

I want the jquery code to run ONLY for handheld devices, or only for viewports smaller than 480 px... can it be done?

Here's the code i'm using to implement the script & background image:

jQuery.noConflict(); jQuery(document).ready(function(){ jQuery.backstretch("www.url.com/images/bg.jpg", {speed: 150}); });

How could i add some sort of jQuery conditional to make this code execute for clients with with of 480 pixels or less?

thanks in advance for any help!

Improve this question

4 Answers 4

Reset to default
3

You can do this with the http://www.modernizr.com/docs/#mq

Modernizr.load({ test: Modernizr.mq('only screen and (max-width: 480px)'), yep : 'path-to-js/backstrech.js', complete : function () { //init the backstrech here } });

(Have a look here for media queries for stanard devices.)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Brilliant! It did the trick... i didn't know that modernizr could do that... what an awesome script! Is there a way to have this code react do dynamic changes in the viewport size?
you mean portrait vs landscape? try: $(window).resize(function() {alert("Viewport changed")}); I'm not sure if this event is triggered on viewport change.. but worth a test
1

jQuery makes this really easy:

jQuery.noConflict(); jQuery(function(){ if (jQuery(window).width() <= 480 /* Optional */ || navigator.userAgent.test(/browser_sniff_1/) /* Optional */ || navigator.userAgent.test(/browser_sniff_2/) /* Etc. */ ) { jQuery.backstretch("www.url.com/images/bg.jpg", {speed: 150}); } });

That does the following:

  1. Enables noConflict mode.
  2. Hooks the ready event via shorthand syntax.
  3. Looks to see if the window is <= 480 pixels (I assumed you wanted <=, not just <). If so, no other checks needed, we go into the body of our if.
  4. Optionally, you can include other browser-sniffing if you want by looking at navigator.userAgent (or being more thorough, here's an article on it). I wouldn't bother, though (avoiding browser sniffing is a Good Thingtm), unless you really have a strong reason to do the backstretch thing on larger screens.
  5. If we're stretching, triggers the backstretch plugin.
Improve this answer

5 Comments

@Talbatz: I completely misunderstood the question. Updated.
@TJ thanks for taking the time to elaborate! this is a really neat trick, so it really empowers me to react to viewport sizes AND user agent, huh? nice!
@Talbatz: No worries, sorry I misunderstood initially. I went and looked at the earlier versions of the question, and it was definitely my bad. Good luck,
Say, if i wanted the same conditional above to react to dynamic resizing of the viewport, how could i achieve that? of course i'd want to have the fun of resizing my browser to see how the responsive website responds (sure is fun :-) but also this might be good in case of tablets changing from portrait to landscape etc...
@Talbatz: I don't know anything about the backstretch plug-in, so I don't know how you turn it off or similar. But in terms of detecting resize, just move the code above (with modifications to handle un-doing the backstretch call if necessary) into a function, and call that function both on ready (as above) and on jQuery(window).resize(...).
0

Just did this for iPad detection.

<script> (function($) { $.fn.isIPad = function() { return (navigator.platform.indexOf("iPad") != -1); } })(jQuery); if($(window).isIPad()) { document.write('<script src="', '/path/to.js', '" type="text/JavaScript"><\/script>'); } else { // run other functions here } </script>

Add the various user agents that you will need to the navigator.platform object or use that function to determine the viewport size.

Improve this answer

3 Comments

Not exactly T.J.Crowder, i am loading jQuery anyway - i just don't want to load the heavy background image on to mobile devices. Sorry if i was misunderstood :-)
@Talbatz: Gah! That completely changes things, I just plain misunderstood.
@Andrew: That will detect the iPad, but not (say) Android devices, Blackberrys, or just windows &lt; 480px as the OP requested.
0

A simple statement should do the trick here:

if (window.screen.availWidth <= 480) { // Your code }
Improve this answer

2 Comments

That's great, except that the OP said "viewport," not "screen." window.screen is quite useful, but doesn't tell you the size of the window the site is loaded in.
What's OP? anyway i tried this but couldn't get it to work... <script> jQuery.noConflict(); jQuery(document).ready(function(){ if (window.screen.availWidth <= 480) { jQuery.backstretch("<?php echo get_template_directory_uri();?>/images/bg.jpg", {speed: 150}); } }); </script>

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.