Feedback Form

Friday, January 04, 2008

AnimationExtender dynamic TargetControlID

How to make one AnimationExtender which apply on more than one control based on your selection in run time?

There are many solutions available online, some are very complicated and some are not useful.

For example if you want to make something like the messages which appear when you click on password, postal code,... text controls in this yahoo registration page:

https://edit.yahoo.com/registration?.intl=us&new=1&.done=http://mail.yahoo.com&.src=ym&.v=0&.u=47furq93nrtek&partner=&.partner=&pkg=&stepid=&.p=&promo=&.last=

Sure this is not the only way to do the same as in this page, but this is how to do the same using AnimationExtender Ajax ToolKit control.

And Now how to make it:

We want to show an animated different message when we click on different TextBoxs.

1- Don't forget to add the Script Manger before using the AnimationExtender Control

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
2- Then Create the AnimationExtender control and assign any default TargetControlID property because it will not work if its empty.
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="TextBox2">

3- Then create the controls you will work on as you can see in the complete page code below.

4- Now the problem that the TargetControlID property can't be dynamic, so what we can do to apply the same Extender to more than one control:

We can make a small work around by adding a hidden field and using javascript we can set this hidden field to the control we need.

Then assign this hidden control value to the AnimationTargetScript:


<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="TextBox2">
<Animations>

<OnClick>
<Sequence>
<FadeIn AnimationTargetScript="javascript:getTargetControl();" Duration="0.5" Fps="300"/>
</Sequence>
</OnClick>
</Animations>

</cc1:AnimationExtender>
<input type="hidden" id="hid" value="msg1" />


function getTargetControl()
{
  return document.getElementById("hid").value;
}

Then we want to make the function which will start the animation when clicking on a textbox control:
function animate(ele)
{
    $get("Msg1").style.opacity=0;
    $get("Msg2").style.opacity=0;
    $get("hid").value=ele;
    if ($find("AnimationExtender1")!=null)
        {
            var onclkBehavior = $find("AnimationExtender1").get_OnClickBehavior().get_animation();
            onclkBehavior.play();
        }
}
This is the complete page sample:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
  function animate(ele)
  {
$get("Msg1").style.opacity=0;
     $get("Msg2").style.opacity=0;
     $get("hid").value=ele;
     if ($find("AnimationExtender1")!=null)
     {
         var onclkBehavior = $find("AnimationExtender1").get_OnClickBehavior().get_animation();
         onclkBehavior.play();
     }
  }
          
  function getTargetControl()
   {
       return document.getElementById("hid").value;
   }
  18:     
</script>

</head>


<body>
<form id="form1" runat="server">

 <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="TextBox2">
            <Animations>
                        <OnClick>
                             <Sequence>
                                 <FadeIn AnimationTargetScript="javascript:getTargetControl();" Duration="0.3" Fps="300"/>
                             </Sequence>
                         </OnClick>
             </Animations>
         </cc1:AnimationExtender>


          <input type="hidden" id="hid" value="msg1" />
         <table style="width: 100%;">
             <tr>
                 <td>
                    <asp:TextBox ID="TextBox1" runat="server" onclick="javascript:animate('Msg1');"></asp:TextBox>
                 </td>
                 <td>
                     <div id="Msg1" style="opacity: 0; left: 781px; top: 662px; color: #FF0000;">
                         THIS IS Message 1
                     </div>
                 </td>
                 <td>
                     &nbsp;
                 </td>
             </tr>
             <tr>
                 <td>
                     <asp:TextBox ID="TextBox2" runat="server" onclick="javascript:animate('Msg2');"></asp:TextBox>
                 </td>
                 <td>
                     <div id="Msg2" style="opacity: 0; left: 781px; top: 662px; color: #00FF00;">
                         THIS IS Message 2
                     </div>
                 </td>
                 <td>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>
 </html>
Now everything is done, you can try and manipulate as you want, you will find it simple.

Wednesday, October 03, 2007

Google Secrets

So Cool Google secrets:

Saturday, September 29, 2007

Firefox more than one homepage

I want to make Firefox open for me more than one home page as IE7 do.
How can i do so?
You can have several homepages if you specify them in
Tools > Options > Main - Homepage
separated by "|", e.g. :

http://www.google.com | http://www.experts-exchange.com

OR

Open all pages that you want as home page in separate tabs, then go to Tools->Options->Main and click "Use current pages", Firefox will add all pages from tabs in "Home page" textbox separated with | .

C# Unsafe code not exist in VB.Net

One of the biggest differences between VB.Net and C# is using the Unsafe code.
In C# we can write unsafe code such as dealing with images in unsafe style:
unsafe
{
}

We can deal with pointers inside this unsafe block which we can't do in VB.Net till now.

What can we do to write an application that must have some unsafe code?
My opinion is don't waste your time and use an external C# dll file contains all the unsafe code and call it from your VB.Net application.
You can use any VB.Net to C# converters, it will convert it for you but when compile you will receive compilation errors in your VB.Net application.


"
Don't get hung up on 'pure one language application' - that will almost always work out for the worse"



Tuesday, September 25, 2007

Move controls using Arrow keys

I faced a problem today while trying to move a custom control I did on a windows form using keyboard arrow keys, the problem that the KeyDown event don't feel arrow keys, I read about some and found some articles about.
Some articles were not good at all but it may be a very fast solution and may help others but it didn't help me :)
I read for example that you can use the KeyUp event instead; it will work but suppose you need to move an object using KeyUp, ooh, very annoying and not user friendly.
But the best fastest solution I found was the following:

Protected Overrides Function ProcessCmdKey(ByRef msg As Message, ByVal keyData As Keys) As Boolean
'Returns true if the character was processed by the control;
'otherwise, false.

Dim bHandled As Boolean = False
Select Case keyData
Case Keys.Right
Me.currentControl.Left += 10
bHandled = True
Case Keys.Left
Me.currentControl.Left -= 10
bHandled = True
Case Keys.Up
Me.currentControl.Top -= 10
bHandled = True
Case Keys.Down
Me.currentControl.Top += 10
bHandled = True
End Select
Return bHandled
End Function


Refrence

kick it on DotNetKicks.com