Develop Reference

get number of lines of a paragraph having been appended

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.
Any help is appreciated.
$(function(){
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code:
https://jsfiddle.net/fptd4xkh/1/
$(function() {
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
console.log(Math.round(eachRowN));
});
});
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
/* 両端揃え(均等割り付け) */
font-family: "Vesper Libre", serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<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>
</div>
<div id="parent"></div>

The spot from where you calculate doesn't have the correct font-face. Try the following.
Change:
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
font-family: "Vesper Libre", serif;
}
Into:
div {
font-family: "Vesper Libre", serif;
}
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
}

How to remove/change print document margin in printTask?

I wonder how I can achieve a borderless print.
At the moment my output looks like this:
I'd like to have the image start at the very top left corner. Is this possible? I already tried to set a negative margin to my print-style box, but the image will get cut then.
I know that maybe not all printers are capable of printing the area of the border, but in my use-case the picture will be white in these areas. (The mountain-image is just for demo purposes)
Can I specify the document border somehow via printTask?
See my current setup:
HTML:
<div id="pdf-render-output"></div>
CSS:
body > #pdf-render-output {
display: none;
}
#media print {
body > * {
display:none;
max-width: 100%;
}
html {
max-width: 100%;
border-top: 0;
}
body > #pdf-render-output {
display: block;
border: none;
max-width: 100%;
width: 100%;
height: 100%;
position: relative;
margin: 0; /* I tried to set negative margin/padding eg. here */
padding: 0;
}
}
JS:
$('#pdf-render-output').append("<img src="..." style=\"width: 100%\" />");
I played around with all possible margins/paddings and stuff, but the image will get cut and the white border stays 'over' it.
I hope that there might be a printTask-option I missed browsing the msdn?
Update:
I tried to set all margin/padding/border values with !important. No change.
Here is a screenshot from the simulator, displaying only the print-css-style:
I got to the point thinking it's an issue with the printTask itself. Are there any options regarding to this problem?

If the margin values of DocumentSource is set to 0, gaps will decrease very much. However, compared with PrintTask by C#+XAML, a top margin(Probably header/footer area) is made a little.
var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
var src = MSApp.getHtmlPrintDocumentSource(document);
src.rightMargin = 0;
src.leftMargin = 0;
src.topMargin = 0;
src.bottomMargin = 0;
src.shrinkToFit = false;
args.setSource(src);
}
In my environment, when this CSS was used, it has removed the margin without the necessity for src.rightMargin, etc.
#page {
margin:0cm;
}

On hover move text if width > 420

I want to make when you hover div article_head, check span width and if it is bigger then 420px(parrent div width - article_head) move text to see it whole. I know, it a little bit complicated...
Example:
Now, when you hover "How to install Windows..." it will move text and show
<div class="article_head"><span>Text with bigger width than 420px</span></div>
.article_head span{
font-size: 40px;
font-weight: 300;
line-height: 110% !important;
text-transform: none !important;
white-space:nowrap;
}
.article_head{
line-height: 110% !important;
margin:-10px 0 10px;
height: 50px;
overflow: hidden;
width:420px
}
I tried few times but without success...

What you can do is to use the .scrollLeft method to scroll inside the article head. You can calculate the maximum scroll position by evaluating htmlElement.scrollWidth - htmlElement.clientWidth
So you can implement two functions:
one to scroll to the right:
function move(htmlElement) {
console.log(htmlElement);
htmlElement.scrollLeft = htmlElement.scrollWidth - htmlElement.clientWidth;
}
and a function to reset the scroll position:
function moveBack(htmlElement) {
htmlElement.scrollLeft = 0;
}
Have a look at this example: http://jsfiddle.net/2ysP7/

Try this Example :
<div class="article_head">
<span>Now, when you hover "How to install Windows..." it will move text and show Now, when you hover "How to install Windows..." it will move text and show </span>
<div>
CSS
Add position:relative for Article Head
body {padding:20px;}
.article_head span{
font-size: 40px;
font-weight: 300;
line-height: 110% !important;
text-transform: none !important;
white-space:nowrap;
position:relative;
}
.article_head{
line-height: 110% !important;
margin:-10px 0 10px;
height: 50px;
overflow: hidden;
width:420px
}
jQuery
you may also add easing like this example
$(document).ready(function () {
$('.article_head').each(function () {
var head_width = $(this).width();
var span_width = $(this).find('span').innerWidth();
$('.article_head').hover(function () {
if (span_width > head_width) {
$(this).find('span').stop().animate({ 'right': head_width });
}
}, function () {
$(this).find('span').stop().animate({ 'right': '0px' });
});
});
});

how to give auto scroll to textarea

I have written an HTML form with a text area, text box and a button. Whatever I have typed on the textbox will be appended to the textarea when the button is clicked. Now, my problem is when the text area is completely filled, the newly arriving text appears at the bottom and I have to scroll down manually to view this text. Is there any method in javascript to make the arriving text to be visible always without scrolling down...Please help

I'm not really sure if this is what you want but have a look this:
http://jsfiddle.net/yV76p/
var textarea = document.getElementById("textarea");
textarea.onkeyup = function(evt) {
this.scrollTop = this.scrollHeight;
}
You can find the details on it here: Auto resizing textarea link down jquery

This example increases the size of the textarea as the content text is added;
Example
Javascript
var txt = $('#comments'),
hiddenDiv = $(document.createElement('div')),
content = null;
txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');
$('body').append(hiddenDiv);
txt.on('input', function () {
content = $(this).val();
content = content.replace(/\n/g, '<br>');
hiddenDiv.html(content + '<br class="lbr">');
$(this).css('height', hiddenDiv.height());
});
txt.trigger('input');
CSS
body {
margin: 20px;
}
p {
margin-bottom: 14px;
}
textarea {
color: #444;
padding: 5px;
}
.txtstuff {
resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
overflow: hidden;
}
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}
/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
width: 500px;
min-height: 50px;
font-family: Arial, sans-serif;
font-size: 13px;
overflow: hidden;
}
.lbr {
line-height: 3px;
}

For having auto scrolling feature for textarea add this piece of code at the end of where ever you are trying to attend the content from textbox:
var console = $('#area');
console.scrollTop(
console[0].scrollHeight - console.height());
DEMO
Hope this helps :)

Dynamically setting line-height/keeping text vertically centered when parent div changes size in JavaScript

I'm trying to achieve the following in HTML/Javascript:
have a coloured circle with a piece of text perfectly centred (both horizontally and vertically) within it;
dynamically from JavaScript, be able to alter the size of the circle, maintaining the text centred within it at all times.
The following achieves the first of these:
Create the circle using a DIV element whose style has appropriate background and border-radius;
Inside the DIV, put a P element whose style has "text-aligbn: center" and "line-height: ".
For example:
p.circlecaption {
text-align: center;
line-height: 128px;
}
...
<div style="background: #a0a0a0; margin: 0px; width: 128px;
height: 128px; border-radius: 64px;" id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
This works fine for the initial, static, case. The problem comes when, from JavaScript, I attempt to set the line-height property in order to keep the text vertically centred as I change the size of the div. I expected something like the following to work:
var obj = document.getElementById('theCircleDiv');
var sz = '' + (rad*2) + 'px';
obj.style.width = sz;
obj.style.height = sz;
obj.style.margin = '' + (64 - rad) + 'px';
obj = document.getElementById('theText');
obj.style['line-height'] = sz;
However, while this code re-sizes and re-centres the circle perfectly, it doesn't vertically re-centre the text-- i.e. the attempt to dynamically set line-height appears to be ignored.
Can anybody offer any help on either how to set line-height dynamically, or else a way to achieve my desired goal of keeping the text centred within the circle? From my reading around, I've seen various other suggestions such as calling the property "lineHeight" or playing around with "vertical-align: middle", but none seems to work.
(I am currently testing in Safari on Mac OS which is likely to be most used among the site's target audience, but am also looking for a solution that is reasonably cross-browser compatible.)

You can achieve that with pure css
#theCircleDiv {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#theText {
vertical-align: middle;
}
Working Example: http://jsfiddle.net/bZj52/

Here is an example. I'm using jQuery UI to wire up some dynamic setting of the size but the re-size code should work in a pure JavaScript environment.
First, I cleaned up the HTML and put it's style in CSS
HTML:
<div id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
CSS:
#theText {
text-align: center;
line-height: 128px;
}
#theCircleDiv {
background: #a0a0a0;
margin: 0px;
width: 128px;
height: 128px;
border-radius: 64px;
}
JavaScript:
function resize(size) {
var circle = document.getElementById('theCircleDiv'),
text = document.getElementById('theText');
circle.style.width = size + 'px';
circle.style.height = size + 'px';
circle.style.borderRadius = (size / 2) + 'px';
text.style.lineHeight = size + 'px';
}

And this is much easier with flex box.
div {
background-color: #ccc;
height: 50px;
width: 100%;
/* Important Part */
display: flex;
justify-content: center;
align-items: center;
}
<div>
<span>Center Me Please</span>
</div>