Monday, March 30, 2009

Fading Effects in Jquery

Fading effects in jquery is very easy as jquery provide the required functions which are necessary for the user requirements for fading effects. Here is the list of the function which are given in the documentation of the jquery.
Function Name
Function Name
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity[, callback])
All the function in the above list return same object on which the function apply the fading which can be used for chaining purpose. The fading function work on the opacity property of the element mean these functions will increase or decrease the opacity property to achieve the goal of fading effect. The example used for this post is similar to the example in my previous post Sliding animation in jquery. Now let us start with our example code. To recall your memories the controls used in this example are three buttons named cmdFadeIn, cmdFadeOut and cmdFadeTo so that you understand the purpose of the buttons by theirs names, and one div element named myDiv which is used for the fading purpose and i have fill the div element with the black color so that the area of the div is visible to you and you will see the fading effect on the div element.
First of all i will write the code for the fadeIn function and then will explain the code, how the code work what are the required parameters and what are the optional.
$("#cmdFadeIn").click(function()
{
$("#myDiv").fadeIn('slow',CallBackFunction);
});

function CallBackFunction()
{
alert("Call back Function Called.");
}
The above code is complete code you can use to pass the maximum number of parameters to the fadeIn function. Which are the speed and the callback function to the fadeIn Function. First i have bind the click event to the my button control by using the id of the button control which is "cmdFadeIn" and then in the definition of the click event function for the button. I have used the div control id to bind the fadeIn function by passing the parameter slow and attaching the call back function to the fadeIn function call. Which in this case is the CallBackFunction function .if you want to omit the speed parameter then you can omit the speed parameter and the default value of the speed is used which is the normal speed. As in my previous post i have said that the fading function only change one property which is the opacity of the element. In case of fadeIn the opacity of the element is increase and the element is shown. if the element is shown, mean its opacity is to the maximum then it will not animate the element as it is visible. But if you attach the callback function to the fadeIn function then that function is called every time the fadeIn function is called whether fading effect are applied or not.
Here is the code you can use to call the fadeOut function of the fading animation effects. The code is similar to the code for the fadeIn only change is the function call which is replace by fadeOut.
$("#cmdFadeOut").click(function()
{
$("#myDiv").fadeOut('slow',CallBackFunction);
});

function CallBackFunction()
{
alert("Call back Function Called.");
}
The fadeOut function is opposite to the fadeIn function. What fadeOut function do is that it will decrease the opacity property of the element to hide them. If you provide the speed value or animation time to complete the showing of the element then it will show the element in that interval of time. if no speed value is given then the normal parameter is taken as default parameter which has the value of .4 milliseconds to complete the animations.
$("#cmdFadeTo").click(function()
{
$("#myDiv").fadeTo('slow',0.5,CallBackFunction);
});

function CallBackFunction()
{
alert("Call back Function Called.");
}
In above code the fadeTo function is called with maximum number of parameters. For calling the fadeTo function you must provide the speed and opacity parameter, the opacity parameter denote the resultant opacity of the control, which can be from 0(zero) to 1. Once the animation of the fading is completed the callback function is called, if provided in the parameter list. The fadeTo function is will decrease the opacity of the element, if the element is fadeOut mean hide then it will change the opacity value of the element to the value which is passed as parameter to the function, but you can't see fading effects as the element is fadeOut before. Now if you apply the fadeIn effect then you can see opacity of the element is as set by the fadeTo function.
Unlike the other effects that adjust opacity while hiding or revealing elements, fadeTo() doesn’t remember the original opacity of an element. This makes sense because the whole purpose of this effect is to explicitly change the opacity to a specific value.
Hope you will get some idea about the fading effect in jquery. You can download the source code from here


All and any comments / bugs / suggestions are welcomed!

Saturday, March 21, 2009

Vista Theme in WPF

In this short post i will give you idea of how you can apply window vista theme in your WPF applications. I will try to explain you which are the point where theme is not applied on your applications. But i thing most of the control in you application will have window vista theme using this technique. Here is the sample image of the application which i have created for this post and you will download this sample code, and link is given below. You can see that vista theme is applied on most of the controls and the application look like vista application.

To achieve the above result in your application what you have to do is add the following line of code in your Application.Resources section of your app.xaml file and the theme will be applied to the whole application

<ResourceDictionary Source="/PresentationFramework.Aero,
Version=3.0.0.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml"
/>

Using the above technique you can following theme which you can use in your application.
  • PresentationFramework.Aero
  • PresentationFramework.Classic
  • PresentationFramework.Luna
  • PresentationFramework.Royale
I have used the first one for my application you can use any of other in you application.The limitation of this technique is that it don't change the look of container form. You can see it still looks like a window classic form. And also the MessageBox and the if you download and look at the combo Box item mouse over of the item it still looks window classic theme.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Monday, March 16, 2009

Jquery Table sorter Plug-in and asp.net gridview control

During the learning of Jquery and searching of plug-ins, i have come across many plug-ins and i like many of them and find that some of the plug-in are more interested then the other ones and i will to share some of the with you people, but for this post i have choose the Table sorter plug-in. In this post i will try to explain you how you can configure grid view control in order to work with the table sorter plug-in.
You can find detail and example of how you can use the table sorter in HTML tag from here, the official site for the table sorter plug-in. I would like to mention main points of the table sorter plug-in here and then tell you what are the problems using table sorter with gridview control, and how you can overcome these problems, so that table sorter will work with the grid view control as well.The important and key point about the table sorter plug-in is that it will works on standard HTML tables. You must include THEAD and TBODY tags. So in order to work with the table sorter plug-in you have to have the THEAD tag in your table.
Let us start with our example of how you can use the table sorter plug-in with the gridview control of the asp.net 2.0. For this example, i have added one gridview control which is bind to the data source and then i will tell you which are the properties you have to do , so that the table sorter will work with the grid view control. First of all and most important thing is that you have to get the JavaScript files for the jquery and also the table sorter plug-in. The jquery and table sorter plug-in files are included in this code sample, You can also download the jquery latest file from the jquery official site. And table sorter plug-in file from the table sorter site. First you have to include the jquery latest file using the script tag and after that you have to include the table sorter JavaScript file.
Here is the code which will bind the table sorter with the grid view control. I have used the simplest of the code to bind the table sorter with the grid view control, For detail and more functionality you can visit the table sorter web site.
$(document).ready(function()
{
$("#grdvResultGrid").tablesorter() ;
$("#grdvResultGrid>tbody>tr:odd").addClass("TableRow");
});
In the code above what i did is to bind the table sorter with the grid view control which in this case i have used the id of the grid view control "grdvResultGrid", i have used the grid view control id here, but if you are using master page then you can't use it like this, as in case of master page the master page also append it id with the control. You have to append that id with the grid view id to get the gridview control.
Here is the code sample which is used to bind the grid view to the data source and then then set the appropriate properties to generate the THEAD tag for the grid view control so that will work with the table sorter plug-in.
DataSet dsCustomer = new DataSet();
dsCustomer.ReadXml(Server.MapPath(@"Database\Customer.xml"));
grdvResultGrid.DataSource = dsCustomer.Tables[0];
grdvResultGrid.DataBind();

if(grdvResultGrid.HeaderRow != null)
grdvResultGrid.HeaderRow.TableSection=TableRowSection.TableHeader;

For the above code, first i have declare and initialize the data set object which is named "dsCustomer" as i will store the customer data in this data set. And in next statement i have read the customer.xml which is store in the dataBase folder of the project, i have write the customer table in the xml file and then place that xml file in the database folder of the project. In the next statements i have assign the DataSource of the grid view control the 0(zero) index table of the dataset and then call the dataBind() of the gridview control. After the DataBind() of the grid view control next is the important statement which is used to sort the grid view control data. The HeaderRow property of the grid view control is used to generate the header in an accessible format and generate the THEAD tags. And this is your main statement if you remove this statement then the table sorter plug-in will not work.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!


Sunday, March 15, 2009

Jquery Sliding Animation using WPF

In my Post Sliding Effect in Jquery i have explain how you can use the jquery to achieve sliding effect in your web applications. After posting Sliding Effect in Jquery , i decided to achieve same kind of functionality of sliding effect in WPF and now in this post i will try to achieve same objective of sliding effects in WPF. Hope you will gain some knowledge from this post as well.
Let us start with our example code. For this example i have similar controls which are used in Sliding Effect in Jquery post, which are the Slide Down, Slide Up and the Toggle button which are used for sliding down, and sliding up and for both slide up and slide down functionality the toggle button is used. But for the control which is used for the sliding is the border control and i have set the background color of the border to black, so that you can see the sliding effect if any of the button is click. I will not paste the xaml for this example as i have attached the sample code and you can download it, the link to download the sample code is given at the end of the post. Here is the code which is used to sliding down effect.
if (brdBorder.Height == 0)
{
DoubleAnimation dblaSlideDown = new DoubleAnimation();
dblaSlideDown.To = 130;
dblaSlideDown.From = 0;
dblaSlideDown.Duration = new Duration(TimeSpan.FromSeconds(.5));
Storyboard.SetTargetName(dblaSlideDown,brdBorder.Name);
Storyboard.SetTargetProperty(dblaSlideDown, new PropertyPath(Border.HeightProperty));

Storyboard strbSlideDown = new Storyboard();
strbSlideDown.Children.Add(dblaSlideDown);
strbSlideDown.Begin(this);
}
The above code is executed when the Slide Down button is clicked. The first statement in above code is the declaration and initialization of the DoubleAnimation object. Which is used to animate the value of a double property between two target values using linear interpolation over a specified duration. Next i have set the properties of the Double Animation object and here are the list of the important properties of the double animation object which you can use for animations. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.(Source)
  • From
    The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.
  • From and To
    The animation progresses from the value specified by the From property to the value specified by the To property.
  • From and By
    The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.
  • To
    The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the To property.
  • By
    The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.
From the above list it is clear that you can use two type of combination when using To, From and By properties, either you can use the From an To combination or you can use the From and By combination. If you specify all these three properties then the By property is ignored and the value of the To property is used. After setting the To property the value of 130 and the From property the value 0(zero). Next i have set the property duration, the time at which the animation will be completed or you can say the time for the animation. Next i have set the SetTargetName of the storyBoard object and pass the double animation and the control name to which the animation is applied, and then in next statement i have set the SetTargetProperty of the storyBoard and pass the value of the double animation object and pass the property of to which the animation is applied. Next i have declared and initialize the storyboard object and then assign the double animation abject to the story board object and at the end i have call the begin method of the story board to start the animation.
As you have notice that i have place if condition at the start of the function, the reason of place the if condition there, is to execute the animation only when control has the height 0(zero) other wise no need to animation which is done in jquery, if the control is already shown then the slideDown function will not animate the control.
Here is the sample code used to slide up the control and you can see the code is same as the code for the slide down, except the if condition is place to check the max height of control and if the height is max which i have set for control is 130.
if (brdBorder.Height == 130)
{
DoubleAnimation dblaSlideUp = new DoubleAnimation();
dblaSlideUp.To = 0;
dblaSlideUp.From = 130;
dblaSlideUp.Duration = new Duration(TimeSpan.FromSeconds(.5));
Storyboard.SetTargetName(dblaSlideUp,brdBorder.Name);
Storyboard.SetTargetProperty(dblaSlideUp, new PropertyPath(Border.HeightProperty));

Storyboard strbSlideUp = new Storyboard();
strbSlideUp.Children.Add(dblaSlideUp);
strbSlideUp.Begin(this);
}
And next thing which is different from the slide down animation is the the to and from property values , which are set to the 0(zero ) the To property value and the 130 the from property value , from where the animation will be started. Rest of the code is same as for the slide down.
For Toggle effect i have call the slide up and slide down function depending on the state of the of the control, which is either hide or show and the call appropriate slide down or slide up function. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Tuesday, March 10, 2009

Sliding Animation in Jquery

In my previous post i give some overview of the animation in jquery and give detail explanation of the parameters and function which are used for the animation. Now in this post i will try to explain in detail of Sliding effect in jquery and how can you used it. Here is list of function for sliding an element. One thing i will mention here is that all these functions return same object , which you can use for chaining purpose. You can use that return object to call other function as well.
Function Name
Function Name
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)
Let us start with our example, For this example i had added three buttons named cmdSlideDown, cmdSlideUp and cmdSlideToggle so that you understand the purpose of the buttons by theirs names, and one div element named myDiv which is used for the sliding purpose and i have fill the div element with the black color so that the area of the div is visible to you and you will see the animation of the div element.
First of all i will write the code for the slideDown function and then will explain the code, how the code work what are the required parameters and what are the optional.
$("#cmdSlideDown").click(function()
{
$("#myDiv").slideDown('slow',AnimationFinished);
});

function AnimationFinished()
{
alert("Animation finished");
}
The above code is complete code you can use to pass the maximum number of parameters to the slideDown function. Which are the speed and the callback function to the slideDown Function. First i have bind the click event to the my button control by using the id of the button control which is "cmdSlideDown" and then in the definition of the click event function for the button. I have used the div control id to bind the slideDown function by passing the parameter slow and attaching the call back function to the slideDown function call. Which in this case is the AnimationFinished function , you can replace it with your callback function.if you want to omit the speed parameter then you can and the default value of the speed is used which is the normal speed. As in my previous post i have said that the sliding function only change one property which is the height of the element. In case of slideDown the height of the element is increase and the element is shown. if the element is shown, mean its height is to the maximum then it will not animate the element as it is visible. But if you attach the callback function to the slideDown function then that function is called every time the slideDown function is called whether it animate the element or not.
Here is the code you can use to call the slideUp function of the sliding animation effects. The code is similar to the code for the slideDown only change is the function call which is replace by slideUp.
$("#cmdSlideDown").click(function()
{
$("#myDiv").slideUp('slow',AnimationFinished);
});

function AnimationFinished()
{
alert("Animation finished");
}
The slideUp function is opposite to the slideDown function. What slideUp function do is that it will decrease the height property of the element to hide them. If you provide the speed value or animation time to complete the hiding of the element then it will hide the element in that interval of time. if no speed value is given then the normal parameter is taken as default parameter which has the value of .4 milliseconds to complete the animations.
Here is the last function for the sliding animation category in jquery, which is slideToggle, which perform both the above functionality for you at same time. which are slideDown and slideUp
$("#cmdSlideDown").click(function()
{
$("#myDiv").slideToggle('slow',AnimationFinished);
});

function AnimationFinished()
{
alert("Animation finished");
}
The detail of the slideToggle function is that it will take same number of parameter like the slideDown and slideUp but it perform both the slideDown and slideUp functionality at same time. Mean if you call slideToggle for first time, if the element is hide, then it will increase the height property of the element to show it. or if the element is shown then it will decrease the height of the element to hide it. It will perform slideDown and slideUp functionality in sequence , if element is hide then it will show that element and if the element is shown then it will hide that element. On each slideToggle call it will show or hide the element by sliding motion depending of the state of the element.
Hope you will get some idea about the sliding effect in jquery. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

Effects In Jquery

After long time wait and away to the web development, i came back to the web development, In this post i will try to give you an over view of the effects provided by the jquery and how you can use them in your web project give animated look.
Jquery provide the following categories of the effect you can you use.
  1. Basic
  2. Sliding
  3. Fading
  4. Custom
1- Basic:
The basic animation include
Function Name
Function Name
show()
show(speed, callback)
hide()
hide(speed, callback)
toggle()
toggle(speed, callback)
The show, hide and toggle function are simple used to show/hide a control. The function on left side takes no parameter and will show or hide the control immediately with not animation or effect. And the toggle function will do both show and hide functionality for you, if the control is hidden then it will display and if the control is shown then it will hidden. The function on the right side will take parameter, one is speed and one is the callback function which is executed when the animation/effect is finished. The show/hide and toggle function will change the width , height and the opacity of the control to hide/show the control at same time. Here is the detail of the speed parameter which is passed to the show, hide or toggle function.

Speed Parameter:
The speed parameter specify how long it will take to finished the show/hide of the control, in other worlds you can say how long it will tak to show/hide the control.You can pass speed parameter in string or number format, In case of string you can pass normal, slow and fast and in case of number format you can pass number to the function. If you provide the number as speed to the function then the number is treated as millisecond duration to animated the control. Higher the value of the speed slower the animation is and lower the value of the speed as number faster the animation is. The normal string parameter will take .4 seconds to complete the animation and the slow string parameter takes .6 seconds and the fast will take .2 seconds to complete the animation. So it is up to you whether you use the string or number as speed parameter to pass the show/hide/toggle function for animations.

2- Sliding
The sliding category of the effect contain only three functions
Function Name
Function Name
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)
The above three sliding function will take same number of parameters which are the speed and the callback.The sliding function only animate the height of the matching elements, only one property of the control which is different from the show/hide function which animate the width, height and the opacity of the element at same time. You can pass speed parameter to the sliding function if you which may be either string value normal, slow or fast or any number in milliseconds, if you don't pass any speed parameter then normal is consider. And the second parameter which is the callback function you can use the callback function to execute the animation in a sequence. Mean if one animation finished then second one started and then so on and on. The SlideDown function will increase the height of the element to animate it, and the slideUp will decrease the height of the function to animate it until the element is hide.

3- Fading
The fading category consist of the following three functions
Function Name
Function Name
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)
The fading function will work on the opacity property of the element. As previous effect function like show, hide, slideUp , slideDown etc , it will take the speed parameter and describe above and the callback function if you want to do some functionality on completion of the animation. The fadeIn function will display the element by fading them to opaque and the fadeOut function will disappear the element by fadding them to transparent. And the last fadeTo function will take one extra parameter which is the opacity, you can pass the opacity in the rang of 0 to 1.

Hope you will get some idea about the Effect/animation in jquery, in the next or coming post i will try to explain you the effect/animation by giving examples

All and any comments / bugs / suggestions are welcomed!