Mixing
get number of lines of a paragraph with google font that was appended
0
When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order. however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element and font is not applied when the height is calculated.
Any help is appreciated.
var str = "<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p><p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p><p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p><p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p><p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of Father far away, where the fighting was.</p><p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>";
$(function() {
let lineHeight = 18;
let eachPara = str.split("</p>");
$.each(eachPara, function(i, val) {
$("#parent").append(val + "</p>");
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code: https://jsfiddle.net/fLa2gh7p/
jquery
asked Jan 2 at 19:14
wuerwuer
84
add a comment |
0
When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order. however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element and font is not applied when the height is calculated.
Any help is appreciated.
var str = "<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p><p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p><p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p><p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p><p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of Father far away, where the fighting was.</p><p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>";
$(function() {
let lineHeight = 18;
let eachPara = str.split("</p>");
$.each(eachPara, function(i, val) {
$("#parent").append(val + "</p>");
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code: https://jsfiddle.net/fLa2gh7p/
jquery
asked Jan 2 at 19:14
wuerwuer
84
It displays 6 each time for me but I'm not using the same platforms as you. If you think it's a DOM readiness issue change the load type in JSFiddle to "On DOM Ready"
– mark_c
Jan 2 at 19:26
add a comment |
0
0
0
When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order. however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element and font is not applied when the height is calculated.
Any help is appreciated.
var str = "<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p><p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p><p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p><p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p><p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of Father far away, where the fighting was.</p><p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>";
$(function() {
let lineHeight = 18;
let eachPara = str.split("</p>");
$.each(eachPara, function(i, val) {
$("#parent").append(val + "</p>");
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code: https://jsfiddle.net/fLa2gh7p/
jquery
asked Jan 2 at 19:14
wuerwuer
84
When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order. however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element and font is not applied when the height is calculated.
Any help is appreciated.
var str = "<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p><p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p><p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p><p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p><p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of Father far away, where the fighting was.</p><p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>";
$(function() {
let lineHeight = 18;
let eachPara = str.split("</p>");
$.each(eachPara, function(i, val) {
$("#parent").append(val + "</p>");
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code: https://jsfiddle.net/fLa2gh7p/
jquery
jquery
asked Jan 2 at 19:14
wuerwuer
84
asked Jan 2 at 19:14
wuerwuer
84
asked Jan 2 at 19:14
wuerwuer
84
asked Jan 2 at 19:14
wuerwuer
84
asked Jan 2 at 19:14
wuerwuer
84
84
It displays 6 each time for me but I'm not using the same platforms as you. If you think it's a DOM readiness issue change the load type in JSFiddle to "On DOM Ready"
– mark_c
Jan 2 at 19:26
add a comment |
It displays 6 each time for me but I'm not using the same platforms as you. If you think it's a DOM readiness issue change the load type in JSFiddle to "On DOM Ready"
– mark_c
Jan 2 at 19:26
It displays 6 each time for me but I'm not using the same platforms as you. If you think it's a DOM readiness issue change the load type in JSFiddle to "On DOM Ready"
– mark_c
Jan 2 at 19:26
It displays 6 each time for me but I'm not using the same platforms as you. If you think it's a DOM readiness issue change the load type in JSFiddle to "On DOM Ready"
– mark_c
Jan 2 at 19:26
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011935%2fget-number-of-lines-of-a-paragraph-with-google-font-that-was-appended%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011935%2fget-number-of-lines-of-a-paragraph-with-google-font-that-was-appended%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It displays 6 each time for me but I'm not using the same platforms as you. If you think it's a DOM readiness issue change the load type in JSFiddle to "On DOM Ready"
– mark_c
Jan 2 at 19:26