jQuery collision - if any of Labels are overlapped

Question

I have created labels for each block which it should show top left of the block. If labels are overlapped with another, I have to move the overlapped label to up by 34px.

This has to happen only if Labels are overlapped

PS content is coming dynamically, hence I do not have access to add any classes or ids to achieve through CSS :(

HTML:

<div class="main-div">

  <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x150">
    <div class="resTotalClicksDiv">label</div>
  </div>
  <br><br><br>
    <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x50">
    <div class="resTotalClicksDiv">label</div>
  </div>

<br><br><br>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png">
    <div class="resTotalClicksDiv">Facebook</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png">
    <div class="resTotalClicksDiv">Twitter</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png">
    <div class="resTotalClicksDiv">Linkedin</div>
  </div>

</div>

CSS:

body{margin:50px auto;}
.main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}
.hrefOverlay{position:relative;display:inline-block;}
.resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
.resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}

jQuery

var newStyle = document.createElement('style');             

$('.hrefOverlay').find('.resTotalClicksDiv').each(function(i) {
  $(this).addClass('resTotalClicksDiv-'+i);
  $(this).css('top', -(i+1)*22 + 'px')
  newStyle.appendChild(document.createTextNode(".resTotalClicksDiv-"+i+":before{height:"+(34+(i)*22)+"px;}"));
    document.head.appendChild(newStyle);

});

Thanks for the @Haresh Vidja, for jQuery solution

What I am getting: Fiddle

From

To

Desired result:

Are you looking for a CSS fix for JS fix? – Aravind S Aug 06 '18 at 06:00 — Aravind S, Aug 06 '18 at 06:00
check my answer and let me know – Aravind S Aug 06 '18 at 06:08 — Aravind S, Aug 06 '18 at 06:08

Aravind S · Answer 1 · 2018-08-06T06:48:18.240

Here is the updated fiddle with the desired output. Added classes using Jquery specific to each button and then changed the CSS

$(window).load(function(){
 $(".hrefOverlay").each(function(){
   var eleText = $(this).find(".resTotalClicksDiv").text().toLowerCase();
    if(eleText == "facebook"){
    $(this).find(".resTotalClicksDiv").addClass("fw");
        }
        else if(eleText == "twitter"){
        $(this).find(".resTotalClicksDiv").addClass("tw");
        }
        else if(eleText == "linkedin"){
        $(this).find(".resTotalClicksDiv").addClass("ln");
        }
  });
});

body{margin:50px auto;}
.main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}


.hrefOverlay{position:relative;display:inline-block;}
.resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
.resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}
.resTotalClicksDiv.tw{
  top:-50px;
}

.resTotalClicksDiv.tw:before{
height:60px;
    content: "";
}
.resTotalClicksDiv.ln{
  top:-76px;
}

.resTotalClicksDiv.ln:before{
height:80px;
    content: "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">

  <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x150">
    <div class="resTotalClicksDiv">label</div>
  </div>
  <br><br><br>
    <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x50">
    <div class="resTotalClicksDiv">label</div>
  </div>
  
<br><br><br>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png">
    <div class="resTotalClicksDiv">Facebook</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png">
    <div class="resTotalClicksDiv">Twitter</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png">
    <div class="resTotalClicksDiv">Linkedin</div>
  </div>
  
</div>

@Reddy. That's why I asked you in the comment section itself! Dou you want a jquery solution? then simply add classes `fw` , `tw` , `ln` ..do you want it as an answer? — Aravind S, Aug 06 '18 at 06:34
@Reddy then i suggest you to use some plugin like jquery-collision . Refer https://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery — Aravind S, Aug 06 '18 at 07:03

jQuery collision - if any of Labels are overlapped

1 Answers1