How to correctly call a jquery-function within a modernizr.touch-loop?

Question

I am using Modernizr 2.7.1 to detect if a user is using a touch device in order to alternate between a fullscreen video background with BigVideo.js or a static picture for mobile devices:

$(function() {
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
if (Modernizr.touch) {
            BV.show('/img/background-dock.jpg');
        } else {
            BV.show('/vid/test.mp4', {altSource:'/vid/test.ogv', ambient:true});
        }
});

Unfortunately, the static image is not responsive and does not scale well, especially on smaller screens.

I would therefore like to display the image with another script using vegas.js, which on its own works perfectly:

$(function() {
        $.vegas({
            src:'/img/background-dock.jpg'
        });
        $.vegas('overlay', {
            src:'/img/overlays/01.png'
        });
    }); 

If I am placing this code inside the BV.show('/img/background-dock.jpg'); loop, the code is not executing, i.e. nothing happens:

 <script>

$(function() {
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
if (Modernizr.touchevents) {
            BV.show($(function() {$.vegas({src:'/img/background-dock.jpg'}); }););
        } else {
            BV.show('/vid/test.mp4', {altSource:'/vid/test.ogv', ambient:true});
        }
});
</script> 

Unfortunately, my Javascript knowledge is still limited.

How do I place the code correctly in the loop?

Answer 1

(cross-posting from my answer on the github issue...)

Modernizr.touch has been renamed to Modernizr.touchevents, becuase that what it really is - a detect for touchevents. And as you can see in #448,

Sometimes you have a touch device.. Sometimes you have webkit touch events. Sometimes you have MS pointer events..

So, in this case, you would also want to be doing (Modernizr.touchevents || Modernizr.pointerevents).

Unfortunately, the pointerevents detect is not in the 2.* branch, as it is built around 3.0, which is unreleased. You would need to either build your modernizr build from the current master branch (instructions are included in the readme), or manually add the pointerevents detect to your modernizr build.

That being said, a touch screen is a poor indicator for mobile. A lot of new windows 8 tablets are touch enabled, and would get your static background.

What you are really doing is really checking if autoplay is supported. We have a detect for that, but you would need to back port it.

cheers

---

Now that that is covered, on yo your question...

BV.show doesn't accept a function as an argument.

If you are only using it in this one place, you really don't need to be having your visitors download an entirely separate library (vegas) to scale a picture. You can recreate what they are doing by looking at the css that is generated for that element, and adding it to your page. Then, instead of the BV.show(vegasstuff) that you are doing now, you can toggle a class on the HTML element (just like how Modernizr adds it's classes) to optionally hide it or show it.

something like...

<script>
  if (Modernizr.touch) {
    $('html').addClass('showOverlay');
  }
  else {
    // do the video
  }
</script>
<style>
  .overlay {
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .showOverlay .overlay {
    display: block;
    background-image: url(/img/background-dock.jpg);
  }
</style>