[RESOLVED]Using Flip effect in DataList (C#) asp.net ?

Hi,

I have created a Data List in Asp.net C# and i have used a Timer and Ajax control to update the data automatically after 10 seconds.

When a data is updated for a particular value in Datalist i need to used the Flip effect for updating data.

Any ideas ?

Hi Raghu,

Are you looking for something like this in your td element:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Data List</title>
    <style type="text/css">
        .flipY {
        
        transform:rotateY(180deg);
        background-color:blue;
        }
        .flipBack {
        transform:rotateY(180deg);
        background-color:red;
        }
        #change {
        height:100px;
        width:200px;
        background-color:red;
        }
    </style>
    <script type="text/javascript">
        function initialize()
        {
            
            var t = self.setInterval(function () {
                document.getElementById('change').style.transform = "rotateY(180deg)";
                document.getElementById('change').style.backgroundColor = "blue";
            }, 5000);
            var h = self.setInterval(function () {
                document.getElementById('change').style.transform = "rotateY(360deg)";
                document.getElementById('change').style.backgroundColor = "red";
            }, 10000);
        }

    </script>
</head>
<body onload="initialize()">
    <form id="form1" runat="server">
    <div id="change">
    what in the world!
    </div>
    </form>
</body>
</html>

using transform proeprry in css3, a div element can be flipped horizontally or vertically .

Working Demo

Hope this helps.

Leave a Reply