How to make your Control Always Available While Scrolling in ASP.NET AJAX

Vuyiswamb
Posted by in ASP.NET AJAX category on for Beginner level | Views : 12522 red flag
Rating: 5 out of 5  
 2 vote(s)

Sometimes in your Web application you might need your menu control to be available even when the user is scrolling down your page. Some Web Applications or Websites have a lot of contents on the page and when the user control down he forgets about the menus and sometimes it because a pain to always go up the page to find a menu. Sometimes it good if the menu can stay on the display while the user scrolls up and down. In this Article we are going to demonstrate on how to achieve this.
Introduction

Sometimes in your Web application you might need your menu control to be available even when the user is scrolling down your page. Some Web Applications or Websites have a lot of contents on the page and when the user control down he forgets about the menus and sometimes it because a pain to always go up the page to find a menu. Sometimes it is good if the menu can stay on the display while the user scrolls up and down. In this Article we are going to demonstrate on how to achieve this.

Using the code

We are going to user C# as our language.

Start

Open Visual Studio and Create a New Website. Automatically you will have an empty page defined for you like this

<%@ 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 runat="server">

    <title></title>

</head>

<body>

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

    <div>

   

    </div>

    </form>

</body>

</html>

 

Go to Design View and you will notice there is nothing on your page. In this Article we are going to use Ajax Toolkit. I have covered the part where you add the tools to your toolbar. I will not discuss this but you can see how i do it in my previous articles. Before i use the controls. After you have added the controls look for the control named “AlwaysVisibleControlExtender” as depicted in the Following Diagram

Drag and Drop the ScriptManager on your page. Add the ScriptManager before the control on your page and add the Always Visible Followed by the Panel Control and add a menu control inside the panel control and make it more interestingly by adding more items as depicted in the Following mark-up and diagram.


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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 runat="server">

    <title>Untitled Page</title>

</head>

<body>

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

    <div>

        &nbsp;<asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

       

    </div>

        <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Panel1">

        </ajaxToolkit:AlwaysVisibleControlExtender>

        &nbsp;<br />

        <br />

        <asp:Panel ID="Panel1" runat="server">

                <asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2"

            Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" Orientation="Horizontal"

            StaticSubMenuIndent="10px" Width="587px">

            <StaticSelectedStyle BackColor="#FFCC66" />

            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

            <DynamicHoverStyle BackColor="#990000" ForeColor="White" />

            <DynamicMenuStyle BackColor="#FFFBD6" />

            <DynamicSelectedStyle BackColor="#FFCC66" />

            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

            <StaticHoverStyle BackColor="#990000" ForeColor="White" />

            <Items>

                <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>

                <asp:MenuItem Text="Products" Value="Products"></asp:MenuItem>

                <asp:MenuItem Text="Forums" Value="Forums"></asp:MenuItem>

                <asp:MenuItem Text="About us" Value="About us"></asp:MenuItem>

                <asp:MenuItem Text="Contact us" Value="Contact us"></asp:MenuItem>

            </Items>

        </asp:Menu>

 

        </asp:Panel>

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        WOW i did it<br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        WOW i did it<br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        WOW i did it<br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        WOW i did it

    </form>

</body>

</html>

 

And your Design should look like this


Now as you can see our Design is set but we need to tell the extender what is the control that it is going to keep visible. Let us go to our Mark-up again and add a Property of the Extender. Change your mark-up to look like this

        <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Panel1">

        </ajaxToolkit:AlwaysVisibleControlExtender>

As you can see I have made some long list of page break. This is for the purpose of our test. We need to see if the menu will still remain visible while we scroll. Press F5 to run your application and scroll down and you will see that menu is always available while you are scrolling as depicted in the following.


Conclusion

There are many ways to achieve this, but this one is the simplest because it will remove the burden of writing functions that will do this. Using AjaxToolkit functionality can be achieved at ease.

Thank you for visiting DotnetFunda

Vuyiswa Maseko

Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)