I have a text in a single line (white-space: nowrap).
I want to reduce the font size of this text if the width of it greater than the width of the parent-block.
I use while loop. Why it doesn't work? Width of "elemWidth" is not updated and loop and the cycle freeze?
$('.slider__title-wrap').each(function(){
var width = $(this).width();
var fontSize = 50;
var elem = $(this).find('.slider__title');
var elemWidth = elem.width();
while(elemWidth >= width) {
fontSize = Math.floor(fontSize * 0.96);
elem.css({fontSize: fontSize+'px'});
};
})
var elemWidth = elem.width();
makes a copy of elem.width();
You need to reevaluate elemWidth into your loop :
$('.slider__title-wrap').each(function(){
var width = $(this).width();
var fontSize = 50;
var elem = $(this).find('.slider__title');
var elemWidth = elem.width();
while(elemWidth >= width) {
fontSize = Math.floor(fontSize * 0.96);
elem.css({fontSize: fontSize+'px'});
elemWidth = elem.width();
};
})
You don't seem to be changing either elemWidth or width inside the while loop. So it will either never start, or never end. You need to update the values you're comparing before the loop ends:
$('.slider__title-wrap').each(function(){
var width = $(this).width();
var fontSize = 50;
var elem = $(this).find('.slider__title');
var elemWidth = elem.width();
while(elemWidth >= width) {
fontSize = Math.floor(fontSize * 0.96);
elem.css({fontSize: fontSize+'px'});
width = $(this).width();
elemWidth = $(this).find('.slider__title').width();
};
});
Alternatively, eliminate the variables so you don't have to update anything:
$('.slider__title-wrap').each(function(){
var fontSize = 50;
while($(this).width() >= $(this).find('.slider__title').width()) {
fontSize = Math.floor(fontSize * 0.96);
elem.css({fontSize: fontSize+'px'});
};
});
Incidentally, I'd use fontSize = fontSize-1; instead of multiplying by 0.96, but it's probably a micro-optimization.
Related
var totalHeight = 0;
$(".scroll-section").each(function(){
totalHeight += $(this).height();
});
$(".site-content").scroll(function() {
var scrollTop = $(".site-content").scrollTop();
var movePos = (scrollTop / totalHeight) * 100;
movePos = movePos + 100;
console.log(movePos);
$(".page-fixed").css("background-size", `${movePos}% 100%`)
});
I tried margin, does not work
Doing this for webflow so yeah... Would need to get it webflow compatible as well
I'm stuck using Raphael JS : I want to make a basic animation that draws concentric lines while loading some stuff.
So, I made this function :
function loadingButton(width, height) {
width = width ? width : 240;
height = height ? height : 240;
var loadingButton = Raphael("loading-button", width, height);
var center = 120,
xloc = center,
yloc = center,
R = 120,
imgW = 124,
imgH = 140;
var lines;
var percent = loadingButton.text(center, center, '0');
percent.attr({'font-size': 36, 'fill': '#fff'});
var count = 0;
var interval = setInterval(function(){
if( count <= 100){
var start_x = center+Math.round((center-30)*Math.cos(4*count*Math.PI/200));
var start_y = center+Math.round((center-30)*Math.sin(4*count*Math.PI/200));
var end_x = center+Math.round((center-10)*Math.cos(4*count*Math.PI/200));
var end_y = center+Math.round((center-10)*Math.sin(4*count*Math.PI/200));
lines = loadingButton.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y).attr({"stroke":"#FFF","stroke-width":"1"});
percent.attr({text: count});
count++;
}
else {
clearInterval(interval);
}
}, 50);
};
With live demo here : http://jsfiddle.net/rfuqjL65/
The thing is, as you can see on the fiddle, the animation is starting on the first quarter (90°), not on the top (0°).
And well, the problem is : I want the animation starts on the top.
Any ideas ?
I can't get your fiddle running, but:
You can add/substract Math.PI/2 to the angle argument (in radians) for Math.cos and Math.sin in your coordinate variables, that should do the trick!
http://jsfiddle.net/rfuqjL65/2/
I change your code. And this worked.
And also
var start_x = center+Math.round((center-30)*Math.sin(4*count*Math.PI/200));
var start_y = center-Math.round((center-30)*Math.cos(4*count*Math.PI/200));
var end_x = center+Math.round((center-10)*Math.sin(4*count*Math.PI/200));
var end_y = center-Math.round((center-10)*Math.cos(4*count*Math.PI/200));
So I'm wanting to use the width() method to return the width of an element on my site, by default it will display this in pixels.
I was reading on W3Schools that you can change the value to a number of different units such as px, em, pt, etc.
I would like to return the width as a percentage, how can I achieve this?
Here is my code:
Jquery
$('.range-control').each(function(){
var container = $(this),
input = container.find('input'),
output = container.find('output'),
rangeWidth = input.width(),
thumbWidth = container.attr('data-thumbwidth'),
startValue = input.val(),
startOffset = ((rangeWidth - thumbWidth) / 100) * startValue;
output
.css({
'left' : startOffset
});
$(input).on('input', function(){
var value = this.value,
offset = ((rangeWidth - thumbWidth) / 100) * value;
output
.val(value)
.css({
'left' : offset
});
});
});
Any help would be greatly appreciated!!
can't use just calculate it?
var parentWidth = $(this).parent().width();
var thisWidth = $(this).width();
var percentWidth = (thisWidth/parentWidth)*100+"%";
I have a container with n number of div inside it. I need the container to resize according to it children. I know this can be done using jquery library as follows.
JQuery
$(document).ready(function(){
setContainerWidth();
});
$(window).resize(function(){
setContainerWidth();
});
function setContainerWidth()
{
$('.container').css('width', 'auto'); //reset
var windowWidth = $(document).width();
var blockWidth = $('.block').outerWidth(true);
var maxBoxPerRow = Math.floor(windowWidth / blockWidth);
$('.container').width(maxBoxPerRow * blockWidth);
}
This time I need to do this with the pure javascript for some plugin issue. I broke down the code till as follows and stuck in the middle any help would be appreciated.
Javascript
function setContainerWidth(){
var container_width = document.getElementById('container').offsetWidth;
var width = document.body.clientWidth
var block_width = document.getElementsByClassName("block").offsetWidth;
container.style.width = "auto"
var maxBoxPerRow = Math.floor(width / block_width)
container.offsetWidth(maxBoxPerRow * block_width)
}
Example one using jquery
Example two using javascript
You are missing a few things from your pure javascript translation:
function setContainerWidth()
{
var container = document.getElementById('container');
container.style.width = "auto";
var window_width = window.innerWidth;
var block_width = document.getElementsByClassName("block")[0].offsetWidth;
var maxBoxPerRow = Math.floor(window_width / block_width);
container.style.width = (maxBoxPerRow * block_width) + 'px';
}
I want to rewrite the following code so that it doesn't get the height of the <body>, but rather the height of the element I put the object in to carry out the function:
var img = document.getElementById("logo");
window.onscroll = function() {
var bodyHeight = parseInt(getComputedStyle(document.body).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.body.scrollTop;
var scrollPCT = (scrollTop / (scrollLimit / 100)) / 100;
logo.style.top = bodyHeight * scrollPCT - logo.offsetHeight + "px";
};
How can I target, say an ID, instead of document.body? I tried the following but it didn't work at all:
var img = document.getElementById("logo");
window.onscroll = function() {
var body = document.getElementById("container");
var bodyHeight = parseInt(getComputedStyle(document.getElementById("container")).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.getElementById("container").scrollTop;
var scrollPCT = (scrollTop / (scrollLimit / 100)) / 100;
logo.style.top = bodyHeight * scrollPCT - logo.offsetHeight + "px";
};
The desired effect involves a reverse scroll in which an image will move down as the user scrolls down, instead of up, like it normally does.
I guess the computed height does not work? Use the clientHeight property:
var bodyHeight = document.getElementById("container").clientHeight;
(or one of the other height properties)