Boa tarde, gostaria de saber como faço para trocar posição ao atingir uma quantidade X de elementos na tela utilizando javascript. Exemplo:
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.
Lembrando que o nome da minha div é:
<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
}
Obs: lembrando que não quero por o código em CSS e sim utilizar javascript, pq irei implementar um LOOP em PHP na div "poster", para copiar a div "info" e sua informação.
O que devo fazer? Me ajude!