Script for detecting height and changing padding

Question

I have a chunk of text. There is a title which is in the chunk of text. It can either be 25 or 50 pixels high depending if it's 1 or 2 lines. The title is ap tag inside of a div with the css aspect of height: auto;. I am using a script to detect the height of the div. By default the div is 25 high with 1 line. If so nothing changes. If it is 50 pixels high, it should include style tags with some still inside changing the padding of a different dive moving the text around. I currently have this script running (it doesn't work which is why I am requesting help):

 <script> $(document).ready(function () { if ($('.rtitle').height() == 50) { document.write("<style> div#raffleinfo { height: 127px; padding-top: 173px; }</style>)"; } }); </script> 

 div#raffledisplay { height: 300px; width: 100%; position: relative; } div#raffleinfo { float: left; width: 480px; height: 102px; padding-top: 198px; background-color: red; } div#rtitle { height: auto; } p.rtitle { font-size: 35; line-height: 25px; } p.rinfo { font-size: 25; line-height: 25px; } #progressBar { width: 478px; height: 25px; border: 1px solid #111; background-color: #292929; } 

 <div id="raffledisplay"> <div id="raffleinfo"> <div id="rtitle"><p class="rtitle">$weapon | $skin $stattrack</p></div> <p class="rinfo">Quality: $quality</p> <p class="rinfo">Price: $price</p> <div id="progressBar" class="pbar"><div></div></div> </div> </div> 

I am not sure why it's displaying all weird if you run the code, but on my website it looks fine...

Answer 1

Try this

 $(document).ready(function() { // console.log($('.rtitle').height()); if ($('.rtitle').height() == 50) { $("div#raffleinfo").addClass('larger'); } }); 

 div#raffledisplay { height: 300px; width: 100%; position: relative; } div#raffleinfo { float: left; width: 480px; height: 102px; padding-top: 198px; background-color: red; } div#raffleinfo.larger { height: 127px; padding-top: 173px; } div#rtitle { height: auto; } p.rtitle { font-size: 35; line-height: 25px; } p.rinfo { font-size: 25; line-height: 25px; //background-color: green; } #progressBar { width: 478px; height: 25px; border: 1px solid #111; background-color: #292929; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="raffledisplay"> <div id="raffleinfo"> <div id="rtitle"> <p class="rtitle">$weapon $skin $stattrack xxxxxxxx xx xxx xx xxxxxxx xxxxxxxxx xxxxxxx xxxxx </p> </div> <p class="rinfo">Quality: $quality</p> <p class="rinfo">Price: $price</p> <div id="progressBar" class="pbar"> <div> </div> </div> 

Answer 2

Try this, create a custom class with your features, and add it to your element whenever required.

The reason why your code is not working is because the DOM already loads and reads CSS code. So the moment you are inserting it the way you do, it doesn't do anything because it finished doing that. You can only add elements, but not style to already rendered elements. To add style to already rendered elements, use addClass as I've did below.

 $(document).ready(function() { if ($('.rtitle').height() == 50) { $('#raffleinfo').addClass('customclass'); } }); 

 div#raffledisplay { height: 300px; width: 100%; position: relative; } div#raffleinfo { float: left; width: 480px; height: 102px; padding-top: 198px; background-color: red; } div#rtitle { height: auto; } p.rtitle { font-size: 35; line-height: 25px; } p.rinfo { font-size: 25; line-height: 25px; } #progressBar { width: 478px; height: 25px; border: 1px solid #111; background-color: #292929; } .customclass { height: 127px; padding-top: 173px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="raffledisplay"> <div id="raffleinfo"> <div id="rtitle"> <p class="rtitle">$weapon | $skin $stattrack</p> </div> <p class="rinfo">Quality: $quality</p> <p class="rinfo">Price: $price</p> <div id="progressBar" class="pbar"> <div></div> </div> </div> </div>