.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Sandeep Singh
Mayuri
stevemarkayden
kumarfurima
Preethi

  

Slide the Text or control using JQuery

   
 
     


Introduction :

In this tutorial we will see how to slide the text or controls of HTML or asp.net in asp.net with very less code.

In This tutorial we will see how to start using JQuery in Asp.Net. In this example we will Slide the text which is inside the div tag in upward and downward direction

In This tutorial we going to use slideUp() and slideDown() function of jQuery

Step 1: Craete new Web Project using Visual Studio.Net

Step 2: Now go to .aspx page and write one div tag and assign the  div id to dvText for eg <div id="dvText"> </div>

Now write something in the div tag

For eg

<body>

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

    <a href="#" id="aSlideUp">Slide Up</a>

    <a href="#" id="aSlideDown">Slide Down</a>

       <div id="dvText">

     This is JQuery Tutorial, This is JQuery Tutorial, This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial,

     This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial 

    </div>

    </form>

</body>

Step 3: Download the JQuery Library from JQuery.com website and keep this library to one script folder in your application and we assign the folder name to Script

Now add the reference of this JQuery Library in you .aspx page like this inside the <Head> tag

<head id="Head1" runat="server">
    <title>JQuery Sample</title>
    
    <script src="Script/jquery-1.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">

So lets start writing the JQuery code 

$(document).ready(function() {
           //you Jquery Logic goes here
});

The above code will hide the div tag

Step 4: Create two ancor tag and using this we will show hide the div tag like this

 <a href="#" id="aSlideUp">Slide Up</a>
 <a href="#" id="aSlideDown">Slide Down</a>

Now for this two we will write the JQuery code like this inside JQuery Ready function

  

  //For Slide of the text upward side
            $("#aSlideUp").click(function() {
                $("#dvText").slideUp();
            });
            //For Slide of the text down
            $("#aSlideDown").click(function() {
                $("#dvText").slideDown();
            });

lets see the full JQuery Code for  this example to show/hide the div tag in asp.net

 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
    <title>JQuery Sample</title>
    
    <script src="Script/jquery-1.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">

        $(document).ready(function() {
           
            //For Slide of the text upward side
            $("#aSlideUp").click(function() {
                $("#dvText").slideUp();
            });
            //For Slide of the text down
            $("#aSlideDown").click(function() {
                $("#dvText").slideDown();
            });
          
        });
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
   
    <a href="#" id="aSlideUp">Slide Up</a>
    <a href="#" id="aSlideDown">Slide Down</a>
  
    <div id="dvText">
     This is JQuery Tutorial for slide show, This is JQuery Tutorial for slide the text , This is JQuery Tutorial for slide the controls, This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial,
     This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial 
    </div>
    </form>
</body>
</html>
Other Tutorials in the same Category:
      
  • JQuery In Asp.Net      
  • How to Start using JQuery      
  • Show hide control using JQuery      
  • Slide the Text or control using JQuery      
  • Animation Text or control using JQuery

  •  
         
     
    Return to Main Index Page


    Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend