I have a code that currently works using the click or keyup function. However, I am looking for a way to make it work without relying on keyup or click events. Is there a way to automatically change the line-height when the page is loaded?
(Please note that the divs in question have varying heights and I already have a jQuery document ready function in place)
You can view the code in action on JSFiddle: http://jsfiddle.net/n32u4gnq/1/
$(".note").on("load",function(){
var noteHeight = $(this).height();
if (noteHeight == 25) {
$(this).css("line-height","25px");
} else {
$(this).css("line-height","normal");
}
});#wrap {
margin:0 auto;
max-width:420px;
}
.note {
width:100%;
min-height:25px; line-height:25px;
margin-bottom:5px;
padding:0px 10px;
text-align:left;
outline:none;
display:inline-block;
background:whiteSmoke;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap" >
<div class="note" id="primer" contenteditable="true"> First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, </div>
<div class="note" contenteditable="true"> Second line </div>
</div>