RAD Animations? Help!

5 posts, 0 answers
  1. Matthew
    Matthew avatar
    7 posts
    Member since:
    Sep 2008

    Posted 22 Sep 2008 Link to this post

    I trying to create an animation that re-sizes two DIV on a page. When you click on the first DIV it gets re-sized to larger size. When you click on second it shrinks the First Div to its original size and makes the the Second DIV Larger, and so on.

    I first looked into using the tool tip but i did not make much progress. Would anybody have a suggestion in how I should proceed?

    I appreciate any input!
    -matt
  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 22 Sep 2008 Link to this post

    Hello Matthew,

    If I understand correctly, you simply want to resize a div (I assume to a fixed size) whenever a user clicks anywhere inside that div. If so, you can do this with a couple of <div> elements and some simple JavaScript. Here is an example:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTestSiteCS._Default" %> 
    2  
    3 <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml" > 
    8 <head runat="server"
    9     <title>Example</title> 
    10     <style type="text/css"
    11         #Div1 { 
    12             width: 250px; 
    13             height: 250px; 
    14             background-color: Blue; 
    15         } 
    16          
    17         #Div2 { 
    18             width: 250px; 
    19             height: 250px; 
    20             background-color: Red; 
    21         } 
    22     </style> 
    23 </head> 
    24 <body> 
    25     <form id="form1" runat="server">     
    26         <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
    27         <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    28             <script type="text/javascript"
    29                 var div1; 
    30                 var div2; 
    31              
    32                 function pageLoad(sender, args) { 
    33                     div1 = $get('Div1'); 
    34                     div2 = $get('Div2'); 
    35                 } 
    36              
    37                 function Div1_Click() { 
    38                     div1.style.width = "500px"
    39                     div1.style.height = "500px"
    40                     div2.style.width = "250px"
    41                     div2.style.height = "250px"
    42                 } 
    43  
    44                 function Div2_Click() { 
    45                     div1.style.width = "250px"
    46                     div1.style.height = "250px"
    47                     div2.style.width = "500px"
    48                     div2.style.height = "500px"
    49                 } 
    50             </script> 
    51         </telerik:RadCodeBlock>    
    52          
    53         <div id="Div1" onclick="Div1_Click()">       
    54         </div> 
    55         <div id="Div2" onclick="Div2_Click();">      
    56         </div> 
    57     </form> 
    58 </body> 
    59 </html> 
    60  


    If this doesn't solve your problem, let me know and I will try to help you further.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matthew
    Matthew avatar
    7 posts
    Member since:
    Sep 2008

    Posted 22 Sep 2008 Link to this post

    Hi Kevin,

    The actual resizing is not my problem (I appreciate the code sample).

    My dilemma is the animation of  the in-between the two states. Meaning when you click on DIV1, you can see it 'grow' larger, and then 'shrink' when clicking the other DIV (DIV2)

    Thanks again for the fast response,
    sorry i wasn't that clear initially,

    Regards,
    -matthew
  5. Matthew
    Matthew avatar
    7 posts
    Member since:
    Sep 2008

    Posted 26 Sep 2008 Link to this post

    Can anybody else please help me with the animation question?
    I still have not received an answer yet.

    Regards,
    -matthew walter
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017