triggering height/width transition based on div content
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.
