jQuery addClass example

Change class name on click in jQuery

by josekerekes

HTML

<div>
<p>
</p>
  <img src="https://www.gannett-cdn.com/-mm-/1e4daaf8c2b761574381d6a91232cb5596b1a36b/c=235-0-2116-1414/local/-/media/2018/04/14/USATODAY/USATODAY/636592629961446461-GettyImages-181123720.jpg?width=680&height=510&fit=crop" id="img" />
</div>

CSS

* {padding:0;margin:0}
html, body {
  height:100%;
  line-height:normal

}
body > div:not(#fakeDiv) {
  background:gray;
  height:100%;
  width:350px;
  margin:0 auto;
  position:relative
}
img {
  max-width:100%;
  
}
p {position:absolute;top:0;white-space:wrap;word-break:break-all}

#fakeDiv {
  background:red;
  color:#fff;
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  margin:0 auto;
  word-break:break-all;
  opacity:0.5

  /* left:-9999px;
  top:-9999px; */
}

JavaScript

var img=$('#img'), imgH=img.height(), imgW=img.width();
var stringToFit ='0';
var numChars = 0;
var fakeDiv = $('<div/>').width(imgW).addClass('fakeDiv').attr('id','fakeDiv');

$('body').append(fakeDiv);

for(var i=0; i <= 10000; i++)
{
		
    if (document.getElementById('fakeDiv').clientHeight > imgH)
   {
       numChars = i - 1;
       break;
   }
   else {
       document.getElementById('fakeDiv').innerHTML += stringToFit;
   } 
   
}