How can i combine these 3 same jquery code with different classes? - javascript

I use this jquery to add class to certain elements when it's scrolled but i used 3 of them and they all basically same except the classes i use. Since i add them seperately to the page they effect the page speed even if it is minimum so how i can i make them into just one jquery and not three?
Short version: How to combine these 3 into 1?
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 ||
document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.ast-primary-header-bar').addClass('headercoloring');
} else {
console.log('no');
jQuery('.ast-primary-header-bar').removeClass('headercoloring');
}
})
second:
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 ||
document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.astra-logo-svg').addClass('filterr');
} else {
console.log('no');
jQuery('.astra-logo-svg').removeClass('filterr');
}
})
third:
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 ||
document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.ast-below-header-bar').addClass('headernarrowing');
} else {
console.log('no');
jQuery('.ast-below-header-bar').removeClass('headernarrowing');
}
})

Pretty much starting from outside making all the equal parts as the same codebase.
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.ast-primary-header-bar').addClass('headercoloring');
jQuery('.astra-logo-svg').removeClass('filterr');
jQuery('.ast-below-header-bar').removeClass('headernarrowing');
} else {
console.log('no');
jQuery('.astra-logo-svg').addClass('filterr');
jQuery('.ast-primary-header-bar').removeClass('headercoloring');
jQuery('.ast-below-header-bar').addClass('headernarrowing');
}
})

Related

Issue with checking if item is in DOM and the executing the javascript function

I'm making a webpage that has two different navbars... Lets say I named them navbar1 and navbar2.. soo the navbar1 is being used on the home page of the web site and navbar2 on all other sub pages... I have written a pure Javascript function that checks if the navbar1 exists in DOM and if it does then it does something... if navbar1 doesent exist in DOM it should ignore that part of code and move forward with the rest...
so now I have this issue that I spent several hours now trying to resolve... and I just can figure it out... When I go to the home page the code works... everything that should happen to navbar1 happens... but if I go to a subpage that doesn't use navbar1 I get this error in the console: "Cannot read properties of null (reading 'getBoundingClientRect')"
I would apreciate some help... and if it matters I don't have much experience with javascript so :)
So here's my JS code...
function docReady(fn) {
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
var className = "scroll";
var scrollTrigger = 60;
var navTogler = document.getElementById('navbar-toggler');
var navbar1 = document.getElementById('navbar1');
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
if (isInViewport(navbar1)) {
navTogler.addEventListener('click', classToggle);
function classToggle() {
navbar1.classList.toggle('has-bg');
if (navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
if (navbar1.classList.contains('scroll') && navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
if (!navbar1.classList.contains('scroll') && !navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
}
else {
// console.log("something");
}
}
window.onscroll = function() {
if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
document.getElementById("navbar1").classList.add(className);
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
else {
document.getElementById("navbar1").classList.remove(className);
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
}
};
}
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
grid: {
rows: 2,
},
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
console.log("hello swiper");
});
isInViewport() should return false if the element doesn't exist.
var isInViewport = function (elem) {
if (!elem) {
return false;
}
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

jquery animate method with arrow function not executed?

I have an animate method with an arrow function which is not getting executed for some reason, while using angular class property like: this.innerWidth which gets device width. Thank you.
$(".window").animate(() => {
if (this.screenWidth >= 1281) {
console.log(this.screenWidth);
}
else if (this.screenWidth >= 1025 && this.screenWidth <= 1280) {
console.log(this.screenWidth);
}
},
5000,
"swing",
() => {
//call back function
}
);
Here you are missing to close one curly braces for "else if" condition
this the valid code
$(".window").animate(() => {
if (this.screenWidth >= 1281) {
console.log(this.screenWidth);
}
else if (this.screenWidth >= 1025 && this.screenWidth <= 1280) {
console.log(this.screenWidth);
}
},
5000,
"swing",
() => {
//call back function
}
);
animate() function accepts below arguments
(selector).animate({styles},speed,easing,callback)
As per the above syntax your code should be:
$(".window").animate({}, 5000, "swing", () => {
if (this.screenWidth >= 1281) {
console.log(this.screenWidth);
} else if(this.screenWidth >= 1025 && this.screenWidth <= 1280) {
console.log(this.screenWidth);
}
});

Choppy animation on scroll

I'm attempting to animate a block based on how far scrolled down the page I am, by using jQuery to change the CSS attribute.
when using a mouse wheel, there is a slight flicker of where it was and where it ends up being shown at the same time.
An example of this can be viewed at the following link.
http://fiddle.jshell.net/LPvES/10/show/light/
This behaviour is not smooth and feels 'choppy'.
I have no idea why this is happening. The expected behaviour should be this:
http://jsfiddle.net/LPvES/10/embedded/result/
I understand the irony of linking the exact same example. Only difference I can see between the two is that one is embedded in an iFrame, which is not a solution I want to use.
my JS code:
var icons = {
header: "iconClosed",
activeHeader: "iconOpen"
};
$('.main--content').accordion({
header: ".accordion header",
heightStyle: "content",
collapsible: true,
icons: icons
});
function accordionIcon() {
var icon = $('.ui-accordion-header-icon.iconOpen');
var iconClosed = $('.ui-accordion-header-icon.iconClosed');
if (icon[0]) {
var article = $('.ui-accordion-header-icon.iconOpen').closest('.article')
if (article.offset().top - window.scrollY > 200) {
if (icon.css('top') !== 0) {
icon.css('top', 0)
}
} else if (article.offset().top - window.scrollY < 200) {
// article.outerHeight() - (icon.offset().top - article.offset().top) > 0
if (article.offset().top - (window.scrollY + 200) < article.outerHeight() && window.scrollY + $(window).height() - article.offset().top < article.outerHeight()) {
var position = (window.scrollY + 200) - article.offset().top
// if(icon.css('transform') === none){
icon.css('top', position)
// }
if (icon.hasClass('iconExtend')) {
icon.removeClass('iconExtend')
}
} else if (window.scrollY + $(window).height() - article.offset().top > article.outerHeight()) {
if (icon.css('top') !== article.outerHeight() + 30) {
icon.css('top', article.outerHeight() + 30)
}
if (!icon.hasClass('iconExtend')) {
icon.addClass('iconExtend')
}
} else {
if (icon.css('top') !== article.outerHeight()) {
icon.css('top', article.outerHeight())
}
if (!icon.hasClass('iconExtend')) {
icon.addClass('iconExtend')
}
}
}
}
if (iconClosed[0]) {
if (iconClosed.css('top') !== 0) {
iconClosed.css('top', 0)
}
if (iconClosed.hasClass('iconExtend')) {
iconClosed.removeClass('iconExtend')
}
}
}
function raf() {
window.requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
requestAnimFrame(raf);
accordionIcon();
}
raf();
Any help would be appreciated.

Background image change on scroll

I would like to change background image of one div on scrolling the browser.
Here is my code
$element = $('.girlBg'),
classNameOne = 'girlBg1';
classNameTwo = 'girlBg2';
classNameThree = 'girlBg3';
classNameFour = 'girlBg4';
classNameFive = 'girlBg5';
classNameSix = 'girlBg6';
$document.scroll(function () {
if ($document.scrollTop() >= 300) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 600) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 900) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 1200) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 1500) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 1800) {
$element.addClass(classNameSix);
} else {
}
});
Now, when i scroll 300px, the first class adding without any problem, but when I scroll more no other classes adding to it.
Please help. Thanks..
you can reverse the conditions
if ($document.scrollTop() >= 1800) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 1500) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 1200) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 900) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 600) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 300) {
$element.addClass(classNameSix);
} else {
}
Its because it is always going into your first if.
if ($document.scrollTop() >= 300 && $document.scrollTop() < 600) {
You need a less than check in your if.
You need range as mentioned in above answer of #Thomas Harris. But you need range for all condition. Try this:
$document.scroll(function () {
if ($document.scrollTop() >= 300) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 600 && $document.scrollTop() < 600) ) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 900 && $document.scrollTop() < 900)) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 1200 && $document.scrollTop() < 1200)) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 1500 && $document.scrollTop() < 1500)) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 1800 && $document.scrollTop() < 1800)) {
$element.addClass(classNameSix);
} else {
}
});

Redirection based on page title/ location

i am trying to get my Online Help to redirect to a phone version. However, i am generating the phone and desktop versions from a single source so I want to have a piece of code that does it each way (phone <-769-> desktop). I got the redirection due to size happening using:
if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
but when I was on the phone page it kept trying to load the page (i can see why). I had a go myself but I am new to this, here is my (failed) attempt:
windowWidth = window.innerWidth;
<!--
if (location.pathname = "/desktop/Selecting_a_School_Register.htm";)
{
} else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
}
</script><script>
if (location.pathname = "/phone/Selecting_a_School_Register.htm";)
{
} else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";
}
Any type of conditional statement needs a double '==' as opposed to a single '=' like your code example suggests. Also, you don't need a semi-colon after your string in your if statements.
Even better than a double equals is a triple equals which is a strict comparison operator
Try this:
windowWidth = window.innerWidth;
if (location.pathname === "/desktop/Selecting_a_School_Register.htm") {
}
else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
}
if (location.pathname === "/phone/Selecting_a_School_Register.htm") {
}
else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";
}
EDIT:
This code does exactly what you need:
var pathname = window.location.pathname
, width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
if (width <= 769 && pathname !== '/mobile.html') {
window.location = '/mobile.html';
}
if (width > 769 && pathname !== '/desktop.html') {
window.location = '/desktop.html';
}
Hi,
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
Example :
To check to see if the user is on any of the supported mobile devices:
if( isMobile.any() ) alert('Mobile');
To check to see if the user is on a specific mobile device:
if( isMobile.iOS() ) alert('iOS');
Thank you,
Vishal Patel

Categories

Resources