Click here to Skip to main content
Click here to Skip to main content

Flyout - A great way to save space on your webpage

, 4 Dec 2007
Rate this:
Please Sign up or sign in to vote.
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:
  • <%@ Register TagPrefix="obout" Namespace="OboutInc.Flyout2" 
                 Assembly="obout_Flyout2_NET" %>

Using the Flyout control

Below is some sample code to start with:

<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: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: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:

<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:

<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)

About the Author

Ned Thompson
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 PinmemberKristy WInters11-Apr-14 6:35 
QuestionWhere is the source code Pinmemberduraid wadie3-Oct-10 23:06 
GeneralFlyout panel out of position Pinmemberdhunted200012-Jan-10 20:57 
GeneralFlyout and MS IE 8.0 PinmemberDon Koller14-Jul-09 15:40 
QuestionRe: Flyout and MS IE 8.0 Pinmemberunexpectedunexpected14-Mar-11 18:36 
GeneralGreat control but a bug when inheriting PinmemberFlorian DREVET17-Oct-08 0:11 
General[Message Removed] PinmemberMojtaba Vali20-May-08 21:26 
QuestionHow to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? PinmemberKen1234511-Mar-08 4:20 
GeneralRe: How to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? PinmemberNed Thompson12-Mar-08 0:45 
GeneralRe: How to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? PinmemberKen1234512-Mar-08 11:03 
GeneralRe: How to Attach Obout Flyout Menu to SharePoint Services WSS 3.0 Top Nav Link Bar? Pinmemberitsaranga8-Sep-09 8:09 
QuestionDoes it work on .net 1.1 ? Pinmembermarijus519-Dec-07 23:12 
AnswerRe: Does it work on .net 1.1 ? PinmemberNed Thompson1-Jan-08 17:33 
General[Message Removed] PinmemberMojtaba Vali3-Dec-07 19:10 
GeneralRe: File desn't exist on code project PinmemberNed Thompson4-Dec-07 9:18 
QuestionIs the source code available? PinmemberDavid Hollifield28-Nov-07 13:15 
QuestionCool control but is it really free? PinmemberVishal_Trivedi26-Nov-07 23:24 
AnswerRe: Cool control but is it really free? PinmemberNed Thompson27-Nov-07 2:31 
GeneralGreat Pinmembermerlin98126-Nov-07 4:01 
GeneralRe: Great PinmemberNed Thompson27-Nov-07 2:45 
GeneralNice Control PinmemberPham Tien Thanh23-Nov-07 21:51 
GeneralThat is exactly what I am looking for :) PinmemberMad Scientist23-Nov-07 13:49 
GeneralRe: That is exactly what I am looking for :) PinmemberNed Thompson27-Nov-07 2:43 
GeneralNice & free control Pinmembersaglam22-Nov-07 9:59 
GeneralRe: Nice & free control PinmemberNed Thompson27-Nov-07 2:40 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140718.1 | Last Updated 5 Dec 2007
Article Copyright 2007 by Ned Thompson
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid