Reputation: 9012

Hide an element if container height is less than a fixed amount

I'm working on a web application which has many dynamic modules. Inside those modules I have a text container and I can't control what the future administrator will write inside of this container.

So I've set a fixed max-height to the container and I've added a button to "read more" that will change the max-height if any user clicks on it. (and then clicks it again)

If the text is too short, obviously there shoudn't be a "read more" option as there's no more text to show.

My question is. Would it be possible to hide the button (display:none) if the text container has not reach that fixed max-height? (or make it show if the max-height is reached).

Example of the HTML:

<div class="text height">                         
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
</div>
<div class="link">                
<a id="readmore" href="javascript:changeheight()">Read more</a>
</div>

Basic CSS:

.text {
    overflow:hidden;
}
.height {
    max-height:38px;
}
.heightAuto {
    max-height:5000px;
}

and my little javascript:

function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

JSFIDDLE

I work basically with HTML and CSS and have very little knowledge of javascript/jquery, so if you think there's a turn around with just css it would be a better option for me. However any solution will be greetly apreciated.

Btw, would it be possible to make a bit of a transition when changing the height so it would look a bit more fluid? (this is me beign greedy, feel free to ignore this question if You think I went over the top asking for help).

thanks a lot in advance and excuse my poor english.

Upvotes: 2

Answers (3)

Haydar C.

Reputation: 805

i understand your English

try this on your JSFIDDLE code: htmlCode:

<div class="text height" id="text">                         
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
 </div>
 <div class="link">                
      <a id="readmore" href="#" onclick="changeheight(this)">Read more</a>
 </div>

cssCode:

.text {
    overflow:hidden;
}
.height {
    height:38px;
    overflow:hidden;
}

javascript

 $(document).ready(function(){
    $('.text').each(function(element,index){
        if($(this)[0].scrollHeight>$(this).height()){
            $(this).next().show()
        }else{
            $(this).next().hide()
        }
    })
})

function changeheight(obj) {
        var fullHeight = $(obj).parent().prev().get(0).scrollHeight        
        var readmore = $(obj);
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
            $(obj).parent().prev().data('oldHeight',$(obj).parent().prev().height())
            $(obj).parent().prev().animate({'height':fullHeight},350)
        } else {
            readmore.text("Read more");
           $(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')},350)
        }           
    };

runned Code

Note : page layout may be distorted when resized.

JSFieddle

Upvotes: 1

Suchit kumar

Reputation: 11859

try to implement something like this:

$(document).ready(function(){
      if($( ".text" ).height() <39){
            $('#readmore').hide();// if want show this div using $( ".text" ).hide();
        }

        // hide the link using $('#readmore').hide();
  });
function changeheight() {
    var readmore = $('#readmore');
    if (readmore.text() == 'Read more') {
        readmore.text("Read less");
    } else {
        readmore.text("Read more");
    }      
    if($( ".text" ).height() >39){
        $('#readmore').show();
    }
    if($( ".text" ).height() <39){
        $('#readmore').hide();
    }
    $('.height').toggleClass("heightAuto");
};

change toggle accordingly.

Upvotes: 1

prog1011

Reputation: 3495

Use Below Code Working Demo Here

$(function()
 {
     var curHeight = $('.text').height();     
     if(curHeight==38)
         $('#readmore').show();
     else
         $('#readmore').hide();
 });     
function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

You can get the Height of the div in on .ready function and compare that height with max Height. if Height is equal to max Height then we need to .show() 'read more' link or if height is not equal to max height then we can .hide() 'read more' link.

JsFiddle here

Upvotes: 3

Hide an element if container height is less than a fixed amount

Answers (3)

Related Questions