I hate doing this. This is THE small piece to end a large project and my mind is fried...
Here's the code. It checks to see if an element is overflowing and resizes the font. It is supposed to resize it until it doesn't overflow. The condition for the loop seems to be ignored and the browser freezes... I feel that I'm missing something crucial in how jQuery works here.
$.fn.fontBefitting = function() {
var _elm = $(this)[0];
var _hasScrollBar = false;
while ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
var fontSize = $(this).css('fontSize');
fontSize = parseInt(fontSize.substring(0,fontSize.length-2))*0.95;
$(this).css('fontSize',fontSize+'px');
}
}
Thanks in advance.
Change:
fontSize = parseInt(fontSize.substring(0,fontSize.length-2))*0.95;
to:
fontSize = parseInt(fontSize.substring(0,fontSize.length-2))-1;
Here's a Working Demo. When the font size reached 10px, 10*.95 was 9.5 which the browser was rounding up to 10px. Thus infinite loop.
You need to step through your code in a debugger and actually check your condition values to make sure they are changing how you expect. My guess is _elm.clientHieght and _elm.clientWidth aren't actually changing.
var fontSize = $(this).css('fontSize');
fontSize = parseInt(fontSize, ...
The unit you get from font-size is not necessarily (a) pixels, nor (b) the same unit as you put in.
It's not specified what unit is used to return the length, but in many browsers it is currently points. Since points are smaller than pixels, the integer length will be longer, so you can quite easily keep on *0.95ing it forever.
Even if it were pixels, the browser could round the size up to the nearest pixel, making 95%-size the same size as 100% when you read it back. Or you could hit the minimum-font-size setting and you wouldn't be able to reduce it any more.
So instead of reading the current font size back on each step, keep the pixel size you want in a variable and reduce that variable each time. Then if you reach a predetermined lower bound for the value of that variable, give up.
You are probably running into an endless loop because the font size doesn't actually change. E.g. if the font size found is 10px you will update it to become 9.5px which is probably rounded back to 10px by the browser. In that case nothing changes and the function will keep running forever.
You've got an unrelated problem when you do
$('div').fontBefitting()
This will make the text in the first div fit it's box, then make the font size of all the other divs the same as the first. This does not sound like intended behaviour. You would hope that it would make each div resize its text and only its text to fit.
You need to change your code to this:
$.fn.fontBefitting = function() {
/* $.fn.* runs on a jQuery object. Make sure to return it for chaining */
return this.each(function() {
var fontSize = parseInt($(this).css('fontSize'));
while (this.clientHeight < this.scrollHeight ||
this.clientWidth < this.scrollWidth) {
fontSize--;
$(this).css('fontSize', fontSize + 'px');
}
});
}
You're checking to see if the clientHeight or clientWidth are LESS than the scrollHeight or scrollWidth, and if they are you are REDUCING the font size? It will never converge under those circumstances. You want to INCREASE the font size.
Related
I am trying to make text adaptive using jQuery. Here is the fiddle:
http://jsfiddle.net/bq2ca7ch/
You can see a div with some text in it. The div doesn't have a specified height, and it's height is calculated from text height and 10% paddings on top and bottom.
I want font-size to be responsive. Let's say, div's original size was 124px, and font-size was 50px, so I want to keep this ratio. That means I need to know, what percent 50 is from 124. It is about 40.32 (50/124*100). That means that I need to set font-size to value, equal to container height/100 * 40.32. Here is the code I used:
function foo(){
var container = $(".box");
var containerHeight = $(".box").innerHeight().toFixed();
var neededSize = (containerHeight/100*40.32).toFixed();
container.css("font-size", neededSize + "px");
}
$(window).resize(foo);
$(document).ready(foo);
That seems to be working, but only when I resize the page. When I reload it, there is some different value. Why does the same function gives different values on resize and onload?
What i observed that Size changes because :
1. When you just reload .the function runs only once.
2.But when you resize , the function runs twice and changes the font size because the again calculations are done based on new height.
Main thing is on resize it is calculating wrong innerheight
See this:
function foo(jQuery ){
var container = $(".box");
var containerHeight = $(".box").innerHeight(true).toFixed(2);
var neededSize = (containerHeight/100*40.32).toFixed(2);
alert(containerHeight );
container.css("font-size", neededSize + "px");
}
$(window).resize(foo);
$(document).ready(foo);
Resize method is not reliable.
Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).
I tried with this , it worked for me both are giving the same result for me . try this container.css("font-size":neededSize + "px");
I am trying to write a code based on the width of a page. For that, I am using "window.screen.availWidth", and then a conditional, as you can see below:
var page_width = window.screen.availWidth;
if ((930 < page_width) || (page_width <= 1100)) {
// code...
}
My problem is that the conditional doesn't work, and applies the code regardless of the page width. When I call the variable alone, it gives me the proper value, so I suppose the problem is somewhere in the conditional. Can anyone please shed some light on this? (I am new to Javascript!)
That's because if the first part is false (ie. the page width is less than 930) then the second part must be true.
I think you meant && instead of ||.
screen.availWidth returns the width of the user's screen not of the page. You might want to compute the width of the browser window using jQuery like so:
$(window).width()
Or, depending on what your are doing, you might want to take a look at CSS media queries.
It's an and/or problem. "If page_width is greater than 930 or the page width is less than or equal to 1100". I assume you want it to be if page_width is in that range, so just change the or to an and and I think it should work right.
Hello StackOverflow Community,
what I am trying to achieve is a header that can be moved with the mouse.
You klick into the header and drag the mouse and the elements inside the header will move with different speeds.
I achieved the parallaxing part but the performance is not really good. It is partially a bit laggy while dragging the backgrounds.
My question now is: what can be changed in the code to get a performance boost?
That's the part of the code that takes care of parallaxing. On every mousemove a each loop is executed which I think is the reason for the performance beeing so laggy:
var dragging = false;
var clickMouseX;
//Our object for the layers
//each layer has a different scrolling speed
var movingObjects = {
'#header-l1' : {'speed': 1},
'#header-l2' : {'speed': 1.4},
'#header-l3' : {'speed': 1.85},
'#header-l4' : {'speed': 2.2},
};
$('#header-wrapper').mousedown(function(e){
dragging = true;
//Get initial mouse position when clicked
clickMouseX = e.pageX;
$(this).mousemove(function(mme){
//execute only if mousedown
if(dragging){
//iterate through all layers which have to be parallaxed
$.each(movingObjects, function(el, opt){
var element = $(el);
//get difference of initial mouse position and current mouse position
var diff = clickMouseX - mme.pageX;
//scroll-position left speed 1
if(diff < 0) diff = -1;
//scroll position right speed 1
if(diff >= 0) diff = 1;
//get current position of layer
currLeft = parseInt(element.css('left'));
//get current layer width
elWidth = element.width();
//if right border is reached don't scroll further
if(currLeft < -(elWidth - 810)){
element.css('left', -(elWidth - 810));
}
//so do with left border
if(currLeft > 0){
element.css('left', 0);
}
//parallax it! Subtract the scroll position speed multiplied by the speed of the desired
//layer from the current left property
element.css('left', parseInt(element.css('left')) - diff*opt.speed);
});
}
});
/* Cursor */
$(this).css('cursor', 'pointer');
return false;
});
I also put a fiddle up:
http://jsfiddle.net/yWGDz/
Thanks in advance,
Thomas
P.S. maybe someone even finds out why layer two and three have the same scroll speed while having different speeds defined.
I worked at this a bit, and came up with this: http://jsfiddle.net/amqER/2/
This works a lot faster than the original (especially in firefox, where it performs a whole lot better, chrome it's still pretty slow). I also changed up some of the logic in your code, to make it make more sense.
A list of things that I did:
Minify your pngs
2 of your png files were over 2 megs, so I threw them into a png compressor (tinypng) and that reduced the size a lot. This helps with loading time and overall snappiness.
Re-use values as much as possible
In your original code, you wrote to and then subsequently read from the css left property a couple times in your code. Doing this is going to make it a lot slower. Instead, I kept an left property, and would only touch $.css when I absolutely needed to. Likewise for reading each element's width each update.
Also, like I said, I modified your logic to (I think) make more sense, given what you were trying to accomplish. It calculates a new diff each update, and tries to move according to that. Also, it doesn't try to keep moving once one of the images falls off (which yours does if you move all the way to the right, and it looks really weird). You can also look at this: http://jsfiddle.net/amqER/5/, which maybe is more like the control scheme you wanted.
Just some quick performance tips.
Try not to use $(this).mousemove instead save $(this) into a variable and use that.
var th = $(this);
th.mousemove...
Try to avoid using $.each. This is probably the part that's slowing your code down.
You can replace it with a for loop, but I would suggest, in this case, sending in each element one by one.
var parallax = function(img){
};
parallax(img1);
parallax(img2);
instantly-increase-your-jquery-performance
Whilst Xymostech's answer does greatly improve upon the original poster's original code; the performance is hardly improved for me in Chrome.
Whilst inspecting the page FPS, the solution posted here runs at 15FPS for me on a Retina MacBook Pro.
I made a very simple change to the code, altering it to use translate3d properties instead of left. Now, it runs at 55-60 FPS for me. I'd call that a massive performance boost.
If 'show paint rectangles' are turned on in Chrome, you'll see the previously posted solution is continually painting changes to the dom whilst the parallax is in motion. With the translate3d solution, there's simply zero painting done the whole time the parallax is in motion.
http://jsfiddle.net/LG47e/
I have a simple code to set the height of one column, id="colLeft" to the height of another column, id="colRight", with no padding or borders:
<script type="text/javascript">
var colLeft = document.getElementById("colLeft");
var colRight = document.getElementById("colRight");
colLeft.style.height = colRight.offsetHeight + "px";
</script>
This code works fine on desktop and iPad, but on my android phone the results are rather unpredictable. Sometimes colLeft is much longer, sometimes colRight, and sometimes it works the way it should. I have tried it on two browsers with the same results.
I have also tried it inside window.onload=function(){...} which gave slightly less variance in the results, but is still not perfect.
Thanks for any help.
You can read a bit about offsetHeight here. The important thing to note is that if the content is larger than the viewable area the browser might do funny things with non-scrolling elements. Because this is a phone browser, I am guessing that the issue is that it is miscalculating the column height because it doesn't deal with scrolling elements correctly.
How do you set the height of the first column? If it has a valid height set in the style sheet you could easily do something like this:
colLeft.style.height = colRight.style.height;
If that doesn't work, you may need to set the column height based on the browser window size with something like:
colLeft.style.height = colRight.style.height = (window.innerHeight - 10) + "px";
Or something similar.
In a generated html page, we have a fixed size area (lets say 200 x 300) in which we need to fit in as much text as possible (like a regular paragraph of text), and if it doesn't fit, remove an appropriate number of characters and append "..." to the end.
The text is NOT in a fixed sized font, and although we are using one specific font for this text, a "generic" solution would obviously be preferred.
This looked interesting, but I'm thinking it would be very slow with this function being called for several items on a page - http://bytes.com/topic/javascript/answers/93847-neatly-truncating-text-fit-physical-dimension
The solution can use an intermix of html, css, js, and php as needed.
Suggestions on approaches are more than welcome!
I'd say that the solution you found is the best. It is, for instance, used for this jQuery plugin which autoresizes textareas as you enter text into it. I took the concept and rewrote it with jQuery for this simple test here: http://jsfiddle.net/ZDr5K/
var para = $('#para');
var height = 200;
while(para.height() >= height){
var text = para.text();
para.text(text.substring(0, text.length - 4) + '...');
}
Possible improvements would include right trimming and removing the period if the last character is a full stop. Removing word by word would also be more readable/slightly faster.
As for the function running multiple times, that would be unavoidable. The only thing you can really do with CSS here is to use :after to append the ellipses, but even that should be avoided for cross-compatibility problems.
Set the element dimensions via CSS and its overflow to "hidden".
Then, find out with this function, if the element's content is overflowing (via):
// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
Now, in a loop remove text and check until it is not overflowing anymore. Append an ellipsis character (String.fromCharCode(8230)) to the end, but only if it was overflowing.
To avoid any flickering effects during that operation, you can try working on a hidden copy of the element, but I'm not sure if the browsers do the necessary layout calculations on an element that's not visible. (Can anyone clarify that?)