I 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 using Tinymce to create the text i can not make changes at the text part.
How i can show"... Show More" is on this image
My example is on Show More Example
Here is my HTML/JavaScript
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 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>
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.
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>
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;
}
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.
Related
Olá, boa tarde. Estou fazendo o consumo de uma API, fiz tudo certinho passo a passo, deu tudo certo. Mas os >icones do tempo nao estão aparecendo pra mim. De todo o código é a unica coisa que nao está funcionando.
dadeSpan.innerText = `${data.name}, ${data.sys.country}`;
temperatura.innerText = `${parseFloat(data.main.temp.toFixed())}º C`
ceu.innerText = `${data.weather[0].description}`
img02.src = `http://openweathermap.org/img/wn/${data.weather[0].icon}#2x.png`
I'm new to programming and I'm currently learning JavaScript. Sorry if my code is not the most readable ever :)
I'm using this function here to calculate mortgage values (messages and business rules are in Portuguese/Brazilian standards):
function calculaFinanc() {
var amount1 = document.getElementById("amount1").value;
var amount2 = document.getElementById("amount2").value;
var teto = (amount1 / 100) * 30;
var parcela = amount2 / 360;
if (Math.round(teto) < Math.round(parcela)) {
return [document.getElementById("userMessage").className += 'alert alert-danger' , document.getElementById("userMessage").innerHTML = "<p>Você não pode financiar este imóvel. O valor da parcela de seu financiamento não poderá ultrapassar 30% valor da sua renda mensal</p>"];
} else { //... rest omitted for brevity
Inside the <p> tag in the return statement, I'd like to display the value of variables "teto" and "parcela". How on earth do I do that? No matter what I tried, it doesn't show anything (or it just displays the text "teto").
e.g. this is how I'd like to return:
return [document.getElementById("userMessage").className += 'alert alert-danger' , document.getElementById("userMessage").innerHTML = "<p>Você não pode financiar este imóvel. O valor da parcela de seu financiamento não poderá ultrapassar 30% valor da sua renda mensal ($var_teto)</p>"];
Just add it into the string.
return [document.getElementById("userMessage").className += 'alert alert-danger' , document.getElementById("userMessage").innerHTML = "<p>Você não pode financiar este imóvel. O valor da parcela de seu financiamento não poderá ultrapassar 30% valor da sua renda mensal "+teto+"</p>"];
If the amount is correct, then that amount appears in a dialog box if it is less than 150 €, or a 10% discount if more than 150 €, or a 20% if it is higher than 250 €.
<form name="monForm" action="#" method="post">
Montant de la facture : <input type="text" name="montant" id="montant" /></br>
<input type="button" onclick="paiement(document.monForm.montant.value)" name="valider" id="valider" value="Valider" />
</form>
<script>
function paiement(montant)
{
if (montant == "" || isNaN(montant)) //Pour s'assurer que le champ est renseigné et est numérique
{
alert("Montant de la facture en erreur");
return false;
}
montant = parseInt (montant);
if (isNaN(montant) == false && montant < 150 )
{
var mtn = document.getElementById("montant");
alert('Le montant de la facture est : "'+mtn.value+"'");
}
if (isNaN(montant) == false && montant > 150)
{
// calcul de la remise
alert('Vous bénéficiez d une remise de : "'+remise.value+"'");
}
var j = 20;
if (isNaN(montant) == false && montant > 250)
{
}
}
</script>
All what I want is to give :
If amount is less than 250 euros the discount will be 20%
And is is less than 150 euros the discount will be 10%
// Lorsque le DOM sera prêt:
// - L'event 'load' (paramètre 1) sera lancé
// - La fonction (paramètre 2) sera alors exécutée
window.addEventListener('load', function() {
// Lorsque l'utilisateur cliquera sur le bouton valider:
// - L'event 'click' (paramètre 1) sera lancé
// - La fonction (paramètre 2) sera alors exécutée
document.getElementById('valider').addEventListener('click', function() {
// Ciblage de l'input contenant le montant dans le DOM
var inputElement = document.getElementById('montant');
// Récupération de la valeur contenue dans l'input
var stringValue = inputElement.value;
// Transtypage de cette valeur textuelle en valeur numérique
var floatValue = parseFloat(stringValue);
// Si le transtypage a échoué ou le montant est négatif
if (isNaN(floatValue) || floatValue < 0) {
alert('Montant de la facture incorrect');
return;
}
// Déclaration de la remise
var remise;
// Si le montant de la facture est dans l'interval [0;150[
if (floatValue < 150) {
remise = 0; // pourcent
}
// Si le montant de la facture est dans l'interval [150;250[
else if (floatValue < 250) {
remise = 10; // pourcent
}
// Si le montant de la facture est dans l'interval [250;+inf[
else {
remise = 20; // pourcent
}
// Calcul du montant final à 2 chiffres significatifs
var finalValue = (floatValue - (floatValue * (remise / 100))).toFixed(2);
// Affichage du résultat final
alert('Vous bénéficiez d\'une remise de '+remise+'%\nSoit une facture totale de '+finalValue);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Montant de la facture :
<input type="text" id="montant"/><br/>
<input type="button" id="valider" value="Valider"/>
</body>
</html>
I create rows after the DOM loaded, but I want to know how to count number of rows for eliminate the last.
I have this.
<script type="text/javascript">//Procesamiento del formulario.
$(document).ready(function(){
var cuentaTr = $('#elementos >tbody >tr').length - 1; //Cuenta el número de filas que tiene la tabla originalmente, es 1.
$('#agregar').click(function(){ //Clic en el botón que agrega nueva fila.
cuentaTr++; //Es el número de fila que le corresponde a cada una que se crea.
var nume = $('#elementos >tbody >tr >td').length; //Obtener el número de celdas
var capa = document.getElementById("elementos"); //Obtener el elemento con el id elementos
var tr = ("tr"); //Crear una tag tr
capa.appendChild(tr); //Agregar la tag al elemento con id elementos.
var nuevaLetra = "A"; //La variable con la que se le asigna una letra a cada columna.
for (var i = 1; i <= nume; i++) {
$('<td><input type="text" class="prueba" id="'+nuevaLetra+cuentaTr+'" name="columna'+nuevaLetra+cuentaTr+'" required/></td>').appendTo('#elementos'); //Creación de nuevo input. THIS IS THE IMPORTANT!
var ASCII = nuevaLetra.charCodeAt(); //Obtener código ASCII
var aumento = ((ASCII+1 >= 65 && ASCII+1 <= 90) || (ASCII+1 >= 97 && ASCII+1 <= 122)) ? ASCII+1 : ASCII; //Incremenar la letra
var nuevaLetra = String.fromCharCode(aumento); //Tranformar el código a letra.
};
if (cuentaTr == 2){
$('<button type="button" id="eliminame">-</button>').insertAfter('#agregar'); //Creación del botón de eliminación de filas
};
});
$(document).on('click', '#eliminame', function(){ //Función que elimina las filas HERE IS MY DUDE.
$('#elementos tbody tr:last').remove(); //I WANT TO REMOVE THE LAST ROW. THIS CODE ELIMINATE ONLY THE ROWS CREATE WHEN DOM LOADED.
cuentaTr--;
if (cuentaTr == 1) {
$(this).remove();
};
});
});
</script>
What I can to do?
Thank you!
I'm sorry for my English. I can't speak English well.
Looks like there are some problems on how the tr is appended to the table, try
$(document).ready(function () {
var cuentaTr = $('#elementos >tbody >tr').length - 1; //Cuenta el número de filas que tiene la tabla originalmente, es 1.
$('#agregar').click(function () { //Clic en el botón que agrega nueva fila.
cuentaTr++; //Es el número de fila que le corresponde a cada una que se crea.
var nume = $('#elementos >tbody >tr:first >td').length; //Obtener el número de celdas
var capa = $("#elementos"); //Obtener el elemento con el id elementos
var tr = $('#tr').appendChild(tr); //Agregar la tag al elemento con id elementos.
var nuevaLetra = "A"; //La variable con la que se le asigna una letra a cada columna.
for (var i = 1; i <= nume; i++) {
$('<td><input type="text" class="prueba" id="' + nuevaLetra + cuentaTr + '" name="columna' + nuevaLetra + cuentaTr + '" required/></td>').appendTo(tr); //Creación de nuevo input. THIS IS THE IMPORTANT!
var ASCII = nuevaLetra.charCodeAt(); //Obtener código ASCII
var aumento = ((ASCII + 1 >= 65 && ASCII + 1 <= 90) || (ASCII + 1 >= 97 && ASCII + 1 <= 122)) ? ASCII + 1 : ASCII; //Incremenar la letra
var nuevaLetra = String.fromCharCode(aumento); //Tranformar el código a letra.
};
if (cuentaTr == 2) {
$('<button type="button" id="eliminame">-</button>').insertAfter('#agregar'); //Creación del botón de eliminación de filas
};
});
$(document).on('click', '#eliminame', function () { //Función que elimina las filas HERE IS MY DUDE.
$('#elementos tbody tr:last').remove(); //I WANT TO REMOVE THE LAST ROW. THIS CODE ELIMINATE ONLY THE ROWS CREATE WHEN DOM LOADED.
cuentaTr--;
if (cuentaTr == 1) {
$(this).remove();
};
});
});
var cuentaTr = $('#elementos >tbody >tr').length - 1; (already in your code) should give you the number of rows (minus one). Maybe make a jsfiddle so we can debug what's going on?
I'm facing this embarrassing situation. First, I'm on IE 10 right now, but this problem has been detected on IE9 as well. I have this input field and I need 2 events to work on it:
- onKeyUp, to check if the field's value is numeric; and
- onChange, to run some JS when the right number is inputted
If assigned separately, they work just fine. However, whenever I set these 2 events on the input field, the onChange event won't trigger, no matter what. All the other JS on this page has been stripped to prevent interference.
Below is the JS code for the onKeyUp:
<script>
function CampoNumerico(campo){
var valor = campo.value;
var novoValor = '';
var pontoPosicao = '';
if (isNaN(valor)){ // se nao for numero, devemos retornar o campo ao ultimo valor valido
alert(valor + " nao eh um numero valido");
novoValor = campo.defaultValue;
}
else{ //sendo um numero, buscamos a posicao de sua eventual virgula
valor = valor.split('');
for (var i = 0; i < valor.length; i++){
if (valor[i] == '.' && pontoPosicao == ''){
pontoPosicao = i;
}
}
// se nao houver ponto, o novo valor do campo sera igual ao valor de entrada da funcao
if ( pontoPosicao == ''){
for (var i = 0; i < valor.length; i++){
novoValor += valor[i];
}
}
else{ // se houver o ponto, registramos o novo valor igual ao valor de entrada, ate o limite de casas decimais
var tamanho = ((pontoPosicao + 3) < valor.length)? pontoPosicao + 3 : valor.length;
for (var i = 0; i < tamanho; i++){
novoValor += valor[i];
}
}
if (pontoPosicao != '' && pontoPosicao < (valor.length - 3)){ // se houver um ponto e mais de 2 casas decimais, alertamos o usario e desconsideramos as casas adicionais
alert("Aviso: " + campo.value + " tem mais de 2 casas decimais; serão consideradas apenas as primeiras casas - " + novoValor);
}
}
// terminamos por atualizar o valor do campo
campo.value = novoValor;
} // fim da CampoNumerico
</script>
Below is the field I'm trying to assign this script to:
<input type='text' name='campo' value='0' onchange='alert("1")' onkeyup='CampoNumerico(this)'>
At this point I just want to alert "1" when the onchange is triggered, but I'm unable to do even this simple action...
Interestingly, this coding works on other browsers just fine - Chrome & Firefox. Can anyone help me with this embarrassing situation? Thanks in advance for any thoughts.
EDIT - input field now visible separately