ASP. NET Floating Top Bar in VB.NET

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.
  • 1992
Download Files:
 

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.

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.