how to calculation text number until div height? - javascript

i try make book paging.
div height is 100px.
div have a long text. text is very long long string(2mb).
i want know text subString position.
how to know text length until 50px height??

There should be a different approach
You can get the div width.
var width= getWidth();
Calculate how many character in a row (calculate manually), based on that width. And get the row number within 50px.
var limit = getRowLimit();var n=getNRow();
Do a substring.
var subtext= mytext.substr(0,limit * n);

Related

Adaptive text rows

I want to create adaptive rows with text.
It's need to repeat text to end of row. Row width is equal to window width. And after that repeat rows to end of page. Page height is equal to window height. Also text is rotated to 45deg.
Example
I can make it with checking parent element width & height and fill it before size will be equal or bigger than window. But if text rotated to 45deg its to hard to me. Any suggestions how to that right?

How many 10 x 10 boxes fit into div?

This is a bit of a math problem mixes with some JavaScript, I have this adjustable div (https://imgur.com/a/Pec9Duq), when clicking on submit it will be filled entirely by 10 by 10 smaller div's.
But I don't quite know how to calculate how many row's of 10 by 10 div's will fit into the parent.
What I currently have is this code:
var w_items = Math.ceil(def_w / 10),
h_items = Math.ceil(def_h / 10);
That give's me back the rounded width and height of said parent, don't know how to calculate how many would fit thought, do I add them together or something?
Multiply the width and height of the parent div. You'll get its area.
Then, the area of a small div is 100 because of 10x10=100.
Then all you have to do is Math.floor(parentArea/smallDivArea) and you'll get the number of small divs that can fit into the big div.
If you floor (also known as integer division) the value instead of ceiling it, you will get the number of elements that can fit horizontally and vertically. The total count will be w_items * h_items.

How to calculate character width from font size.

I'm trying to calculate the number of characters that fits in one line of a div and trim off the rest although text-overflow is an option I rather calculate the length of the string that fits in it properly. Is the font-size of a character almost equal to it's width, if not how do you calculate it's width including the text spacing and the width of a white space.
P.S. - Before flagging this question, do know I've went through most of the questions and answers and none of them were satisfactory.
One way I would do it is to check if there's enough space left in the div. To do this, you would need to create an identical div and slowly remove one character from the cloned div until the original div is bigger or equal in width to the cloned div.
divClone.textContent = text
document.body.appendChild(divClone)
while(divClone.clientHeight > originalDiv.clientHeight) {
divClone.textContent = divClone.textContent.substring(0, divClone.textContent.length-1)
}
originalDiv.textContent = divClone.textContent
You can then delete the cloned div when it's done

Fit textarea width to the longest line of text

How do I make a textarea increase its WIDTH while the user is typing. Basically I need the WIDTH of the textarea to be only to the length of the longest line.
This is what I came up with. But when the user hits ENTER still the width increases. How do I make the textarea to fit only to the size of its text?
$(document).on("click blur keyup", ".fT", function() {
var newWidth = ($('#tfd').val().length)*10;
$('#tfd').width(newWidth);
});
As #progrAmmar mentioned, $('#tfd').val().length measures the total length for your text, not the width of the longest line.
In fact your newWidth is just an approximation and will not be correct at all if a user types non ASCII characters.
One way to approxmiate the length is to place a pre element somewhere, set visibility:hidden and font-size and font-family the same as your textarea, and update this element with the new content whenever the user types.
By measuring this pre element's width you can get a good approximation for the text.

How to determine how many CSS3 columns are actually being displayed (vs. the specified column-count)?

I have a list of tags that are in a box that I've specified as having multiple columns:
#tags {
-webkit-columns: 140px 5;
}
Result:
The content of this list is dynamically generated.
When I resize the browser window, the number of columns collapses. e.g.:
Using jQuery / JS / CSS / etc., how can I determine how many columns are being displayed at any given time?
Unless you specified all column width-related properties browsers will try to fit whole number of columns in content area (between left and right padding of element). So (contentWidth + columnGap)/(columnWidth + columnGap) rounded down will give you result.
Note that right padding may be set so high that whole column will be able to fit there - you may need to adjust computations.
You can also directly get size of column if you have an element with 100% width inside columns text.
You can get the value like this:
$('#tags').css('-webkit-column-count');
Try alerting this:
alert($('#tags').css('-webkit-column-count'));
Similar to Alexei's answer, I figured out a solution to get the column count:
var $tags = $("#tags"),
column_width = $tags.children(':first').width(),
container_width = $tags.width(),
column_count = Math.floor(container_width / column_width); // in my case, sum of column gaps is less than the width of a column, so I can round down.

Categories