I'm working on a website with fancy parallax scrolling background and followed the tutorial from Mohiuddin Parekh (available here)

This is my javascript:

$(document).ready(function(){
// Cache the Window object
$window = $(window);

 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

    // Put together our final background position
    var coords = '50% '+ yPos + 'px';

    // Move the background
    $bgobj.css({ backgroundPosition: coords });

 }); // window scroll Ends

 });    

});

This works great. Now what I would like to do, is not to execute the javascript if the site is viewed with a mobile device (max-width: 768px). Unfortunately I'm not quite sure how to achieve this, any help is appreciated :)

I'm working on a website with fancy parallax scrolling background and followed the tutorial from Mohiuddin Parekh (available here)

This is my javascript:

$(document).ready(function(){
// Cache the Window object
$window = $(window);

 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

    // Put together our final background position
    var coords = '50% '+ yPos + 'px';

    // Move the background
    $bgobj.css({ backgroundPosition: coords });

 }); // window scroll Ends

 });    

});

This works great. Now what I would like to do, is not to execute the javascript if the site is viewed with a mobile device (max-width: 768px). Unfortunately I'm not quite sure how to achieve this, any help is appreciated :)

• javascript
• jquery
• css
• mobile
• parallax

• 2 Get the window width and wrap the scroll in an if like so, if(_window_width > 770){ your scroll code} (_window_width being the variable that holds the $(window).width()) – Patsy Issa Commented Apr 1, 2014 at 12:11
• developer.mozilla/en-US/docs/Web/API/Window.matchMedia – enapupe Commented Apr 1, 2014 at 12:43

1 Answer 1

document ready triggers when page start, and window resize when somebody manipulates window

$( window ).resize(function() {
$window = $(window);
if( $window .width() > 800){

 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

    // Put together our final background position
    var coords = '50% '+ yPos + 'px';

    // Move the background
    $bgobj.css({ backgroundPosition: coords });

 }); // window scroll Ends

 });    
}
});



$(document).ready(function(){
$window = $(window);
if( $window.width() > 800){
// Cache the Window object

 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

    // Put together our final background position
    var coords = '50% '+ yPos + 'px';

    // Move the background
    $bgobj.css({ backgroundPosition: coords });

 }); // window scroll Ends

 });    
}
});