Rik Rik - 2 months ago 6
CSS Question

determine side of div

I want to check if the div is on the left or the right side so that when the div is on the right side it changes the class. Is this possible with JS?

This is what I have right now:

enter image description here

And this is what I want as outcome:

enter image description here

So basically that it just flips everything around. This is my code:



.box-area {
background-color: #BA5e8e;
padding-right: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
max-width: 80%;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
font-family: roboto-thin;
font-size: 14px;
color: #fff;
margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
width: 75%;
height: 100%;
margin: 5px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
padding: 0;
}

<div class="area-blocks">
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
</div>
</div>
</div>





Thanks in advance.

Answer

You don't need JS or jQuery to achieve this. In CSS use the :nth-child(2n) selector, instead of your class, to change every second instance of the required elements to align to the right. Try this:

.box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* this is the boxes to align to the right */
.box-area:nth-child(2n) {
  border-radius: 10px 0 0 10px;
  padding: 0 0 0 10px;
}

body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
  width: 75%;
  height: 100%;
  margin: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
  padding: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Also note that I added bootstrap to the example as I realised that was the styling your example was missing.