-2
I’m developing a script in js (vanilla), to make it easier to put Whatsapp, and other forms of chat on the site. It is still under development and will have some more features, but I’m stuck at a point.
When I try to get the height of the div document.querySelector('.chatsPopUpUl').clientHeight
, the return height is much lower than the real one, if I run the same command after the site is loaded the return height is higher.
You can see in the gif above which returns document.querySelector('.').clientHeight
, but when I search for the same command after the site is loaded, the return value is 100.
This is the class:
class chatsPopUp
{
MainClass;
elClass;
elC = []
elChats = [];
duration;
setElChats(...el)
{
for(let i = 0; i < el.length; i++) {
this._setElChat = el[i];
}
}
// Cria os elementos na tela, seta a largura e alinha verticalmente
_createEl()
{
this.getElClass.insertAdjacentHTML('beforeend', '<ul class="chatsPopUpUl"></ul>');
let ul = document.querySelector('.chatsPopUpUl');
for(let i = 0; i < this.getElChats.length; i++) {
ul.insertAdjacentHTML('beforeend', `<li><i class="icofont-${this.getElChats[i]} SMElPopUp SMElPopUp-${this.getElChats[i]}"></i></li>`);
this.elC.push(document.querySelector(`.SMElPopUp-${this.getElChats[i]}`));
}
// Definindo a largura total do slider
ul.style.width = (this.getElChats.length) * 100 + '%';
// Centralizando verticalmente elementos na div
console.log(ul)
document.querySelector('.chatsPopUpUl')
console.log(document.querySelector('.chatsPopUpUl').clientHeight)
console.log(this.elClass)
console.log(this.elClass.clientHeight)
ul.style.marginTop = -ul.offsetHeight/2 + 'px';
//Chamando para deslizar
this._slideEl();
}
// Faz os elementos ficarem em slide
_slideEl()
{
let slide = 0;
let arr = [
{ transform: `translateX(${slide}%)` },
{ transform: `translateX(${slide}%)`, easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)' }
];
let slidePercentage = 100/this.getElChats.length
for(let i = 0; i < this.getElChats.length-1; i++) {
slide -= slidePercentage;
arr.push({ transform: `translateX(${slide}%)`, easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'});
arr.push({ transform: `translateX(${slide}%)`, easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'});
}
arr.push({ transform: 'translateX(0%)', easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'});
document.querySelector('.chatsPopUp ul').animate(arr,{
duration: 3000,
iterations: Infinity,
});
}
// Métodos Especiais
constructor(classe, duration, ...chats)
{
this.setMainClasse = classe;
this.setElClasse = classe;
this.setElChats(...chats);
this._createEl();
this.setDuration = duration;
}
get getElClass()
{
return this.elClass;
}
get getElC()
{
return this.elC;
}
set setElClasse(classe)
{
return this.elClass = document.querySelector(`.${classe}`);
}
get getMainClass()
{
return this.MainClass;
}
set setMainClasse(classe)
{
return this.MainClass = classe;
}
get getElChats()
{
return this.elChats;
}
set _setElChat(elChats)
{
return this.elChats.push(elChats);
}
get getDuration()
{
return this.duration;
}
set setDuration(duration)
{
return this.duration = duration;
}
}
The call in js is this:
let slide = new chatsPopUp('chatsPopUp',
1000,
'whatsapp','instagram','facebook-messenger'/*,'twitter',*/
);
And this is what html looks like
<div class="chatsPopUp"></div>
And the css is like this
body{
background-color: #eee;
}
.chatsPopUp{
background-color: white;
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
overflow: hidden;
}
/* Posicionamento */
.chatsPopUp.topLeft {
left: 0px;
top: 0px;
}
.chatsPopUp.topRight {
right: 0px;
top: 0px;
}
.chatsPopUp.bottomRight {
right: 0px;
bottom: 0px;
}
.chatsPopUp.bottomLeft {
left: 0px;
bottom: 0px;
}
.chatsPopUpUl {
display: -webkit-flex;
display: flex;
padding: 0px;
position: absolute;
margin: 0px;
top: 50%;
}
.chatsPopUpUl li{
width: 100%;
list-style: none;
text-align: center;
}
.chatsPopUpUl li i{
font-size: 100px;
}
I ran inside the load element of the window, and even then the error occurred, and it was due to the code itself creating the element and not the html, so running inside the load did not help. but I found a solution, thanks for the help.
– felipebbarroso