CODEWITHSUNDEEP
htmlcss
abagshaw
abagshaw

Reputation: 6582

How to set div to expand with transition on text change

I want to seamlessly expand my div (in a non-jarring way) when the text inside it changes:

The CSS transition: all 2s ease; is working great for colour changes, manually setting width, etc (as you can try out in the jsfiddle - click button to toggle width). but when the inner text of the div is changed the div just jumps to the new width without any transition.

How can I get the transition working when the inner text changes?

Thanks!

Upvotes: 14

Views: 6575

Answers (3)

Guy Waldman
Guy Waldman

Reputation: 467

I don't think dynamically changing a width of an element depending on its content is possible, as there is no transition for content. The content of an element changes instantly and the width does not get a numerical value in your case - but adjusts.

A solution that can be sometimes applicable: Using a function to roughly calculate your text's width so that you'll be able to set a numerical width for your element on change.

Here's a simple one that I made.

function getTextWidth(text, css) {
    var e = $('<span></span>'); // dummy element
    e.css(css); // set properties
    e.text(text); // set test
    var width = e.appendTo($('body')).width(); // append and get width
    e.remove(); // remove from DOM
    return width;
}

Put together an example of usage.

Upvotes: 3

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

Hi abagshaw try this script to solved your problem.

var big = false;

$('#content').on('click', function(e) {
     if(!big)
     {
       
           $( this).animate({
    width: "600px"  }, 500 );
         this.innerHTML = "MORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXT";
         
         big = true;
     }
     else
     {
        $( this).animate({
    width: "200px"  }, 500 );
         this.innerHTML = "LESSTEXTLESSTEXT";
         big = false;
     }
 });
.ui.transitioning.button{
   transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;
    width:200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui transitioning teal button" id="content">LESSTEXTLESSTEXT</div>

Upvotes: 0

Mark Eriksson
Mark Eriksson

Reputation: 1475

Because the default width of the div will be auto (100%), it can't transition from auto to a numerical value.

Upvotes: 3

Related Questions