How to count elements on the screen and when reaching a certain amount change position?

Asked

Viewed 66 times

0

Good afternoon, I would like to know how to change position when reaching a quantity X of elements on the screen using javascript. Example:

Tenho 3 maças no lado direito da tela, ao adicionar a quarta maça 
ela ao invés de ficar do lado direito irá para o lado esquerdo.

Remembering that my div’s name is: 

<div class="poster">
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (ir pro lado esquerdo)
 </div>
</div>


.poster .left {
  right: -318px
}

.poster:hover>.info {
  display: block
}

.poster .info {
  display: none;
  position: absolute;
  top: 10px;
  width: 308px;
  height: 225px;
  border: 1px solid;
  z-index: 3;
  background: rgba(0,0,0,0.98);
  border: 0;
  box-shadow: 0 15px 20px -7px rgba(0,0,0,0.6)
}

.poster .info .title {
  position: relative;
  float: left;
  margin-left: 3px;
  width: 100%;
  border-color: #000;
  color: #fff
}

.poster .info .title h4 {
  float: left;
  width: 100%;
  padding: 10px;
  padding-bottom: 0px;
  padding-right: 50px;
  font-weight: 500;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.poster .info .title span.flags {
  padding: 10px;
  position: absolute;
  font-weight: 500;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  right: 0;
  top: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.09);
}

.poster .info .metadata {
  width: 100%;
  float: left;
  padding: 10px 13px;
  font-size: 12px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.4)
}

.poster .info .metadata span {
  padding: 5px 10px;
  float: left
}

.poster .info .metadata span.imdb {
  padding: 5px 10px;
  font-weight: 500;
  background: #FFC107;
  color: #000;
  border-radius: 3px
}

.poster .info .metadata span.episodes {
  padding: 5px 10px;
  font-weight: 500;
  background: #000;
  color: #fff;
  border-radius: 3px
}

.poster .info .sinopse {
  padding: 13px;
  float: left;
  width: 100%;
  height: 100px;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  border-bottom: solid 1px rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4)
}

.poster .info .genres {
  float: left;
  width: 100%;
  height: 40px;
  padding: 14px 10px
}

.poster .info .genres .mta {
  width: 100%;
  height: 17px;
  float: left;
  overflow: hidden
}

.poster .info .genres .mta a {
  float: left;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-right: solid 1px rgba(255, 255, 255, 0.15);
  color: #fff
}

.poster .info .genres .mta a:hover {
  color: rgba(255, 255, 255, 0.6)
}

.poster .info .genres .mta a:last-child {
  border-right: 0
}

.poster .info:nth-child(-4n+4) {
  left: -318px
}

Note: remembering that I do not want to put the code in CSS but use javascript, pq I will implement a PHP LOOP in the div "poster", to copy the div "info" and its information.

What should I do? Help me!

javascript jquery

  • why javascript? you solve this only with html and css

  • @Leandroangelo then, is pq html and css I will have to create a function called . left { float: left }, and add in class="info left" if you know how to get qnd to the 4th apple change only in CSS and HTML teaches me there, I test here and come back with the answer for you

  • include your css

  • @Leandroangelo blz

  • @Leandroangelo just posted

  • @Leandroangelo as I select only the 5th and 6th element using the :Nth-Child() ?

Show 1 more comment

2 answers

2


For what explained your goal is better to do by css as the other answer already showed. But for learning purposes, I show you how to do what you want with Javascript.

The logic is to make a for on all elements of the class info, and each multiples of 4 places a different class.

Example:

const divsInfo = document.getElementsByClassName("info"); //obtem todos os infos

for (let i = 0; i < divsInfo.length; ++i){
  let posicao = i + 1;
  if (posicao % 4 === 0){ //se multiplo de 4
    divsInfo[i].classList.add("esquerda"); //adiciona a classe esquerda
  }
  else {
    divsInfo[i].classList.add("direita"); //adiciona a classe direita
  }
}
.esquerda {
  text-align:left;
}

.direita {
  text-align:right;
}
<div class="poster">
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (ir pro lado esquerdo)
  </div>
    <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (ir pro lado esquerdo)
  </div>
</div>

Doing to the 3 right and 2 to the left every five:

const divsInfo = document.getElementsByClassName("info");

let posicaoColuna = 1;

for (let i = 0; i < divsInfo.length; ++i) {
  if (posicaoColuna <= 3) { // de 1 a 3 para a direita
    divsInfo[i].classList.add("direita"); 
  } else { // de 4 a 5 para a esquerda
    divsInfo[i].classList.add("esquerda"); 
  }
  
  posicaoColuna++;
  if (posicaoColuna > 5){
    posicaoColuna = 1;
  }
}
.esquerda {
  text-align: left;
}

.direita {
  text-align: right;
}
<div class="poster">
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>

</div>

  • Man They fight from the heart, you super helped me a lot ... that’s what I needed

  • If it is not to abuse too much the example is right, as I add only +1 apple on the left, every 3 apple on the right, 2 on the left?

  • @Familyj 3 on the right , 2 on the left and turn 3 right and 2 left again ? And so on ?

  • That’s why my content is 3 right and 2 left there is a total of 5 items per column

  • @I already edited the answer, see if that’s what you were looking for.

  • This :D obg guy was all I needed

  • see q you know Javascript, qnd I finish my site, I will need a specialized person to review everything that was done and fix everything that needs, I will be paying for the service, would not like to pass me some contact to qnd I finish getting in touch with you? @Isac

  • @Familyj Then when you arrive at this time is just open a specific chat room here, we can enter into details and eventually exchange contacts.

  • Let’s go continue this discussion in chat.

Show 4 more comments

1

You can do this only with html and css. css has a feature called selectors that you can use for this. https://www.w3schools.com/cssref/css_selectors.asp

To be more specific the Nth-Child selector can help you apply the style only to the umpteenth child element, and using n+ from nth, i.e., the code below changes the alignment to left from the 4° element.

.info {
  text-align: right;
}
.info:nth-child(n+4) {
  text-align: left;
}
<div class="poster">
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (ir pro lado esquerdo)
 </div>
 </div>

  • your code is excellent, but it did not solve my problem, because I need to take the vdd the 5th and 6th element from left to right, because when I reach the 5th and 6th element will come from left to right can help me?

  • I don’t know if I understand, but if it’s only 4° element left, it changes Nth-Child(n+4) to Nth-Child(4). so only the 4° element will receive the style.

  • man u have any social network q can help me? or vim Team Viewer? to with a would be difficulty in my code

  • so I’m not very active in social networks. and about your doubts they are kind of beginner, I advise you to do some web development course. has many good in udemy and has.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.