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 create a read more link with fade out background?

I am following this tutorial and I tried to apply it to my case:
HTML
<div class="jiku_text">
<p>I was born in Mauritius in 1967, spending my childhood under the sun of the Indian Ocean, before moving to the UK in July 1976. Punk had just started its own cultural revolution, while reggae and dub were ever present in the neighbourhood “blues” parties, as well as from the first real booming systems in the cars that would ever so often drive casually through the streets of Lewisham, South-East London. I did all of my schooling there, drawing since as far back as I can remember, spending my youth deep into comics, sci-fi and fantasy literature, as well as role-playing games such as “Dungeons & Dragons”.</p>
<p>I can’t forget to mention what effect the release of Star Wars, in 1977, had on my vision of the world around me. Before even getting into J.R.R. Tolkien, this movie was definitely a milestone in my childhood, and stoked a fire for science-fiction and fantasy which would have me look at the world around me in a totally different way from before.</p>
<p>All these influences, as well as the music coming from the radio, the TV and the street, were reflected in what I drew or painted; from comic strip characters to lead figurines, even to the odd oil portrait or landscape painting.</p>
<p>After my school exams in summer ‘84, I started hanging out in Covent Garden, the hub of the London Hip Hop scene, which I had discovered the year before, walking through it with my mother and the younger of my older brothers. My drawing ability led me to pick up the marker and spray-can, doing anything from painting banners for the “Alternative Arts” centre, or customizing the trousers or jackets of some of the other people hanging out with me, whether they were dancers or Mc’s. I was soon trying to make a name for myself, along with my partner Scribla, then with Zaki Dee, Eskimo, and Xerox as The Trailblazers, and eventually as part of a crew called The Chrome , which I formed in the spring of 1985, around the time of a seminal gig called The Rapattack, at the Shaw Theatre in the Euston area of London.</p>
<p class="read-more">Read More</p>
</div>
CSS
.jiku_text {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}
.jiku_text .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;
background-image: linear-gradient(to bottom, transparent, black);
}
JS
var $el, $ps, $up, totalHeight;
$(".jiku_text .btn").on("click", function() {
totalHeight = 0
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});
But the expansion creates a jump, see the test case on jsFiddle
UPDATE
tried to provide outerHeight instead of "height": $up.height(), but the text isn't expanding in full see https://jsfiddle.net/fbh0o67o/351/

You have an issue with your container div. Remove paddings from you css 'jiku_text'.
.jiku_text {
/*
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
*/
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}

Thanks to an answer in regards of my padding given to .jiku_text, I noticed where the issue was:
In my JS, I had to change "height": $up.height(), to "height": $up.outerHeight(), and then give "height": totalHeight + 140 which is the new calculated height with the padding in my css
https://jsfiddle.net/fbh0o67o/365/

restrain jQuery UI draggable movement to arbitrary "enclosure"

I have a jQuery UI draggable of which I would like to constrain it's movement. If that movement is constrained to a parent container, that's supported as is. But what I need, is to constrain the movement to an "enclosed" box. To make it hopefully clearer an analogy: imagine you throw a ring over a pole. The ring's movement are then obviously limited by the pole it was thrown over.
What I have so far is a custom drag handler function, which kinda does the job, but has an annoying side-effect. I have to return false from it when I detect a collision and while that constrains the movement, it also stops the dragging. If I do not return false, the override of the position I'm doing simply has no effect.
I made a JSFiddle: https://jsfiddle.net/dmrschmidt/u8u4qpdo/11/
In that fiddle I cannot even re-drag it again for some reason (it works on my actual page) but the code shows the idea.
Is there any way with jQuery UI or am I better off just rolling my own dragging function? I just like not re-inventing wheels.
[EDIT]
here's a screenshot to further illustrate my goal: https://s3.amazonaws.com/general-asset-catalogue/screenshot.png
The idea would be that the white box is draggable only in such a way, that the red box is always inside the white box. The red box itself is static.

Please try this Dennis, or explain why this isn't the right idea.
Update
Based upon your clarification, here is the solution. Easily tweeted to get perfect, but this is what you're after.
let pole = $('#pole');
let ring = $('#ring');
let ringlt = pole.position();
let polelt = pole.position();
let containment = [ringlt.left - pole.outerWidth() / 2, ringlt.top - pole.outerHeight() / 2, ring.outerWidth() + pole.innerWidth() / 2, ring.innerHeight() + pole.outerHeight()];
$('#pole').draggable({
containment: containment
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#pole {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
width: 200px;
cursor: move;
}
#ring {
position: absolute;
top: 65px;
left: 130px;
width: 400px;
border: 1px solid red;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="ring"></div>
<div id="pole">drag me</div>

animate the removal and attaching of DOM elements

I want an interactive experience for my users.. AND I want to remain responsiveness. I try to learn the web by making a card game.
What I have is things to click on, which are supposed to be appearing somewhere else on the page. (Im using jQuery so far)
The (simplified) use-case is:
var card = $('[card=X]').remove();
$('.board').append(card);
Now I want to add some animation to it.
I am failing in choosing an appropriate framework.
In the ones that I tried I couldn't time the removal, or the animation was gone, when I tried to call the removal, in a callback. Which was horrible, because the removal either fired before the callback or not at all. Or there was nothing left to be reattached..
So it should be more then just 'blur' or 'fade'.
So I want to detach a thing with an animation, place it somewhere else, and make it 'appear' there with an animation.
As a superb bonus, those animations would have an orientation, so that the 'from' and 'where to' are visible appearing to the end user. (Like an arrow or a line drawn between those 2 locations.)
(Sry for not being more specific, but asking that question for all the frameworks/ libs out there appears not that appealing..)
edit:
Nick pointed me in the right direction. My issue was the boilerplate code. I adjusted the code he provided. (added fade in animation + have the things 'reappearing' with event handler)
..thus I marked his answer as correct. (even that it wasn't, he didn't append the original thing, instead he created a new one.)
$('.cards ').on('click', '[card-id]', function() {
$(this).fadeOut(1000, function() {
var old = $(this).remove();
$('.cards').append(old);
old.fadeIn();
});

for(var i = 0; i < 6; i++) {
$('.cards').append('<div class="card" card-id="'+i+'"></div>');
}
$('[card-id]').click(function() {
$(this).fadeOut(2000, function() {
$(this).remove();
$('.cards').append('<div class="card" card-id="'+$(this).attr('card-id')+'"></div>');
});
});
.card {
position: relative;
display: inline-block;
width: 120px;
height: 180px;
background-color: #F4F4F4;
border: 1px solid #E8E8E8;
border-radius:5px;
margin: 15px;
cursor: pointer;
}
.card:after {
content: attr(card-id);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 700;
font-family: courier, serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cards"></div>

Consider using .animate() from Jquery. There is a lot you can do with it.
Take a look at the API: http://api.jquery.com/animate/

Twitter button and IIFE

While I am playing a little with this quick creation of mine. I came into two doubts.
The first is, how can I wrap with an IIFE all the JS code without breaking it.
The second is how to finish the twitter's button to send the active quote into a tweet.
"use strict";
var quotes = [
'Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.',
'There are things known and things unknown and in between are the doors.',
'I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.',
'A friend is someone who gives you total freedom to be yourself.',
'Where\'s your will to be weird?',
'Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.',
'I like people who shake other people up and make them feel uncomfortable.',
'This is the strangest life I\'ve ever known.',
'I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.',
'Whoever controls the media, controls the mind.'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Barrio', cursive;
font-size: 62.5%;
background: url('http://cdn.wallpapersafari.com/11/52/eQLxD8.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
text-align: center;
width: 90%;
}
.title {
font-size: 4.5em;
}
.image {
max-width: 100%;
height: auto;
border-radius: 20px;
}
.quo {
background: #fff;
font-family: 'Comfortaa', cursive;
font-size: 2.5em;
}
.button {
background: black;
color: white;
padding: 20px;
border: 5px solid black;
font-size: 1.2em;
border-radius: 100px;
}
.button:active {
background: red;
}
<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body class="container">
<div class="wrapper">
<h3 class="title">
Jim Morrison's<br> Quote Machine
</h3>
<div>
<img class="image" src="http://www.thefashionisto.com/wp-content/uploads/2016/04/Jim-Morrison-Style-Picture-Leather-Pants-Suede-Jackets-800x1093.jpg">
</div>
<button class="button" onclick="newQuote()">
Touch me
</button>
<button><i class ="fa fa-twitter"></i></button>
<div class="quo" id="quoteDisplay">
</div>
</div>
</body>

Rather than an inline event handler, you should use an event listener within your JavaScript like so:
(function(d,M){
var quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
len=quotes.length,
p=d.querySelector("p");
p.appendChild(d.createTextNode(""));
d.querySelector("button").addEventListener("click",function(){
p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))];
},0);
})(document,Math);
*{font-family:sans-serif;}
<p></p>
<button>New Quote</button>
ES6 version:
{
let quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
len=quotes.length,
d=document,
M=Math,
p=d.querySelector("p");
p.append(d.createTextNode(""));
d.querySelector("button").addEventListener("click",()=>p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))],0);
}
*{font-family:sans-serif;}
<p></p>
<button>New Quote</button>