ARTICLE

How To Create A Floating Top Bar in ASP. NET

Posted by Rohatash Kumar Articles | ASP.NET using VB.NET June 13, 2011
In this article we create a floating top bar as seen on many sites on the internet. It can be useful to display messages or ads.
Download Files:
 
Reader Level:

In this article we create a nice floating top bar as seen on many sites on the internet. It can be useful to display messages or ads. Here, we will see a floating bar that sits at the top of the window, gliding gently back into view when the page is scrolled.

The following are some easy steps.

Step-1:  Create a simple application in Visual Studio.

Step-2: Add the following style on the page in head section.

<style type="text/css">

#topbar{

position:absolute;

border:1px solid black;

padding:2px;

background-color:lightyellow;

width:620px;

visibility:hidden;

z-index:100;

}

 

Step-3: Add the following JavaScript code on the page in head section.

<script type="text/javascript">

   var persistclose = 0

   var startX = 30

   var startY = 5

   var verticalpos ="fromtop"

 

   function iecompattest() {

       return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body

    }

 

   function get_cookie(Name) {

       var search = Name +"="

       var returnvalue ="";

       if (document.cookie.length > 0) {

            offset = document.cookie.indexOf(search)

           if (offset != -1) {

                offset += search.length

                end = document.cookie.indexOf(";", offset);

               if (end == -1) end = document.cookie.length;

                returnvalue = unescape(document.cookie.substring(offset, end))

            }

        }

       return returnvalue;

    }

 

   function closebar() {

       if (persistclose)

            document.cookie = "remainclosed=1"

        document.getElementById("topbar").style.visibility = "hidden"

    }

   

       function staticbar() {

        barheight = document.getElementById("topbar").offsetHeight

       var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

       var d = document;

       function ml(id) {

           var el = d.getElementById(id);

           if (!persistclose || persistclose && get_cookie("remainclosed") =="")

                el.style.visibility = "visible"

           if (d.layers) el.style = el;

            el.sP =function (x, y) {this.style.left = x +"px"; this.style.top = y + "px"; };

            el.x = startX;

           if (verticalpos =="fromtop")

                el.y = startY;

           else {

                el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

                el.y -= startY;

            }

           return el;

        }

        window.stayTopLeft = function () {

           if (verticalpos =="fromtop") {

               var pY = ns ? pageYOffset : iecompattest().scrollTop;

                ftlObj.y += (pY + startY - ftlObj.y) / 8;

            }

           else {

               var pY = ns ? pageYOffset + innerHeight - barheight : iecompattest().scrollTop + iecompattest().clientHeight - barheight;

                ftlObj.y += (pY - startY - ftlObj.y) / 8;

            }

            ftlObj.sP(ftlObj.x, ftlObj.y);

            setTimeout("stayTopLeft()", 10);

        }

        ftlObj = ml("topbar");

        stayTopLeft();

    }

 

   if (window.addEventListener)

        window.addEventListener("load", staticbar, false)

   else if (window.attachEvent)

        window.attachEvent("onload", staticbar)

   else if (document.getElementById)

        window.onload = staticbar

</script>

Step-4: Add the following code on the page in body section.

<div id="topbar">

   <a href="" onClick="closebar(); return false"><img src="close.gif" border="0" /></a>

Rohatash Kumar

   </div>

Step-5: Now run the application.

floatingbar1.gif

figure1

Gliding gently back into view when the page is scrolled.

To delete bar click on the delete image over the top bar to make invisible.

Note: You can see a demo of this article by downloading this application.

Login to add your contents and source code to this article
share this article :
post comment
 
Team Foundation Server Hosting
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
Nevron Diagram
Become a Sponsor