The Kendo UI Flip Effect is pretty cool and offers some handy functionality for Web pages that are short on space. You can set a section of your page to have a flip effect where the user can toggle between viewing two different sections of data. This is a nice option to standard popups or tabs for showing optional or non-critical data on your pages.
You can set the flip effect to either a horizontal or or a vertical flip using the Kendo flipHorizontal( or flipVertical( methods. The naming of these methods indicates the direction of the flip, so flipHorizontal( means that the control will ‘rotate’ on a centered vertical axis to simulate the content being flipped from the right to the left almost like a top spinning. Conversely, the flipVertical( method results in a flip of your page content on a horizontal axis to sort of be like leafing the bottom edge of the page upwards.
The Basic Setup
The page setup needed to get the Kendo UI flip effect running is remarkably minimal. You’ll need some styling, two divs containing the content to flip, and some simple Kendo UI markup. The markup can be as simple as:
var effect = kendo.fx(".clsContainer").flipHorizontal($(".clsLibrary"), $(".clsStore")).duration(1000), reverse = false;
$(".toggle").click(function () {
effect.stop();
reverse ? effect.reverse() : effect.play();
reverse = !reverse;
});
Quirks that I’ve found with the Kendo UI Flip Control
For starters, know that this effect doesn’t properly flip for all browser versions. For example, in Internet Explorer, the actual effect of flipping only renders correctly in IE10 and up. The Kendo UI code still partially runs in IE8 and IE9, but entirely without the flip effect transition.
It’s strange, but it seems HTML5 Button tags clash with ASP.NET 4.0 WebForm technology, in effect disabling Kendo UI control functionality by incorrectly triggering a postback when the buttons are clicked. I assume that in future versions of .NET Microsoft will correct this bug, but for now it’s important to remember not to use the Button tag with a WebForms page. Instead use the traditional input type=”button” tags and everything works great.
Another quirk I’ve found is that if you have an embedded iframe in the second pane of your flip control, then the iframe will be rendered when the page loads. This is definitely not desirable behaviour since the frame should stay hidden until the user generates the event to see the second pane of the flip control. To fix this you can set display:none; in the css class for your second flipper pane. This will ensure that the second pane doesn’t render until the user actually clicks to see the second page.
The Example Page
In the example page below I’m adding the Kendo UI Flip effect to a basic HTML form. If you want to apply this instead to an ASP.NET WebForm, then just add an ASP.NET tag at the top of the page and the <script runat=”server” tag.
Also note that I’ve added links to the online Kendo UI libraries to this example, so it is ready to run without downloading the libraries from Telerik. If you are actually working with the code on a project, then I suggest downloading the Kendo UI libraries to your server, and updating the path references to point to your local libraries.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
<style>
#container {
position: relative;
width: 200px;
height: 200px;
}
#store {
position: absolute;
width: 200px;
height: 200px;
background: #C4E7FF;
display:none;
}
#library {
position: absolute;
width: 200px;
height: 200px;
background: #E0E0E0;
}
</style>
</head>
<body>
<form id="form1">
<!-- In an asp.net web form use input type=button rather than <button html controls -->
<!-- Then <button controls clash with ASP.NET causing confusion for the rendering engine (at least it does so in ASP.NET 4.0) -->
<!-- If you have an embedded iframe in the second pane of your flip control, then the iframe will peer through at first when the page loads. To fix this set display:none; in the css class for your second flipper pane. -->
<div id="container" class="clsContainer">
<div id="store" class="clsStore">
<input type="button" class="toggle" value="Page 2"></input>Some other text for the second page of the kendo flip control</div>
<div id="library" class="clsLibrary">
<input type="button" class="toggle" value="Page 1"></input>here is some example text for page 1</div>
</div>
<script>
var effect = kendo.fx(".clsContainer").flipHorizontal($(".clsLibrary"), $(".clsStore")).duration(1000), reverse = false;
$(".toggle").click(function () {
effect.stop();
reverse ? effect.reverse() : effect.play();
reverse = !reverse;
});
</script>
</form>
</body>
</html>
Justin Cooney 