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);
}
});
Related
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');
}
})
I'm trying to make my simple javascript function (no jQuery) log a message to the console when the browser is resized to over or under 890px. This code works on load, but only states the starting width when the page is loaded:
if (window.innerWidth < 890) {
console.log('Less than 890px');
} else {
console.log('890px or more');
}
But my code below using a window event doesn't work:
if (window.attachEvent) {
window.attachEvent('onresize', function() {
if (window.innerWidth < 890) {
console.log('Less than 890px');
} else {
console.log('890px or more');
}
})};
Can someone explain what I'm doing wrong here? I'm relatively new to javascript. Thanks for any help here.
window.addEventListener('resize', () => {
if (window.innerWidth < 890) {
console.log('Less than 890px');
} else {
console.log('890px or more');
}
});
try this
if(window.attachEvent) {
window.attachEvent('onresize', function() {
if (window.innerWidth < 890) {
console.log('Less than 890px');
} else {
console.log('890px or more');
}
});
}
else if(window.addEventListener) {
window.addEventListener('resize', function() {
if (window.innerWidth < 890) {
console.log('Less than 890px');
} else {
console.log('890px or more');
}
}, true);
}
else {
console.log('browser does not support Javascript event binding');
}
onresize is to be used as an attribute in your html. e.g. <body onresize="resizePage()"></body>
The correct event is resize. Try following
if (window.attachEvent) {
window.attachEvent('resize', function() {
if (window.innerWidth < 890) {
console.log('Less than 890px');
} else {
console.log('890px or more');
}
})
}
Please note, you can also consider using addEventListener. For details, refer to another answer here
Just try the following code
window.onresize = resize;
function resize()
{
if(document.body.clientWidth < 890)
{
alert("resize event detected!");
}
}
const on = (e, i, t = window) => typeof t.addEventListener === 'function'
? t.addEventListener (e, i)
: t.attachEvent ('on' + e, i)
const test = () => console.log (window.innerWidth < 890 ? '< 890' : '>= 890')
on ('resize', test)
Just use:
window.onresize = function(event) {
//your code here
};
I am attempting to detect when a device changes it's orientation and update my component to reflect the new orientation.
The problem with my approach is that my event lives outside of the components life-cycle which in turn makes the component variable is undefined thus rendering the code inside the event absolutely useless.
Anyone that has some insight into what I could do to achieve this would great.
afterRender: function(component,helper){
this.superAfterRender();
window.addEventListener("orientationchange", function() {
window.setTimeout(function(){
if(window.innerWidth <= 768) {
component.set('v.deviceWidth','small');
} else if(window.innerWidth > 768 && window.innerWidth < 1440) {
component.set('v.deviceWidth','medium');
} else if(window.innerWidth >= 1440) {
component.set('v.deviceWidth','large');
}
},500);
});
}
Good solution for you:
https://github.com/ReactiveX/RxJS
Example here: https://golosay.net/rxjs-subjects/
Just create subject, and:
const sub = new Rx.Subject();
window.addEventListener("orientationchange", function() {
sub.next(window.innerWidth)
});
In component:
sub.subscribe((value)=>{
if(value <= 768) {
c.set('v.deviceWidth','small');
} else if(value > 768 && value < 1440) {
c.set('v.deviceWidth','medium');
} else if(value >= 1440) {
c.set('v.deviceWidth','large');
}
})
And don't forget unsubscribe when component will be destroy;
I'm having trouble with this logic. I'm trying to find a way where a single variable will have multiple values without using array. Here is my code
var num = {
from: 500,
to: 700
};
if (num == 500 && num == 600 && num==700) {
console.log("working");
}
else {
console.log("not working")
}
You could take a function for checking the range.
function check({ from, to }, value) {
return from <= value && value <= to;
}
var num = { from: 100, to: 300 };
if (check(num, 500) && check(num, 600) && check(num, 700)) {
console.log("working");
} else {
console.log("not working")
}
console.log(check(num, 200));
Use a function and try comparing the values.
var num = {
from: 100,
to: 300,
checkValue:function(num){
return this.from <= num && num <= this.to
}
};
console.log('1st check');
if (num.checkValue(100) && num.checkValue(600) && num.checkValue(700)) {
console.log("working");
}
else {
console.log("not working")
}
console.log('2nd check');
if (num.checkValue(120) && num.checkValue(150) && num.checkValue(250)) {
console.log("working");
}
else {
console.log("not working")
}
To access your object (Variables with multiple values) you have to do like this :
var num = {
from: 100,
to: 300
}
console.log(num.from); //This will print 100
console.log(num.to); //This will print 300
and you can do this
num.from += 1;
console.log(num.from); //This will print 101
So your (Ryan Arellano) code must be like this :
function check(num, value) {
return num.from <= value && value <= num.to;
}
var num = { from: 100, to: 300 };
if (check(num, 500) && check(num, 600) && check(num, 700)) {
console.log("working");
} else {
console.log("not working")
}
console.log(check(num, 200));
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 {
}
});