Develop Reference

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

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

How do I make auto fontSize in Javascript?

I was trying to use the same function of fontSize() in mobile view to make it responsive but I don't know to do it. This is what I'm using in window view
document.getElementById('hakdog').onload = function () {func()};
function func() {
var str = document.getElementById("voter").innerHTML;
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "18px";
} else if(a >=30) {
voter.style.fontSize = "22px";
} else {
voter.style.fontSize = "27px";
}
}
Is there any same function for mobile view? I only know some function but I know its not responsive
$(document).ready(function(){
if($(window).width() < 480) {
$('h1').css('font-size','10px');
$('h2').css('font-size','8px');
$('h3').css('font-size','6px');
$('h4').css('font-size','4px');
}
});
EDIT
I was trying to make it responsive using java just like on the first code I given, normal .css is not gonna work since its only going to give for h1, h2, h3, etc. I was pointing out that I wanted to make the responsive if the full name reached 40 letters then the fontSize would be 18px same with other functions given
EDIT 5:30pm MARCH 29
This is what I tried so far but didn't work as what I expected.
document.getElementById('hakdog').onload = function () {func()};
function func() {
$(document).ready(function() {
function resizes() {
if($(window).width() < 480) {
var str = document.getElementById("voter").innerHTML;
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "9px";
} else if(a >=30) {
voter.style.fontSize = "10px";
} else {
voter.style.fontSize = "15px";
}
}
}
resizes();
$(window).resize(resizes);
})
}

Edit: Made changes to include the font size based on the length of the content.
This should work. You can check this out on the full page in the below code snippet.
$(document).ready(function() {
function resizeMe() {
if ($(window).width() < 480) {
if ($("#name").text().length < 5) {
$('h1').css('font-size', '46px');
} else {
$('h1').css('font-size', '10px');
}
$('h2').css('font-size', '8px');
$('h3').css('font-size', '6px');
$('h4').css('font-size', '4px');
} else {
$('h1').css('font-size', '20px');
$('h2').css('font-size', '18px');
$('h3').css('font-size', '16px');
$('h4').css('font-size', '14px');
}
}
resizeMe();
$(window).resize(resizeMe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="name">Helo</h1>
<h2>Yes</h2>
<h3>Nooooooooooooooooooooooooooo</h3>
<h4>okkkkkk</h4>

Do you try to change 'px' to 'rem', 'rem' resize in relation to the size of the screen.

This is what i meant for auto sizing for every device
var wid = $(window).width();
if(wid < 320) {
var str = document.getElementById("voter").innerHTML
var a = str.length;
if(a >= 40) {
voter.style.fontSize = "9px";
} else if(a >= 25) {
voter.style.fontSize = "11px";
} else {
voter.style.fontSize = "15px";
}
}
Thanks for everyone commented out!

Javascript and Return Function

I am working on a lab for school and having a hard time getting a return value from another function. I think I am just missing one thing and cannot figure it out. The function is called from an HTML document and depending on the number inputted will return the letter grade. Below is my code:
function submitGradeForconversion() {
var numGradeElement = document.getElementById("numGrade");
var numGrade = Math.round(numGradeElement.value);
if (numGrade >= 0 && numGrade <= 100) {
document.getElementById("letterGrade").innerHTML = convertGrade(numGrade);
} else {
alert("Please enter a number between 0 and 100!")
}
}
function convertGrade(numGrade) {
if (numGrade >= 95) {
return numGrade(A);
}
}
The HTML is just a basic input box with a button to call the first function. Any assistance would be greatly appreciated. Thanks

function submitGradeForconversion() {
var numGradeElement = document.getElementById("numGrade");
var numGrade = Math.round(numGradeElement.value);
if (numGrade >= 0 && numGrade <= 100) {
document.getElementById("letterGrade").innerHTML = convertGrade(numGrade);
} else {
alert("Please enter a number between 0 and 100!")
}
}
function convertGrade(numGrade) {
if (numGrade >= 95) {
return "A";
}
if (numGrade >= 75) {
return "B";
}
if (numGrade >= 55) {
return "C";
}
if (numGrade >= 35) {
return "D";
}
if (numGrade >= 15) {
return "E";
} else{
return "F";
}
}
<input id="numGrade" onChange="submitGradeForconversion()" />
<div id="letterGrade">X</div>

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

Browser Resize Comparative Statement

A current jQuery project of mine requires browser resize (width AND height) functionality, some of the supported resolutions are funky when compared to each other. Any suggestions to improve this comparative statement are welcome. I tried to close any holes, but I've a feeling there are a few left. Please note I'm also checking for a variable of 'isIos'.
Here's the script:
function getBrowserWidth() {
$(window).load(function () {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
});
$(window).resize(function () {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
});
}
function getBrowserHeight() {
$(window).load(function () {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
});
$(window).resize(function () {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
});
}
var browserWidth = getBrowserWidth(),
browserHeight = getBrowserHeight(),
isIphone = navigator.userAgent.match(/iPhone/i) != null,
isIpod = navigator.userAgent.match(/iPod/i) != null,
isIpad = navigator.userAgent.match(/iPad/i) != null,
isIos = isIphone || isIpod || isIpad;
if (browserWidth <= 1024 && isIos) {
} else if (browserWidth > 800 && browserWidth <= 1024 && !isIos) {
} else if (browserWidth <= 1024 && browserHeight <= 768 && !isIos) {
} else if (browserWidth > 1024 && browserWidth <= 1280) {
} else if (browserWidth > 1024 && browserWidth <= 1280 && browserHeight <= 720) {
} else if (browserWidth > 1280 && browserWidth <= 1600) {
} else if (browserWidth > 1280 && browserWidth <= 1600 && browserHeight > 768 && browserHeight <= 900) {
} else if (browserWidth > 1920 && browserWidth <= 4000) {
} else if (browserWidth > 1920 && browserWidth <= 4000 && browserHeight > 1080 && browserHeight <= 4000) {
} else {
}

if you really want to do this method, then i suggest a cascade comparison from highest to lowest (sort of switch statement). that way, you don't need ranges:
var w = $.Window.width();
if(w>4000){
//greater than 4000
} else if(w>1920){
//assumed less than 4000 greater than 1920
} else if (w>1280){
//assumed less than 1920 but greater than 1280
} else if (w>1024){
//assumed less than 1280 but greater than 1024
} else if (w>800){
//assumed less than 1024 but greater than 800
} else {
//small sized
}