CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bigwater
bigwater

Reputation: 67

add class based on height of element

I am trying to hide a span tag based on the height the (.CWproductPreviewDescription p) element. This is for a truncate text type function. I have found a few similar question and answers but nothing that quite worked in my situation. For some reason I always get the height of the first matched selector but I thought using a jQuery selector automatically looped through all elements. Here is the code I have

Simple CSS to cut off the text at length and reveal on click. Works fine

CSS

  .CWproduct .CWproductPreviewDescription p {
    max-height: 65.4px;
    overflow: hidden;
    margin: 0 6px;
  }

  .CWproductPreviewDescription p.more {
    max-height: 200px;
    overflow:visible;
  }

  .CWproductPreviewDescription span{
    cursor: pointer;
  }

jQuery

jQuery(window).load(function() {

// add a span tag to pproduct preview description
jQuery("<span>more</span>").appendTo(".CWproductPreviewDescription");

//This is the block of code that I can not get to work**

//add class to hide span if .CWproductPreviewDescription p > 60
if (jQuery(".CWproductPreviewDescription p").height() > 60){
  jQuery(".CWproductPreviewDescription span").css("display","hidden");
  var  h = (jQuery(".CWproductPreviewDescription p").height());
  console.log(h)
}

both these blocks of code also work 

// set up show hide on more link
//change text within span to reflect state
jQuery(".CWproductPreviewDescription p").click(function(){
jQuery( this).toggleClass( "more" );
  var text = jQuery(this).siblings(".CWproductPreviewDescription span").text() == 'Less' ? 'More' : 'Less';
jQuery(this).siblings(".CWproductPreviewDescription span").text(text);

});
jQuery(".CWproductPreviewDescription span").click(function(){
jQuery( this).siblings(".CWproductPreviewDescription p").toggleClass( "more" );
  var text = jQuery(this).text() == 'Less' ? 'More' : 'Less';
  jQuery(this).text(text);
  });
});

The html is dynamically generated and contains any number of divs with a variety of text lengths

<div class="CWproductPreviewDescription">
  <p class="more"> description text with however many lines</p>
  <span>more</span>
</div>


Edit: I just wanted to add the completed code that I have now

CSS

.CWproduct .CWproductPreviewDescription p{
  //line height of <p> * number of lines to show
  //using Max-height to allow expanding
  max-height: 65.4px;
  overflow: hidden;
  margin: 0 6px;
}
.CWproductPreviewDescription p.more{
  max-height: 200px; //arbitrary height for testing
  overflow:visible;
}
.CWproductPreviewDescription span{
  cursor: pointer;
}

jQuery 

jQuery(window).load(function() {
  //cache selectors
  // add a span tag to product preview description
  var d = jQuery(".CWproductPreviewDescription");
  jQuery("<span>more</span>").appendTo(d);
  var p = jQuery(".CWproductPreviewDescription p");
  var s = jQuery(".CWproductPreviewDescription span");

  jQuery(d).each(function(){ 
    // search  <p> in context of current element and get height
    if (jQuery("p",this).height() < 60) { 
    //if element is smaller than 60px hide the span tag
    jQuery("span",this).css("display","none");
  }
});

// set up show/hide on click <p>
jQuery(p).click(function(){
  jQuery( this).toggleClass( "more" );
  //change text within span to reflect state
  var text = jQuery(this).siblings(s).text() == 'Less' ? 'More' : 'Less';
  jQuery(this).siblings(s).text(text);
});// set up show/hide on click <span>

jQuery(s).click(function(){
  jQuery( this).siblings(p).toggleClass( "more" );

  //change text within span to reflect state
  var text = jQuery(this).text() == 'Less' ? 'More' : 'Less';
  jQuery(this).text(text);
  });
});

Upvotes: 1

Views: 1495

Answers (2)

Scimonster
Scimonster

Reputation: 33409

.height() only gets the height of the first matched element. To get the heights of all matched elements, loop through them, like this:

jQuery(".CWproductPreviewDescription").each(function(){ // do this for each matched item
  if (jQuery("p",this).height() > 60) { // search for <p> in context of current element
    jQuery("span",this).css("display","hidden");
  }
});

Upvotes: 1

epascarello
epascarello

Reputation: 207517

It you want to do it to all the elements, you need to use each. When you use a method that returns a value, it only works on the first element of the set. 

jQuery(".CWproductPreviewDescription p").each( function(){
   var currentP = jQuery(this);
   console.log(currentP.height());
});

Upvotes: 3

Related Questions