jQuery - screen size condition

Question

if ($(window).width() < 768) {
   alert('This is tab screen size');
}
else {
   alert('This is desktop size');
}

 

Answer 1

var alterClass = function() {
  if (($(window).width() <= 480)){
           // if its smaller, do this
          $(".sidebar").addClass('modal');
          $(".sidebar").addClass('fade');
  }else{
          // Otherwise, reverse the classes
          $(".sidebar").removeClass('modal');
          $(".sidebar").removeClass('fade');
  }
}

$(window).resize(function(){
  alterClass();
});
//use function when page loads
alterClass();

 

Answer 2

var loginHeader = $('.head-container a.login');
$(loginHeader).html('Log in to Support Centre');

//mobile screen condition
if ($(window).width() < 500) {
 $(loginHeader).html('Login');
}
else {
 $(loginHeader).html('Log in to Support Centre');
}

 

Answer 3

var skinAds = $('.skin-ads-wrapper .skin-ads'),
    fundmyhome = 'https://lazacode.org.com?trackthis',
    mainContent = $('.news-wope-theme');
// skin ads condition
if ($(skinAds).length) {
    // $('.news-wope-theme').css({'top': '300px', 'margin-bottom': '300px', 'transition': 'all .5s .2s ease-in-out'});
    if (window.outerWidth >= 1900 ) {
        $(mainContent).css({'top': '375px', 'margin-bottom': '375px', 'transition': 'all .5s .2s ease-in-out'});
    }
    else if (window.outerWidth == 1600 ) {
        $(mainContent).css({'top': '294px', 'margin-bottom': '294px', 'transition': 'all .5s .2s ease-in-out'});
    } 
    else if (window.outerWidth == 1440 ) {
        $(mainContent).css({'top': '255px', 'margin-bottom': '255px', 'transition': 'all .5s .2s ease-in-out'});
    }
    else if (window.outerWidth == 1366 ) {
        $(mainContent).css({'top': '233px', 'margin-bottom': '233px', 'transition': 'all .5s .2s ease-in-out'});
    }
    else if (window.outerWidth == 1280 ) {
        $(mainContent).css({'top': '215px', 'margin-bottom': '215px', 'transition': 'all .5s .2s ease-in-out'});
    }
    else if (window.outerWidth == 1024 ) {
        $(mainContent).css({'top': '128px', 'margin-bottom': '128px', 'transition': 'all .5s .2s ease-in-out'});
    }
    else if (window.outerWidth == 768 ) {
        $(mainContent).css({'top': '100px', 'margin-bottom': '100px', 'transition': 'all .5s .2s ease-in-out'});
    }
    else {
    //   do nothing
    }
} 
else {
    //do nothing
}

 

Answer 4

else if ($(window).width() >= 768) {
  if (window.scrollY > 8200) {
    $('#awards2019 .floating-menu').removeClass('active');
  } 
  else {
  }
}

 

Answer 5

if ($(window).width() < 768) {
    if(parallaxUnit.length) {
        contentPara.after(parallaxAdCon);
        // parallaxAdCon.css({'display': 'block'});
        $(window).scroll(function(){
            if (window.scrollY > scrollHeight) {
                parallaxAdCon.hide();
                console.log('hide parallax')
            }
            else if (this.window.scrollY < scrollHeight) {
                parallaxAdCon.show();
                console.log('show parallax')
            }
        });
    }
}

 

Answer 6

if ($(window).width() < 768) {
    // if(parallaxUnit.length) {
    if((parallaxFlg.css('display') == 'none')){
        parallaxAdCon.hide();     
    }
    else {
        contentPara.before(parallaxAdCon);
        parallaxAdCon.hide();
        $(window).scroll(function() {
            if (window.scrollY > 1200) {
                parallaxAdCon.hide(); 
            }
            else {
                parallaxAdCon.show(); 
            }
        });

    }
}

 

Answer 7

if (document.cookie.indexOf('card_stacked_cookie=closed') !== -1) { 
  if (window.innerWidth < 767) { 
  // Code to execute when the screen width is below 767 
  } 
}