I want some script for my app to change the font-size of a title depending on number of characters and the resolution, so to use different font-sizes in the script depending on window resolution and the number of characters of the title.
This is what I have right now:
$(document).ready(function () {
$(".boxes.concierto h2.nombreartista span a").each(function () {
var numChars = $(this).text().length;
if ((numChars >= 1) && (numChars < 20)) {
$(this).css("font-size", "20px");
}
else if ((numChars >= 20) && (numChars < 30)) {
$(this).css("font-size", "18px");
$(this).css("line-height", "20px");
}
else if ((numChars >= 30) && (numChars < 60)) {
$(this).css("font-size", "15px");
$(this).css("line-height", "18px");
}
else if ((numChars >= 100) && (numChars < 140)) {
$(this).css("font-size", "0.9em");
}
else {
$(this).css("font-size", "0.8em");
}
});
});
I have tried to add:
if($(window).width() >= 1300){
// do your stuff
}
at the begining and end of my script but is not working.
Any idea how can I join this two functions correctly?
Thank you so much
you probably want to create a condition where either the number of characters or the resolution change the text size.
use the or-operator || in your if condition
if ( ((numChars >= 20) && (numChars < 30)) || $(window).width() >= 1300 ) {
$(this).css("font-size", "20px");
}
a better way
the conditions might get quite complex. a better way would be to setup a formula like:
var textSize = 1/numChars * $(window).width() * factor;
if you want the text size to change in steps you can do something like this:
var stepSize = 3;
var steppedTextSize = Math.floor(textSize/stepSize) * stepSize;
the steppedTextSize will have values in increments of 3. like: 12, 15, 18, ...
Related
I have a variable placement that can be set to the following values: top, top-left, top-right, bottom, bottom-left, bottom-right, right, right-top, right-bottom, left, left-top, left-bottom.
I have another variable const trigger = triggerRef.current.getBoundingClientRect(); so I can determine where the trigger element is, and based on that, set the placement variable accordingly.
I am currently using a lot of if else statements. For instance:
if (placement === "top" && trigger.top < 75 && windowWidth - trigger.right > 75 && trigger.left > 175)
{ placement = "bottom";
} else if ( placement === "top" && windowWidth - trigger.right < 75 && windowHeight - trigger.bottom > 75 && trigger.top < 75)
{ placement = "left-top"; }
...and the code goes on and on
What's a "DRY-er" way of doing this?
Consolidate the logic in these tests and only check once. Assign a variable if instead of repeating the same calculations:
if (placement === "top" && trigger.top < 75 ) {
const triggerFromWidth = windowWidth - trigger.right;
if (triggerFromWidth > 75 && trigger.left > 175) {
placement = "bottom";
} else if (triggerFromWidth < 75 && windowHeight - trigger.bottom > 75) {
placement = "left-top";
}
}
How to add one more condition in this if block ??
I want to run in the if block only if the quantity_traded value is greater than 800 and also less than 20000
This is my code
var difference = -3000;
var quantity_traded = 800 ;
var stockprice = 300;
if (difference >= -4000 && quantity_traded >= 800 && stockprice>=300)
{
alert('include');
}
else
{
alert('dont include');
}
https://jsfiddle.net/2ok0fcax/
Could you please let me know how to match the quantity_traded value is greater than 800 and also less than 20000 condition
just add quantity_traded < 20000 to your list of conditions
if (difference >= -4000 && quantity_traded >= 800 && stockprice>=300 quantity_traded < 20000) {
...
}
https://jsfiddle.net/2ok0fcax/1/
I have a configurable product that allows a user to specify a quantity. The item is made on a sheet with multiple items on it (50) and if the user specifies:
0-50 = 1 sheet
51-100 = 2 sheets
101-150 = 3 sheets
And so on until about 700 units. Currently I am doing this:
sheetCount = quantity / 50;
if (sheetCount == 0) {
sheetCount = 1;
}
if (pixelcounts[key] < 50) {
sheetcount = 1;
} else if (pixelcounts[key] > 50 && pixelcounts[key] < 100) {
sheetcount = 2;
} else if (pixelcounts[key] >= 100 && pixelcounts[key] < 150) {
sheetcount = 3;
} else if (pixelcounts[key] >= 150 && pixelcounts[key] < 200) {
sheetcount = 4;
} else if (pixelcounts[key] >= 200).......
Is there an easier way to loop through this?
sheetCount = Math.ceil( quantity / 50 );
Going by what your code sample says (which is different than your example), the following should work:
sheetCount = Math.floor(pixelcounts[key] / 50) + 1;
I need to organize an unknown amount of elements into columns which read vertically. The code below works great for organizing the elements based on a set amount per column, but I won't know the amount of elements so I need to divide all the elements into 4 groups (possibly 5 or 6 cloumns though).
Column 1 = 1st 25% of elements
Column 2 = 2nd 25% of elements
Column 3 = 3rd 25% of elements
Column 4 = 4th 25% of elements
$(window).load(function(){
$('.equalChildHeights').setEqualHeights();
var linkNum = 1;
$('.organizeLinks').each(function(){
if (linkNum <= 10) {
$(this).addClass('linkCol1');
} else if (linkNum > 10 && linkNum <= 20) {
$(this).addClass('linkCol2');
} else if (linkNum > 20 && linkNum <= 30) {
$(this).addClass('linkCol3');
} else if (linkNum > 30 && linkNum <= 40) {
$(this).addClass('linkCol4');
} else if (linkNum > 40 && linkNum <= 50) {
$(this).addClass('linkCol4');
};
linkNum++;
});
$('.linkCol1').each(function(){
$(this).appendTo('.column-1');
});
$('.linkCol2').each(function(){
$(this).appendTo('.column-2');
});
$('.linkCol3').each(function(){
$(this).appendTo('.column-3');
});
$('.linkCol4').each(function(){
$(this).appendTo('.column-4');
});
Here is a working example:
Counts all elements and sets a var with the percentage.
var linkNum = 1;
var totoalLinksCol = $('.organizeLinks').length;
var linksPerCol = Math.ceil(totoalLinksCol/4);
$('.organizeLinks').each(function(){
if (linkNum <= linksPerCol) {
$(this).addClass('linkCol1');
} else if (linkNum > linksPerCol && linkNum <= linksPerCol*2) {
$(this).addClass('linkCol2');
} else if (linkNum > linksPerCol*2 && linkNum <= linksPerCol*3) {
$(this).addClass('linkCol3');
} else if (linkNum > linksPerCol*3 && linkNum <= linksPerCol*4) {
$(this).addClass('linkCol4');
};
linkNum++;
});
$('.linkCol1').each(function(){
$(this).appendTo('.column-1');
});
$('.linkCol2').each(function(){
$(this).appendTo('.column-2');
});
$('.linkCol3').each(function(){
$(this).appendTo('.column-3');
});
$('.linkCol4').each(function(){
$(this).appendTo('.column-4');
});
If you want to divide them into 5 columns, just change the 4 to a 5.
var linksPerCol = Math.ceil(totoalLinksCol/4);
You are looking for the modulus operator
I have a script which shows different content depending on the screen size, it looks like this:
if ((window.innerWidth < 1250 )) {
//Do something
}
I am trying to set a greater than value as well as a less than value. I thought the follwoing would work:
if ((window.innerWidth < 1250 && > 750)) {
//Do something
}
Can anyone help me out?
When using Boolean operators (&&, ||, etc), each side must be a completely valid Boolean expression on its own. && > 750 is not a valid expression, since > 750 cannot be evaluated as True or False.
What you want is :
if (window.innerWidth < 1250 && window.innerWidth > 750) {
As both window.innerWidth < 1250 and window.innerWidth > 750 are valid expressions and can be resolved independently.
Close:
if (window.innerWidth < 1250 && window.innerWidth > 750) {
You need to repeat the comparison argument after the && to check with new value.
Use like this:
if (window.innerWidth < 1250 && window.innerWidth > 750) {
function between(val, min, max)
{
return val >= min && val <= max;
}
if (between(window.innerWidth,750,1250)) {
//your code!!!
}