使用 IE 和 Safari 的浏览器检测关闭 Stellar.js
Turning off Stellar.js on by using browser detection for IE and Safari
我仍在学习 jQuery,我正在尝试找出此脚本无法正常工作的原因。
目标是关闭移动设备的 Stellar.js 视差,我通过检测特定的 CSS class 来完成。我还试图在 Safari 和 IE 上将其关闭,因为使用鼠标滚轮滚动时性能不稳定。任何帮助故障排除,因为我知道代码在语法上是有效的,都会很棒。
(它包含在 "jQuery(document).ready(function($)" 中以在 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,
});
}
});
更新: 我清理了这个,但现在我在检查 isFirefox、isChrome 等未定义时遇到错误。那是因为我错误地调用了变量吗?
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,
});
});
}
}
});
这就解决了。原来我必须在第一个函数中完成它,我需要在屏幕尺寸检查中调用变量。我希望这对其他人有帮助!
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,
});
});
}
}
});
我仍在学习 jQuery,我正在尝试找出此脚本无法正常工作的原因。
目标是关闭移动设备的 Stellar.js 视差,我通过检测特定的 CSS class 来完成。我还试图在 Safari 和 IE 上将其关闭,因为使用鼠标滚轮滚动时性能不稳定。任何帮助故障排除,因为我知道代码在语法上是有效的,都会很棒。
(它包含在 "jQuery(document).ready(function($)" 中以在 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,
});
}
});
更新: 我清理了这个,但现在我在检查 isFirefox、isChrome 等未定义时遇到错误。那是因为我错误地调用了变量吗?
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,
});
});
}
}
});
这就解决了。原来我必须在第一个函数中完成它,我需要在屏幕尺寸检查中调用变量。我希望这对其他人有帮助!
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,
});
});
}
}
});