通过使用针对IE和Safari的浏览器检测来关闭Stellar.js

Question

I'm still learning jQuery, and I'm trying to figure out why this script isn't working.

The goal is to turn off Stellar.js parallax for mobile, which I've done by detecting a specific CSS class. I'm also trying to turn it off on Safari and IE because of jumpy performance when using a mousewheel to scroll. Any assistance troubleshooting, since I know the code is syntatically valid, would be awesome.

(It's wrapped in the "jQuery(document).ready(function($)" to function well in WordPress.)

 jQuery(document).ready(function($) {   
   $(document).ready(function() {
   // run test on initial page load
   checkSize();

   // run test on resize of the window
   $(window).resize(checkSize);
   });

   //Function to the css rule
   function checkSize(){
   if ($(".parallax").css("background-attachment") == "inherit" ){
      $(function () {
      $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
     });
   });
   }
   if ($(".parallax").css("background-attachment") == "fixed" ){
      $(function () {
      $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
      });
   });
   } 
   }

   // Opera 8.0+
   var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

   // Firefox 1.0+
   var isFirefox = typeof InstallTrigger !== 'undefined';

   // Safari 3.0+ "[object HTMLElementConstructor]" 
   var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

   // Internet Explorer 6-11
   var isIE = /*@cc_on!@*/false || !!document.documentMode;

   // Edge 20+
   var isEdge = !isIE && !!window.StyleMedia;

   // Chrome 1+
   var isChrome = !!window.chrome && !!window.chrome.webstore;

   // Blink engine detection
   var isBlink = (isChrome || isOpera) && !!window.CSS;

   // check if Safari or IE and disable parallax
   if(!isSafari || !isIE)
   {
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
       });
    }

});

Update: I cleaned this up, but now I'm getting an error when I inspect that isFirefox, isChrome, etc., are not defined. Is that because I'm calling the variables incorrectly?

jQuery(document).ready(function($) {    
   $(document).ready(function() {

   // hella browser checks  
   // Opera 8.0+
   var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

   // Firefox 1.0+
   var isFirefox = typeof InstallTrigger !== 'undefined';

   // Safari 3.0+ "[object HTMLElementConstructor]" 
   var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

   // Internet Explorer 6-11
   var isIE = /*@cc_on!@*/false || !!document.documentMode;

   // Edge 20+
   var isEdge = !isIE && !!window.StyleMedia;

   // Chrome 1+
   var isChrome = !!window.chrome && !!window.chrome.webstore;

   // Blink engine detection
   var isBlink = (isChrome || isOpera) && !!window.CSS;

   // run test on initial page load
   checkSize();

   // run test on resize of the window
   $(window).resize(checkSize);
});

   //Function to the css rule
   function checkSize(){
     if ($(".parallax").css("background-attachment") == "inherit" ){
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
       });
     });
    }
    if ( ($(".parallax").css("background-attachment") == "fixed" ) && (!isFirefox || !isChrome || !isBlink || !isOpera) ) {
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
       });
    });
   } 
   } 
});  

Answer 1

This resolves it. Turns out I had to do it within the first function and I needed to call the variables within the screen size check. I hope this is helpful to someone else!

jQuery(document).ready(function($) {    
$(document).ready(function() {

// run test on initial page load
checkSize();

// run test on resize of the window
$(window).resize(checkSize);
});

// hella browser checks  
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

//Function to the css rule
function checkSize(){
if ($(".parallax").css("background-attachment") == "inherit" ){
    $(function () {
    $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
    });
});
}
if ( ($(".parallax").css("background-attachment") == "fixed" ) && (isFirefox || isChrome || isBlink || isOpera) ) {
    $(function () {
    $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
    });
});
} 
} 
});