We Keep Coding

CSS equivalent for QML's "elide: Text.ElideMiddle"

QML Text has got a property named elide, which is used to elide some part of a text. Its CSS equivalent is text-overflow. One possible value for elide is Text.ElideMiddle, used to elide the text in the middle. I have searched such a value for text-overflow but I have not found it yet. It is possible to elide at the left and at the right in CSS (with text-overflow: ellipsis ellipsis; on Firefox only), but I want the opposite. I want something like "1 2 3 … 7 8 9" instead of "… 4 5 6 …".
So my question is simple: How to simulate QML's elide: Text.ElideMiddle in CSS? I am running short of ideas about this.

Simulation with css is possible, but I would do it in back-end (php, offline js) as that is the only way to get it right - just replacement the middle of the string with ellipsis.
I assume, that you can predict the length of this string. If not, the code will be longer by length count and condition.
With css you can cut string with less reasonable effect, imitation is possible with flex and repetition of the string. If you can't predict length of the string - back-end handling will be necessary and using css seems to be just redundancy.
... I can't force a snippet to read the function - it will be with inline js...
function elip(i,str){
var x = str.replace(str.slice(i,-i),' ... ');
document.write(x);}
/* for snippet only */
section{ background: #014; color: #fff; padding: 20px; margin: 20px auto}
p{ min-width: 5em; white-space: nowrap; display: flex; }
span{ background: #fff; color: #014; padding: 5px}
hr{ background: 0; border: 0}
/* imitation */
p{ white-space: nowrap; display: flex}
span{ display: inline-block; overflow: hidden; min-width: 1em}
.short{ width: 5em}
.mid{ width: 20em}
#css span{ max-width: 50%}
#css span:first-child{ display: flex; justify-content: flex-start}
#css span:last-child{ display: flex; justify-content: flex-end}
#css:hover span:nth-child(2){ background: #abc}
#css .triple span:nth-child(2){ color: transparent; width: 1em}
#css .triple span:nth-child(2)::before{ content: ' ... '; color: initial}
<section><h1>js</h1>
i=3 <hr>
<span><script>var i=3; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20; - more than string length - too much <hr>
<span><script>var i=20; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20 <hr>
<span><script>var i=20; var str='Lorem ipsum dolor sit amet, consectetur adipiscing elit'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span></section>
<section id="css"><h1>css</h1> <h3>string - ellipsis - string</h3>
5em<p class="short">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<span>...</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
<h3>lazy - triple string</h3>
5em<p class="short triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
</section>

How can I detect a click on ellipsis (...) in browser?

It seems to be hopeless, because the ellipsis is not in the DOM, it's just a render trick by the browser
I am asking because I am not a html/css guru, so many ezoteric tricks may exist I am not aware...

This will be a little tricky...It looks like you are using .ellipsis class on ellipsis text...
...so try to append a span on every .ellipsis class element using each jQuery. Use position to align that span at end of text
...and then add a click event to that span
Note: I added a background color to that span just for visual
Stack Snippet
$(".ellipsis").each(function() {
$(this).append("<span class='dots'></span>")
})
$(document).on("click", ".dots", function() {
console.log("ellipsis element is clicked");
})
p {
width: 150px;
border: 1px solid;
font: 13px Verdana;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
span.dots {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 12px;
background: #ff000052;
z-index: 99;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

You cannot attach events to pseudo-content, and text overflow characters are pseudo-content, in the same way content rendered by ::before and ::after is pseudo-content.
And like all pseudo-content, any clicks to it will trigger an event on the element to which it belongs.

Maybe add an event listener to the window and check if the mouse click has the same x and y coordinates as your ellipses?

Auto scale image to fit the rest of device height

First here is an image of what I looking for:
I want to put a header at the top, a paragraph below the header, and an SVG image below the paragraph. I would like this to scale properly on any sized device (well 320x480 is the smallest I am going to go which is an iPhone4 sized device).
I have the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div style="height:100%;position:absolute;top:0;left:0;bottom:0;right:0;">
<div>
<h2>Title</h2>
<p>Some long paragraph will be inserted here</p>
</div>
<div>
<img src="mySvg.svg" /> <!-- This image should scale to fit the remaining of the screen size. -->
</div>
</div>
</body>
</html>
The problem is on a small device there are scrollbars and you need to scroll down to view the rest of the image. I would like it to scale properly so that it fits perfectly into the screen so no scrolling is needed.
EDIT: I am using a framework and as a result of the framework I cannot edit the HTML or BODY tags

Try the approach with flexbox + position tricks.
jsFiddle
.container {
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
}
.container div:last-child {
flex: 1;
position: relative;
}
.container div:last-child img {
position: absolute;
max-width: 100%;
max-height: 100%;
}
<div class="container">
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg" />
</div>
</div>
Or, use flexbox + background image with size contain.
jsFiddle
.container {
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
}
.container div:last-child {
flex: 1;
background: url("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg") 0 0 no-repeat;
background-size: contain;
}
<div class="container">
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div></div>
</div>

i just gaved the body an min-height and min-width like that it never becommes more small than the phone
.test{
min-height:480px;
min-width: 320px;
background-color: pink;
text-align:center;
display: flex;
flex-direction:column;
justify-content: flex-start;
align-items: center;
padding: 0px 10px;
}
body{
margin:0px;
}
<body>
<div class="test" style="height:100%;position:relative;top:0;left:0;bottom:0;right:0;">
<div class="para">
<h2>Title</h2>
<p>Some long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted hereSome long paragraph will be inserted here</p>
</div>
<div class="test">
<img src="http://lorempixel.com/71/95" /> <!-- This image should scale to fit the remaining of the screen size. -->
</div>
</div>
</body>

Why my code (jQuery) is not responding? goal: Sticky header

I've got a basic HTML and I'm creating a new class (original-scrolled) that is going to add the position fixed to my menu once I start to scroll.
HTML
<header class=" original">
<h1>This is a Sticky Nav Demo!</h1>
<p>MAIN MENU</p>
</header>
<div class="main">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, </p>
CSS
.original {
height: 100px;
padding-top: 20px;
background: #f07057;
}
.original-scrolled {
position: fixed;
width: 100%;
top: 0;
}
jQuery - this is the function that I'm using but it seems it doesn't work!
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 90) {
$(".original").addClass(".original-scrolled");
} else {
$(".original").removeClass(".original-scrolled");
}
});
I'm a beginner so I'm sorry if this code is a mess!

The way you are adding and removing the classes is wrong.
This should work:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 90) {
console.log("more than 90");
$(".original").addClass("original-scrolled");
} else {
$(".original").removeClass("original-scrolled");
}
});
You are specifying the class selector while adding and removing class names.
You should take a look at the api here

JavaScript - Why won't my function hold anything longer than a few characters?

<script>
function hover(description) {
console.log(description);
document.getElementById('pricehover').innerHTML = description;
}
</script>
I am using the above script to create a list that gives information on hover which appears to the right of the list. I use the following on list items within the HTML.
<li class="pricegrid" onmouseover="hover('<h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p>')">Pedicure Behandling</li>
And the description is added to the following div
<div id="pricehover">Hover over the items to the left to see the price and description.
</div>
My problem is that my description cannot hold more than a few characters when I want to, if possible, completely style the div content with a whole pageworth of description including images. Can anyone explain why this isn't working or possible and perhaps give me a way to do what I want to do?
Thankyou.
EDIT: I made a pen here. http://codepen.io/anon/pen/YXwwag

You can hide the content (any HTML markup) you want to show inside the li element itself in a hidden div, and then swap it into the right side div when you hover.
Codepen forked from yours - http://codepen.io/anon/pen/doGXeV
HTML (change li)
<li class="pricegrid" onmouseover="hover(this)">Pedicure Behandling<div><h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p></div></li>
JavaScript (change hover)
function hover(t) {
document.getElementById('pricehover').innerHTML = t.childNodes[1].innerHTML;
}
CSS (class for hiding) - you could also just add it to the inline styles of the li's inner div, but that would be messy.
.pricegrid > div
{
display: none;
}

Check out this pen, I created.
No javascript
http://codepen.io/anon/pen/KpVVmM
ul{
width:200px;
display:block;
position:relative;
}
.description{
position:absolute;
top:0;
left:0;
width:300px;
transform:translate(200px,0);
border:1px solid #ccc;
display:none;
}
li:hover > div.description{
display:block;
}
<ul>
<li>Lorem ipsum.<div class='description'>Lorem ipsum dolor sit amet, consectetur.</div></li>
<li>Maxime, cupiditate.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></li>
<li>A, ratione.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas.</div></li>
<li>Asperiores, labore?<div class='description'>Lorem ipsum dolor sit.</div></li>
<li>Fugit, amet.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusamus?</div></li>
</ul>
Maybe dl>dt+dd is a better semantic markup for you, btw.
http://www.w3schools.com/tags/tag_dl.asp