Show More Text After A
FieldI have a script to show more text but in my structure Show more link comes just after the text. What i want that Show more text must come just at the end of the text. As ı will be
Solution 1:
here is the idea to turn the last <p> to an inline element at screen so the More/less button can stand right behind the text.:
from earlier comment:
A quick fix is to try to set the last p as an inline box
div.example-1 p:last-of-type{display:inline;}, the best would be to append that link to that last p seen instead inserting it behind ;) demo https://codepen.io/gc-nomade/pen/YzGraQV – G-Cyrillus 25 mins ago
document.addEventListener('DOMContentLoaded', function() {
new ShowMore('example-1', {
more: ' ... Show more',
less: ' Show less'
})
});
//showMore.min.js
var ShowMore = (function() {
function m(c, a) {
var d = a.type,
b = a.more;
a = a.less;
this.className = c;
this.i = d || "span";
this.more = b;
this.less = a;
this.showMore = '<b class="show-more show-more-button same" aria-label="expand" tabindex="0">' + b + "</b>";
this.showLess = '<b class="show-less show-more-button same" aria-label="collapse" tabindex="0">' + a + "</b>";
this.regex = {
c: /[^\x20-\x7E]/gm,
h: /\s{2,}/gm,
f: /<\s*\/?br\s*[/]?>/gm
};
this.m();
}
m.prototype.m = function() {
for (var c = document.querySelectorAll("." + this.className), a = 0; a < c.length; a++) {
var d = c[a].getAttribute("data-number"),
b = c[a].getAttribute("data-after"),
e = c[a].getAttribute("data-type");
this.j(e, c[a], +d, +b);
}
};
m.prototype.j = function(c, a, d, b) {
a.setAttribute("aria-expanded", "false");
b = d + b;
if ("text" === c) {
var e = a.innerHTML;
var f = e.replace(this.regex.c, "").replace(this.regex.h, " ").replace(this.regex.f, "").length - a.innerText.replace(this.regex.c, "").length;
a.innerText.length > b &&
((f = e
.replace(this.regex.c, "")
.replace(this.regex.h, " ")
.replace(this.regex.f, " ")
.substr(0, d + f)),
(f = f.substr(0, Math.min(f.length, f.lastIndexOf(" ")))),
(a.innerHTML = f),
this.b({
type: c,
element: a,
l: e,
o: f
}));
}
if ("list" === c && ((e = [].slice.call(a.children)), e.length > b)) {
for (f = d; f < e.length; f++) e[f].classList.add("hidden");
this.b({
type: c,
element: a,
g: d
});
}
if ("table" === c && ((e = a.rows), e.length > b)) {
for (b = d; b < e.length; b++) e[b].classList.add("hidden");
this.b({
type: c,
element: a,
g: d
});
}
};
m.prototype.b = function(c) {
var a = this,
d = c.type,
b = c.element,
e = c.g,
f = c.l,
n = c.o;
"table" === d ? (b.insertAdjacentHTML("afterend", this.showMore), (c = b.nextElementSibling)) : ((c = document.createElement(this.i)), (c.innerHTML = this.showMore), b.appendChild(c), (c = b));
c.addEventListener("click", function(k) {
var h = k.currentTarget;
k = k.target;
var g = "table" === d ? h.previousElementSibling.getAttribute("aria-expanded") : h.getAttribute("aria-expanded");
if ("text" === d && k.classList.contains("show-more-button")) {
b.innerHTML = "";
b.innerHTML = "false" === g ? f : n;
var l = document.createElement(a.i);
l.insertAdjacentHTML("beforeend", "false" === g ? a.showLess : a.showMore);
"true" === g ? a.a(b, k, a.more, d, !1) : a.a(b, k, a.less, d, !0);
b.appendChild(l);
}
if ("list" === d && k.classList.contains("show-more-button"))
for (h = [].slice.call(h.children), l = 0; l < h.length; l++)
"false" === g && (h[l].classList.remove("hidden"), a.a(b, k, a.less, d, !0)), "true" === g && l >= e && l < h.length - 1 && (h[l].classList.add("hidden"), a.a(b, k, a.more, d, !1));
if ("table" === d)
if (((h = b.rows), "false" === g)) {
for (g = 0; g < h.length; g++) h[g].classList.remove("hidden");
a.a(b, k, a.less, d, !0);
} else {
for (g = e; g < h.length; g++) h[g].classList.add("hidden");
a.a(b, k, a.more, d, !1);
}
});
};
m.prototype.a = function(c, a, d, b, e) {
b = "table" === b ? b : "the " + b;
var f = e ? "collapse" : "expand";
c.setAttribute("aria-expanded", e);
a.innerHTML = d;
a.setAttribute("aria-label", f + " " + b);
};
return m;
})();div.example-1 p:last-of-type {
display: inline;
}
b {
color: #0095E5
}<div class="container">
<section id="example-text">
<h2>More text</h2>
<div class="example-1" data-type="text" data-number="500" data-after="1">
<p><strong>Porque é que o usamos?</strong></p>
<p>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais
ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente
o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes
por acidente, por vezes propositadamente (como no caso do humor).</p>
<p><strong>O que é o Lorem Ipsum?</strong></p>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de
um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com
a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
<p><strong>De onde é que ele vem?</strong></p>
<p>Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock,
um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a
sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular
durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.</p>
<p>O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos
na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.</p>
</div>
</section>
</div>or play with position :https://codepen.io/gc-nomade/pen/JjRrLvR it sets it on the far right at bottom.
Solution 2:
I am using a quick positioning fix to do this. Setting parent div as position:relative; and then span element position:absolute;.
document.addEventListener('DOMContentLoaded', function() {
new ShowMore('example-1', {
more: ' ... Show more',
less: ' Show less'
})
});
//showMore.min.js
var ShowMore = (function() {
function m(c, a) {
var d = a.type,
b = a.more;
a = a.less;
this.className = c;
this.i = d || "span";
this.more = b;
this.less = a;
this.showMore = '<b class="show-more show-more-button same" aria-label="expand" tabindex="0" style="position: absolute;bottom: 0;right: 0;">' + b + "</b>";
this.showLess = '<b class="show-less show-more-button same" aria-label="collapse" tabindex="0">' + a + "</b>";
this.regex = {
c: /[^\x20-\x7E]/gm,
h: /\s{2,}/gm,
f: /<\s*\/?br\s*[/]?>/gm
};
this.m();
}
m.prototype.m = function() {
for (var c = document.querySelectorAll("." + this.className), a = 0; a < c.length; a++) {
var d = c[a].getAttribute("data-number"),
b = c[a].getAttribute("data-after"),
e = c[a].getAttribute("data-type");
this.j(e, c[a], +d, +b);
}
};
m.prototype.j = function(c, a, d, b) {
a.setAttribute("aria-expanded", "false");
a.style.position = 'relative';
b = d + b;
if ("text" === c) {
var e = a.innerHTML;
var f = e.replace(this.regex.c, "").replace(this.regex.h, " ").replace(this.regex.f, "").length - a.innerText.replace(this.regex.c, "").length;
a.innerText.length > b &&
((f = e
.replace(this.regex.c, "")
.replace(this.regex.h, " ")
.replace(this.regex.f, " ")
.substr(0, d + f)),
(f = f.substr(0, Math.min(f.length, f.lastIndexOf(" ")))),
(a.innerHTML = f),
this.b({
type: c,
element: a,
l: e,
o: f
}));
}
if ("list" === c && ((e = [].slice.call(a.children)), e.length > b)) {
for (f = d; f < e.length; f++) e[f].classList.add("hidden");
this.b({
type: c,
element: a,
g: d
});
}
if ("table" === c && ((e = a.rows), e.length > b)) {
for (b = d; b < e.length; b++) e[b].classList.add("hidden");
this.b({
type: c,
element: a,
g: d
});
}
};
m.prototype.b = function(c) {
var a = this,
d = c.type,
b = c.element,
e = c.g,
f = c.l,
n = c.o;
"table" === d ? (b.insertAdjacentHTML("afterend", this.showMore), (c = b.nextElementSibling)) : ((c = document.createElement(this.i)), (c.innerHTML = this.showMore), b.appendChild(c), (c = b));
c.addEventListener("click", function(k) {
var h = k.currentTarget;
k = k.target;
var g = "table" === d ? h.previousElementSibling.getAttribute("aria-expanded") : h.getAttribute("aria-expanded");
if ("text" === d && k.classList.contains("show-more-button")) {
b.innerHTML = "";
b.innerHTML = "false" === g ? f : n;
var l = document.createElement(a.i);
l.insertAdjacentHTML("beforeend", "false" === g ? a.showLess : a.showMore);
"true" === g ? a.a(b, k, a.more, d, !1) : a.a(b, k, a.less, d, !0);
b.appendChild(l);
}
if ("list" === d && k.classList.contains("show-more-button"))
for (h = [].slice.call(h.children), l = 0; l < h.length; l++)
"false" === g && (h[l].classList.remove("hidden"), a.a(b, k, a.less, d, !0)), "true" === g && l >= e && l < h.length - 1 && (h[l].classList.add("hidden"), a.a(b, k, a.more, d, !1));
if ("table" === d)
if (((h = b.rows), "false" === g)) {
for (g = 0; g < h.length; g++) h[g].classList.remove("hidden");
a.a(b, k, a.less, d, !0);
} else {
for (g = e; g < h.length; g++) h[g].classList.add("hidden");
a.a(b, k, a.more, d, !1);
}
});
};
m.prototype.a = function(c, a, d, b, e) {
b = "table" === b ? b : "the " + b;
var f = e ? "collapse" : "expand";
c.setAttribute("aria-expanded", e);
a.innerHTML = d;
a.setAttribute("aria-label", f + " " + b);
};
return m;
})();<div class="container">
<section id="example-text">
<h2>More text</h2>
<div class="example-1" data-type="text" data-number="500" data-after="1">
<p><strong>Porque é que o usamos?</strong></p>
<p>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais
ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente
o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes
por acidente, por vezes propositadamente (como no caso do humor).</p>
<p><strong>O que é o Lorem Ipsum?</strong></p>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de
um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com
a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
<p><strong>De onde é que ele vem?</strong></p>
<p>Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock,
um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a
sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular
durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.</p>
<p>O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos
na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.</p>
</div>
</section>
</div>Solution 3:
A very quick fix would be as follows:
.example-1{
position:relative;
}
.example-1 span{
position: absolute;
right: 0;
bottom: 0;
}
There is even more quicker solution:
.example-1 p:nth-child(2){
display:inline;
}
Solution 4:
the p tag is a block display element that's why the "show more" starts at new line, try changing it to span, I tried it on developer tools and it worked.
<div class="container">
<section id="example-text">
<h2>More text</h2>
<div class="example-1" data-type="text" data-number="500" data-after="1">
<p><strong>Porque é que o usamos?</strong></p>
<span>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais
ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente
o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes
por acidente, por vezes propositadamente (como no caso do humor).</span>
<p><strong>O que é o Lorem Ipsum?</strong></p>
<span>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de
um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com
a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</span>
<p><strong>De onde é que ele vem?</strong></p>
<span>Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock,
um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a
sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular
durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.</span>
<span>O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos
na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.</span>
</div>
</section>
</div>
Hope this would solve the problem.
Post a Comment for "Show More Text After A
Field"