triggering height/width transition based on div content

**gib65** · 01-22-2016, 08:50 PM

Hello,

This thread is an off shoot of this one here:

http://www.dynamicdrive.com/forums/s...ter-hiding-div

In that thread, I was experimenting with CSS height/width transitions. I had a couple of divs and some buttons underneath each. Depending on which button you click, the div would transition in height or width. The way I did that was that I swapped out classes that set the height/width to a fixed value.

This time, however, I'm trying to get a transition by changing the content of the divs.

If you go to my link below, you'll see what I mean:

http://www.mm-theory.com/shahspace/t...ransition.html

The left div starts out with three lines of text. If you click on "big" it replaces that with six lines of text. If you click on "small" it replaces that with three. If you click on "hide" it replaces that with an empty string (which doesn't actually hide it, but I'm not worried about that at the moment). I do something similar for the right div: I add empty string, 3 words, or 6 words.

The display type of the divs is inline-block and this seems to work insofar as adjusting the size to fit the content (width-wise or height-wise), but I don't get a transition.

So I'm wondering if there's a way to get width/height transitions by way of changing the div contents. Or do width/height transitions just not work this way?

In case you have trouble visiting the site, here's the code:

Code:

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8" />
      <title>Transition</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	
		<link  href="CSS\jquery-ui.css" rel="stylesheet" />
		<link  href="CSS\jquery-ui.structure.css" rel="stylesheet" />
		<link  href="CSS\jquery-ui.theme.css" rel="stylesheet" />
		
		        <script src="Script\jquery-1.11.1.min.js"></script>
 
		<script src="Script\jquery-ui.min.js"></script>

<style>
	
.transitionWidthClass{
-webkit-transition: width 1s ease-in;
    -moz-transition: width 1s ease-in;
    -o-transition: width 1s ease-in;
    transition: width 1s ease-in;

}	

.transitionHeightClass{
-webkit-transition: height 1s ease-in;
    -moz-transition: height 1s ease-in;
    -o-transition: height 1s ease-in;
    transition: height 1s ease-in;

}	

</style>

</head>

<body style="text-align: center;">

<table style="width: 100%; height: 100vh;" border="1">
<tr>
<td style="width: 50%;">
<div id="LeftDiv" class="transitionWidthClass" style="display: inline-block; background-color: green; border: 3px blue solid; border-radius: 4px;">
line 1<br/>
line 2<br/>
line 3
</div>
	
	
	<br/>
	<br/>
	<br/>
	
	
<input type="button" value="Hide" onclick="LeftHideButton_Click();"/>
<br/>
<input type="button" value="Small" onclick="LeftSmallButton_Click();"/>
<br/>
<input type="button" value="Big" onclick="LeftBigButton_Click();"/>
</td>
<td style="width: 50%;">
<div id="RightDiv" class="transitionHeightClass" style="display: inline-block; background-color: red; border: 3px blue solid; border-radius: 4px;">
one two three
</div>
	
	
	<br/>
	<br/>
	<br/>
	
	
<input type="button" value="Hide" onclick="RightHideButton_Click();"/>
<br/>
<input type="button" value="Small" onclick="RightSmallButton_Click();"/>
<br/>
<input type="button" value="Big" onclick="RightBigButton_Click();"/>
</td>
</tr>
</table>

	<script>
	var threeLines = "line 1<br/>line 2<br/>line 3";
var sixLines = "line 1<br/>line 2<br/>line 3<br/>line 4<br/>line 5<br/>line 6";
var threeWords = "one two three";
var sixWords = "one two three four five six";

$(document).ready(function() {

$(window).on("webkitTransitionEnd", function(event) 
{
	if ($("#LeftDiv").html() === "")
	{
		$("#LeftDiv").hide();
	}
	
	if ($("#RightDiv").html() === "")
	{
		$("#RightDiv").hide();
	}
});

});

var LeftHideButton_Click = function()
{
	$("#LeftDiv").html("");
};

var LeftSmallButton_Click = function()
{
	$("#LeftDiv").show(0);
	$("#LeftDiv").html(threeLines);
};

var LeftBigButton_Click = function()
{	
	$("#LeftDiv").show(0);
	$("#LeftDiv").html(sixLines);
};

var RightHideButton_Click = function()
{
	$("#RightDiv").html("");
};

var RightSmallButton_Click = function()
{
	$("#RightDiv").show(0);
	$("#RightDiv").html(threeWords);
};

var RightBigButton_Click = function()
{	
	$("#RightDiv").show(0);
	$("#RightDiv").html(sixWords);
};
</script>
</body>
</html>

It includes references to jquery, which I can't paste or attach, so if you want to run this, you'll have to supply your own jquery.

**Beverleyh** · 01-22-2016, 09:49 PM

So I'm wondering if there's a way to get width/height transitions by way of changing the div contents. Or do width/height transitions just not work this way?

Basing height on content is the same as height:auto; and I believe we already covered that here http://www.dynamicdrive.com/forums/s...853#post315853

**gib65** · 01-23-2016, 07:34 PM

Originally Posted by Beverleyh

Basing height on content is the same as height:auto;...

Yes, I suppose it would be.

Ok, I'm trying something different this time.

I'm adding an "inner" div to each of the original divs. The inner div gets the text content and resizes itself based on the content. It has no background color or border so it's invisible as far as the viewer is concerned (not to be confused with its visibility being set to "invisible" or its display being set to "none"). The outer (original) divs now have fixed heights and widths. The outer divs still have the transition class and the inner divs don't have any classes.

So now when you click on one of the buttons, something like this happens:

var LeftBigButton_Click = function()
{
$("#LeftDiv").show(0); // <-- show the outer div (in case it was invisible before)
$("#LeftInnerDiv").html(sixLines); // <-- add text to the inner div. Should be added immediately. No transition. Overflow on outer div is hidden.
$("#LeftDiv").css("height", $("#LeftInnerDiv").height() + "px"); // <-- change the height of the outer div to match that of the inner div. Expecting transition.
};

So after the text is added to the inner div, which should change its height/width immediately (no transition), I set the height/width of the outer div to match that of the inner div. <-- I'm expecting a transition to occur at this point. But nothing.

Should changing the height trigger a transition if it's done via object.css("height", value)? Similar question for width.

Here's a link: http://www.mm-theory.com/shahspace/t...ransition.html

Here's the code:

Code:

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8" />
      <title>Transition</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	
		<link  href="CSS\jquery-ui.css" rel="stylesheet" />
		<link  href="CSS\jquery-ui.structure.css" rel="stylesheet" />
		<link  href="CSS\jquery-ui.theme.css" rel="stylesheet" />
		
		        <script src="Script\jquery-1.11.1.min.js"></script>
 
		<script src="Script\jquery-ui.min.js"></script>

<style>
	
.transitionWidthClass{
-webkit-transition: width 1s ease-in;
    -moz-transition: width 1s ease-in;
    -o-transition: width 1s ease-in;
    transition: width 1s ease-in;

}	

.transitionHeightClass{
-webkit-transition: height 1s ease-in;
    -moz-transition: height 1s ease-in;
    -o-transition: height 1s ease-in;
    transition: height 1s ease-in;

}	

</style>

</head>

<body style="text-align: center;">

<table style="width: 100%; height: 100vh;" border="1">
<tr>
<td style="width: 50%;">
<div id="LeftDiv" class="transitionWidthClass" style="display: inline-block; background-color: green; border: 3px blue solid; border-radius: 4px; height: 54px; overflow: hidden;">
<div id="LeftInnerDiv" style="display: inline-block;">
line 1<br/>
line 2<br/>
line 3
</div>
</div>
	
	
	<br/>
	<br/>
	<br/>
	
	
<input type="button" value="Hide" onclick="LeftHideButton_Click();"/>
<br/>
<input type="button" value="Small" onclick="LeftSmallButton_Click();"/>
<br/>
<input type="button" value="Big" onclick="LeftBigButton_Click();"/>
</td>
<td style="width: 50%;">
<div id="RightDiv" class="transitionHeightClass" style="display: inline-block; background-color: red; border: 3px blue solid; border-radius: 4px; width: 88px; height: 18px; white-space: nowrap; overflow: hidden;">
<div id="RightInnerDiv" style="display: inline-block;">
one two three
</div>
</div>
	
	
	<br/>
	<br/>
	<br/>
	
	
<input type="button" value="Hide" onclick="RightHideButton_Click();"/>
<br/>
<input type="button" value="Small" onclick="RightSmallButton_Click();"/>
<br/>
<input type="button" value="Big" onclick="RightBigButton_Click();"/>
</td>
</tr>
</table>

	<script>
	var threeLines = "line 1<br/>line 2<br/>line 3";
var sixLines = "line 1<br/>line 2<br/>line 3<br/>line 4<br/>line 5<br/>line 6";
var threeWords = "one two three";
var sixWords = "one two three four five six";

$(document).ready(function() {

$(window).on("webkitTransitionEnd", function(event) 
{
	if ($("#LeftDiv").html() === "")
	{
		$("#LeftDiv").hide();
	}
	
	if ($("#RightDiv").html() === "")
	{
		$("#RightDiv").hide();
	}
});

});

var LeftHideButton_Click = function()
{
	$("#LeftInnerDiv").html("");
	$("#LeftDiv").css("height", $("#LeftInnerDiv").height() + "px");
};

var LeftSmallButton_Click = function()
{
	$("#LeftDiv").show(0);
	$("#LeftInnerDiv").html(threeLines);
	$("#LeftDiv").css("height", $("#LeftInnerDiv").height() + "px");
};

var LeftBigButton_Click = function()
{	
	$("#LeftDiv").show(0);
	$("#LeftInnerDiv").html(sixLines);
	$("#LeftDiv").css("height", $("#LeftInnerDiv").height() + "px");
};

var RightHideButton_Click = function()
{
	$("#RightInnerDiv").html("");
	$("#RightDiv").css("width", $("#RightInnerDiv").width() + "px");
};

var RightSmallButton_Click = function()
{
	$("#RightDiv").show(0);
	$("#RightInnerDiv").html(threeWords);
	$("#RightDiv").css("width", $("#RightInnerDiv").width() + "px");
};

var RightBigButton_Click = function()
{	
	$("#RightDiv").show(0);
	$("#RightInnerDiv").html(sixWords);
	$("#RightDiv").css("width", $("#RightInnerDiv").width() + "px");
};
</script>
</body>
</html>

**gib65** · 01-23-2016, 07:46 PM

Actually, hold that thought. I can see what I'm doing wrong. I have the transition classes mixed up. The transitionHeightClass is supposed to be on the left and the transitionWidthClass is supposed to be on the right.

That was a real bone head mistake!