Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET
Article

Flyout - A great way to save space on your webpage

Rate me:
Please Sign up or sign in to vote.
5.00/5 (26 votes)
4 Dec 2007CPOL3 min read 109.1K   1K   80   25
This article will demo how a free Flyout can help to save space on your webpage.

Screenshot - microsoftquicklinks.gif

Introduction

This article describes the ASP.NET Flyout control and its application. Flyout can make your webpage contain more information, and look neater and more stylish. The above image shows how Flyout is used as QuickLinks in the Microsoft MSDN website. The Flyout control that I would like to introduce here is from obout inc. This Flyout is feature-rich and total free: free to download, free to use, free to distribute.

List of features

Below are some key features:

  • Able to wrap any content.
  • Able to customize opening position.
  • Provided with four types of effect.
  • Design-time preview support.
  • Easy to use: it takes less than three minutes to get it to work.

How to add Flyout to your page

Adding the Flyout control to your page is very simple:

  • Copy obout_Flyout_NET.dll to the Bin folder of your project.
  • Register Flyout on your page:
  • ASP.NET
    <%@ Register TagPrefix="obout" Namespace="OboutInc.Flyout2" 
                 Assembly="obout_Flyout2_NET" %>

Using the Flyout control

Below is some sample code to start with:

ASP.NET
<asp:Button runat="server" ID="myButton" Text="My Button"/>

<obout:Flyout runat="server" ID="myFlyout" AttachTo="myButton">
    <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

By putting the ID of the Button into the AttachTo property of Flyout, you have attached Flyout to a Button.

And here is the result of our work:

Flyout open as default

When the mouse hovers the button, a fly-out opens at the bottom center of the button.

Customize the open position of Flyout

Flyout can be open not only at the bottom of the target object, but also at other relative positions. Four properties which will control the position of the Flyout are Position, Align, RelativeLeft, and RelativeTop.

How can I can make Flyout attach to a button like this?

Flyout open on the right of object

Pretty easy, here comes the code:

ASP.NET
<asp:Button runat="server" ID="myButton" Text="My Button"/>

<obout:Flyout ... Position="MIDDLE_RIGHT" Align="TOP" ...>
    <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

If you want your fly-out to have a custom position, like this:

Flyout open with custom position

Do this:

ASP.NET
<asp:Button runat="server" ID="myButton" Text="My Button"/>

<obout:Flyout ... Position="ABSOLUTE" RelativeLeft="50" RelativeTop="5" ...>
    <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

To know more about other positioning styles, you may have a look at Flyout positions and alignment.

Customize OpenEvent

The default behavior of Flyout is top open on cursor hover over the target element. This behavior can be changed. For example, to open on Click event:

ASP.NET
<input type="button" id="myButton" value="My Button"/>

<obout:Flyout ... OpenEvent="ONCLICK" ...>
     <div style="background-color:lightblue;width:200px;height:100px;">
        Flyout
    </div>
</obout:Flyout>

OpenEvent property has a number of pre-defined events for you to choose.

Customize opening effect

Flyout provides four types of effects:

  • FlyingEffect: The default effect of Flyout.
  • FadingEffect: The fly-out will appear and dissolve gradually.
  • SlidingEffect: The fly-out will appear, slide, then stop.
  • NoneEffect: The fly-out will just appear without any effect

It is possible to set multiple effects on the same Flyout. For example, if you want Flyout to open by sliding from the left and fading at the same time:

ASP.NET
<input type="button" id="myButton" value="My Button"/>

<obout:Flyout ... SlidingEffect="LEFT" FadingEffect="true" ...>
     <div style="background-color:lightblue;width:100px;height:50px;">
        Flyout
    </div>
</obout:Flyout> 

Here is the result of sliding and fading.

Cool applications

  • Initially hidden quick links or site map, feedback forms, extra information about a product, tooltips. View.
  • Flyout can be used as a menu. View
  • Flyout can be used with a grid to show more information. View.
  • Anything else.

Summary

In this article, I have shown you how to use the Flyout control from obout. This component will help you save a lot of layout space on your web pages and provide extra information to your users. I hope that you find it useful. In the zip file provided along with this article, there are many examples of Flyout that you can start with. You may get the latest version of Flyout anytime from the obout Suite. All the best.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Unknown
I am Ned Thompson, 26 years old. I am working at obout inc as web component developer. I am really good at ASP.NET and Javascript.


Comments and Discussions

 
QuestionAndroid Pin
Kristy WInters11-Apr-14 6:35
Kristy WInters11-Apr-14 6:35 
QuestionWhere is the source code Pin
duraid wadie3-Oct-10 23:06
duraid wadie3-Oct-10 23:06 
GeneralFlyout panel out of position Pin
dhunted200012-Jan-10 20:57
dhunted200012-Jan-10 20:57 
GeneralFlyout and MS IE 8.0 Pin
Don Koller14-Jul-09 15:40
Don Koller14-Jul-09 15:40 
QuestionRe: Flyout and MS IE 8.0 Pin
unexpected_14-Mar-11 18:36
unexpected_14-Mar-11 18:36 
GeneralGreat control but a bug when inheriting Pin
Florian DREVET17-Oct-08 0:11
Florian DREVET17-Oct-08 0:11 
General[Message Removed] Pin
Mojtaba Vali20-May-08 21:26
Mojtaba Vali20-May-08 21:26 
QuestionHow to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? Pin
Ken1234511-Mar-08 4:20
Ken1234511-Mar-08 4:20 
GeneralRe: How to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? Pin
Ned Thompson12-Mar-08 0:45
Ned Thompson12-Mar-08 0:45 
GeneralRe: How to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? Pin
Ken1234512-Mar-08 11:03
Ken1234512-Mar-08 11:03 
GeneralRe: How to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? Pin
itsaranga8-Sep-09 8:09
itsaranga8-Sep-09 8:09 
QuestionDoes it work on .net 1.1 ? Pin
marijus519-Dec-07 23:12
marijus519-Dec-07 23:12 
AnswerRe: Does it work on .net 1.1 ? Pin
Ned Thompson1-Jan-08 17:33
Ned Thompson1-Jan-08 17:33 
General[Message Removed] Pin
Mojtaba Vali3-Dec-07 19:10
Mojtaba Vali3-Dec-07 19:10 
GeneralRe: File desn't exist on code project Pin
Ned Thompson4-Dec-07 9:18
Ned Thompson4-Dec-07 9:18 
QuestionIs the source code available? Pin
David Hollifield28-Nov-07 13:15
David Hollifield28-Nov-07 13:15 
I guess that pretty much sums it up Big Grin | :-D . Your control is really cool, but I can't use it unless I have access to the source code (company requirement). If someone buys your suite of controls, is source code included then (like with Infragistics or ComponentOne)? I was pretty disappointed that the source wasn't included in the download since most articles on CodeProject seem to be more educational than promotional.

Thanks,
David
QuestionCool control but is it really free? Pin
Vishal_Trivedi26-Nov-07 23:24
Vishal_Trivedi26-Nov-07 23:24 
AnswerRe: Cool control but is it really free? Pin
Ned Thompson27-Nov-07 2:31
Ned Thompson27-Nov-07 2:31 
GeneralGreat Pin
merlin98126-Nov-07 4:01
professionalmerlin98126-Nov-07 4:01 
GeneralRe: Great Pin
Ned Thompson27-Nov-07 2:45
Ned Thompson27-Nov-07 2:45 
GeneralNice Control Pin
Pham Tien Thanh23-Nov-07 21:51
Pham Tien Thanh23-Nov-07 21:51 
GeneralThat is exactly what I am looking for :) Pin
Mad Scientist23-Nov-07 13:49
Mad Scientist23-Nov-07 13:49 
GeneralRe: That is exactly what I am looking for :) Pin
Ned Thompson27-Nov-07 2:43
Ned Thompson27-Nov-07 2:43 
GeneralNice & free control Pin
saglam22-Nov-07 9:59
saglam22-Nov-07 9:59 
GeneralRe: Nice & free control Pin
Ned Thompson27-Nov-07 2:40
Ned Thompson27-Nov-07 2:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.