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!
why javascript? you solve this only with html and css
– Leandro Angelo
@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
– Família JJ
include your css
– Leandro Angelo
@Leandroangelo blz
– Família JJ
@Leandroangelo just posted
– Família JJ
@Leandroangelo as I select only the 5th and 6th element using the :Nth-Child() ?
– Família JJ