This is a migrated thread and some comments may be shown as answers.

RAD Animations? Help!

4 Answers 85 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 22 Sep 2008, 01:52 PM
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

4 Answers, 1 is accepted

Sort by
0
Kevin Babcock
Top achievements
Rank 1
answered on 22 Sep 2008, 02:21 PM
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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTestSiteCS._Default" %> 
 
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"
    <title>Example</title> 
    <style type="text/css"
        #Div1 { 
            width: 250px; 
            height: 250px; 
            background-color: Blue; 
        } 
         
        #Div2 { 
            width: 250px; 
            height: 250px; 
            background-color: Red; 
        } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">     
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
            <script type="text/javascript"
                var div1; 
                var div2; 
             
                function pageLoad(sender, args) { 
                    div1 = $get('Div1'); 
                    div2 = $get('Div2'); 
                } 
             
                function Div1_Click() { 
                    div1.style.width = "500px"
                    div1.style.height = "500px"
                    div2.style.width = "250px"
                    div2.style.height = "250px"
                } 
 
                function Div2_Click() { 
                    div1.style.width = "250px"
                    div1.style.height = "250px"
                    div2.style.width = "500px"
                    div2.style.height = "500px"
                } 
            </script> 
        </telerik:RadCodeBlock>    
         
        <div id="Div1" onclick="Div1_Click()">       
        </div> 
        <div id="Div2" onclick="Div2_Click();">      
        </div> 
    </form> 
</body> 
</html> 
 


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

Regards,
Kevin Babcock
0
Matthew
Top achievements
Rank 1
answered on 22 Sep 2008, 02:46 PM
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
0
Matthew
Top achievements
Rank 1
answered on 26 Sep 2008, 07:17 PM
Can anybody else please help me with the animation question?
I still have not received an answer yet.

Regards,
-matthew walter
Tags
Ajax
Asked by
Matthew
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Chase Florell
Top achievements
Rank 1
Share this question
or