9 min read

 

ASP.NET jQuery Cookbook

ASP.NET jQuery Cookbook

Over 60 practical recipes for integrating jQuery with ASP.NET  

Introduction

Some useful inbuilt functions in jQuery that we will explore in this article for achieving animation effects are:

  • animate ( properties, [ duration ], [ easing ], [ complete ] ):
    This method allows us to create custom animation effects on any numeric css property. The parameters supported by this method are:

    • properties: This is the map of css properties to animate, for e.g. width, height, fontSize, borderWidth, opacity, etc.
    • duration: This is the duration of the animation in milliseconds. The constants slow and fast can be used to specify the durations, and they represent 600 ms and 200 ms respectively.
    • easing: This is the easing function to use. Easing indicates the speed of the animation at different points during the animation. jQuery provides inbuilt swing and linear easing functions. Various plugins can be interfaced if other easing functions are required.
    • complete: This indicates the callback function on completion of the animation.
  • fadeIn ( [ duration ], [ callback ] ):
    This method animates the opacity of the matched elements from 0 to 1 i.e. transparent to opaque. The parameters accepted are:

    • duration: This is the duration of the animation
    • callback: This is the callback function on completion of the animation
  • fadeOut( [ duration ], [ callback ] ):
    This method animates the opacity of the matched elements from 1 to 0 i.e. opaque to transparent. The parameters accepted are:

    • duration: This is the duration of the animation
    • callback: This is the callback function on completion of the animation
  • slideUp( [ duration ], [ callback ] ):
    This method animates the height of the matched elements with an upward sliding motion. When the height of the element reaches 0, the css property display of the element is updated to none so that the element is hidden on the page. The parameters accepted are:

    • duration: This is the duration of the animation
    • callback: This is the callback function on completion of the animation
  • slideDown( [ duration ], [ callback ] ):
    This method animates the height of the matched elements from 0 to the specified maximum height. Thus, the element appears to slide down on the page. The parameters accepted are:

    • duration: This is the duration of the animation
    • callback: This is the callback function on completion of the animation
  • slideToggle( [ duration ], [ callback ] ):
    This method animates the height of the matched elements. If the element is initially hidden, it will slide down and become completely visible. If the element is initially visible, it will slide up and become hidden on the page. The parameters accepted are:

    • duration: This is the duration of the animation
    • callback: This is the callback function on completion of the animation
  • jQuery.fx.off:
    If there is a need to disable animations because of a resource constraint or due to difficulties in viewing the animations, then this utility can be used to turn off the animation completely. This is achieved by setting all animated controls to their final state.
  • stop ( [ clearQueue ], [ jumpToEnd ] ):
    This method stops the currently running animations on the page. The parameters accepted are:

    • clearQueue: This indicates whether any queued up animations are required to be cleared. The default value is false.
    • jumpToEnd: This indicates if the current animation is to be cleared immediately. The default value is false.

In this article, we will cover some of the animation effects that can be achieved in ASP.NET using the capabilities of jQuery.

Getting started

  1. Let’s start by creating a new ASP.NET website in Visual Studio and name it Chapter5.
  2. Save the jQuery library in a script folder js in the project.
  3. To enable jQuery on any web form, drag-and-drop to add the following to the page: 
    <scriptsrc="js/jquery-1.4.1.js" type="text/javascript"></script>

Now let’s move on to the recipes where we will see different animation techniques using jQuery.

Enlarging text on hover

In this recipe, we will animate the font size of text content on hover.

Getting ready

  1. Add a new web form Recipe1.aspx to the current project.
  2. Create a Css class for the text content that we want to animate. The font size specified in the css Class is the original font size of the text before animation is applied to it: 
    .enlarge
 {
 font-size:12.5px;
 font-family:Arial,sans-serif;
 }
  3. Add an ASP.NET Label control on the form and set its Css Class to the preceding style: 
    <asp:LabelCssClass="enlarge"runat="server">Lorem ipsum dolor sit
...............</asp:Label>

Thus, the ASPX markup of the form is as follows:

<form id="form1" runat="server">
 <div align="center">
 Mouseover to enlarge text:<br />
 <fieldset id="content" style="width:500px;height:300px;">
 <asp:LabelCssClass="enlarge" runat="server">Lorem ipsum dolor
 sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</
 asp:Label>
 </fieldset>
 </div>
 </form>

Thus, initially, the page will display the Label control as follows:

ASP.NET jQuery Cookbook

We will now animate the font size of the Label on hover on the containing fieldset element.

How to do it…

  1. In the document.ready() function of the jQuery script block, retrieve the original font size of the Label: 
    var origFontSize = parseFloat($(".enlarge").css('font-size'));

    The parseFloat() function takes in an input string and returns the first floating point value in the string. It discards any content after the floating point value. For example, if the css property returns 12.5 px, then the function will discard the px.

  2. Define the hover event of the containing fieldset element: 
    $("#content").hover(
  3. In the mouseenter event handler of the hover method, update the cursor style to pointer: 
    function() {
$(".enlarge").css("cursor", "pointer");
  4. Calculate the maximum font size that we want to animate to. In this example, we will set the maximum size to thrice the original: 
    var newFontSize = origFontSize * 3;
  5. Animate the fontSize css property of the Label in 300 ms: 
    $(".enlarge").animate({ fontSize: newFontSize }, 300);
},
  6. In the mouseleave event handler of the hover method, animate the fontSize to the original value in 300 ms as shown: 
    function() {
 $(".enlarge").animate({ fontSize: origFontSize }, 300);
 }
 );

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
 $(document).ready(function() {
 var origFontSize = parseFloat($(".enlarge").css('fontsize'));
 $("#content").hover(
 function() {
 $(".enlarge").css("cursor", "pointer");
 var newFontSize = origFontSize * 3;
 $(".enlarge").animate({ fontSize: newFontSize }, 300);
 },
 function() {
 $(".enlarge").animate({ fontSize: origFontSize },
 300);
 }
 );
 });
 </script>

How it works…

Run the web form. Mouseover on the fieldset area. The text size will animate over the stated duration and change to the maximum specified font size as displayed in the following screenshot:

ASP.NET jQuery Cookbook

On removing the mouse from the fieldset area, the text size will return back to the original.

Creating a fade effect on hover

In this recipe, we will create a fade effect on an ASP.NET Image control on hover. We will use the fadeIn and fadeOut methods to achieve the same.

Getting ready

  1. Add a new web form Recipe2.aspx to the current project.
  2. Add an image control to the form: 
    <asp:Image src="images/Image1.jpg" ID="Image1" runat="server" />
  3. Define the properties of the image in the css: 
    #Image1
 {
 width:438px;
 height:336px;
 }
  4. Thus, the complete ASPX markup of the web form is as follows: 
    <form id="form1" runat="server">
 <div align="center">
 Mouseover on the image to view fade effect:
 <fieldset id="content" style="width:480px;height:370px;">
 <br />
 <asp:Image src="images/Image1.jpg" ID="Image1" runat="server" />
 </fieldset>
 </div>
 </form>
  5. On page load, the image is displayed as follows:

    ASP.NET jQuery Cookbook

We will now create a fade effect on the image on hover on the containing fieldset area.

How to do it…

  1. In the document.ready() function of the jQuery script block, define the hover event on the containing fieldset area: 
    $("#content").hover(
  2. In the mouseenter event handler of the hover method, update the cursor to pointer: 
    function() {
 $("#Image1").css("cursor", "pointer");
  3. Apply the fadeOut method on the Image control with an animation duration of 1000 ms: 
    $("#Image1").fadeOut(1000);
 },
  4. In the mouseleave event handler of the hover method, apply the fadeIn method on the Image control with an animation duration of 1000 ms: 
    function() {
 $("#Image1").fadeIn(1000);
 }
 );

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
 $(document).ready(function() {
 $("#content").hover(
 function() {
 $("#Image1").css("cursor", "pointer");
 $("#Image1").fadeOut(1000);
 },
 function() {
 $("#Image1").fadeIn(1000);
 }
 );
 });
 </script>

How it works…

Run the web page. Mouseover on the Image control on the web page. The image will slowly fade away as shown in the following screenshot:

ASP.NET jQuery Cookbook

On mouseout from the containing fieldset area, the image reappears.

Sliding elements on a page

In this recipe, we will use the slideUp and slideDown methods for achieving sliding effects on an ASP.NET panel.

Getting ready

  1. Add a new web form Recipe3.aspx in the current project.
  2. Add an ASP.NET panel to the page as follows: 
    <asp:Panel class="slide" runat="server">
 Sliding Panel
 </asp:Panel>
  3. The css class for the panel is defined as follows: 
    .slide
 {
 font-size:12px;
 font-family:Arial,sans-serif;
 display:none;
 height:100px;
 background-color:#9999FF;
 }
  4. Add a button control to trigger the sliding effect on the panel: 
    <asp:Button ID="btnSubmit" runat="server" Text="Trigger Slide" />
  5. Thus, the complete ASPX markup of the web form is as follows: 
    <form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:150px;">
<asp:Button ID="btnSubmit" runat="server" Text="Trigger Slide" />
<br /><br/>
<asp:Panel class="slide" runat="server">
           Sliding Panel
</asp:Panel>
</fieldset>
</div>
</form>

On page load, the page appears as shown in the following screenshot:

ASP.NET jQuery Cookbook

We will now use jQuery to slide up and slide down the panel.

How to do it…

  1. In the document.ready() function of the jQuery script block, define the click event of the button control: 
    $("#btnSubmit").click(function(e) {
  2. Prevent default form submission: 
    e.preventDefault();
  3. Check if the ASP.NET panel control is hidden: 
    if ($(".slide").is(":hidden"))

    The jQuery selector :hidden selects matched elements that are hidden on the page.

  4. If yes, then slide down the panel until its height reaches the maximum (100 px) defined in the css property. 
    $(".slide").slideDown("slow");
  5. If the panel is initially visible then slide up so that its height slowly reduces until it becomes 0 and the panel disappears from the page:

    else

    $(".slide").slideUp("slow");
 });

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
 $(document).ready(function() {
 $("#btnSubmit").click(function(e) {
 e.preventDefault();
 if ($(".slide").is(":hidden"))
 $(".slide").slideDown("slow");
 else
 $(".slide").slideUp("slow");
 });
 });
 </script>

 

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here