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,
});
});
}
}
});
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,
});
});
}
}
});