This is a simple animated information bar created using HTML and it's pure JavaScript code. You can view from the top of the browser the information to your visitors in an eye catching way.

The information bar in view will remain static on your screen above even when you scroll the page. Lastly, you can set the Frequency controls to limit the displaying information bar to once per session of your browser.

Its job is primarily to display information about the current state of its window, although some information bars have extra functionality. For example, many web browsers have clickable sections that pop up a display of security or privacy information.

Direction:

Kindly copy the script and css codes below into your HEAD section of your page.
Script code

1. <
   
   script type=
   
   "text/javascript"
   
   >
   
2. //for information_bar
   
3. function
   
   information_bar(
   
   )
   
   {
   
4. this
   
   .displayfreq
   
   =
   
   "always"
   
5. this
   
   .content
   
   =
   
   '<a href="javascript:information_bar.close()"><img src="images/close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a>'
   
6. }
   
7. //set content
   
8. information_bar.prototype
   
   .setContent
   
   =
   
   function
   
   (
   
   data)
   
   {
   
9. this
   
   .content
   
   =
   
   this
   
   .content
   
   +
   
   data
   
10. document.write
    
    (
    
    '<div id="information_bar" style="top: -500px">'
    
    +
    
    this
    
    .content
    
    +
    
    '</div>'
    
    )
    
11. }
    
12. //animation to view
    
13. information_bar.prototype
    
    .animatetoview
    
    =
    
    function
    
    (
    
    )
    
    {
    
14. var
    
    barinstance=
    
    this
    
15. if
    
    (
    
    parseInt(
    
    this
    
    .barref
    
    .style
    
    .top
    
    )
    
    <
    
    0
    
    )
    
    {
    
16. this
    
    .barref
    
    .style
    
    .top
    
    =
    
    parseInt(
    
    this
    
    .barref
    
    .style
    
    .top
    
    )
    
    +
    
    5
    
    +
    
    "px"
    
17. setTimeout(
    
    function
    
    (
    
    )
    
    {
    
    barinstance.animatetoview
    
    (
    
    )
    
    }
    
    ,
    
    50
    
    )
    
18. }
    
19. else
    
    {
    
20. if
    
    (
    
    document.all
    
    &&
    
    !
    
    window.XMLHttpRequest
    
    )
    
21. this
    
    .barref
    
    .style
    
    .setExpression
    
    (
    
    "top"
    
    ,
    
    'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"'
    
    )
    
22. else
    
23. this
    
    .barref
    
    .style
    
    .top
    
    =
    
    0
    
24. }
    
25. }
    
26. // for the close function
    
27. information_bar.close
    
    =
    
    function
    
    (
    
    )
    
    {
    
28. document.getElementById
    
    (
    
    "information_bar"
    
    )
    
    .style
    
    .display
    
    =
    
    "none"
    
29. if
    
    (
    
    this
    
    .displayfreq
    
    ==
    
    "session"
    
    )
    
30. document.cookie
    
    =
    
    "infobarshown=1;path=/"
    
31. }
    
32. //setting frequency
    
33. information_bar.prototype
    
    .setfrequency
    
    =
    
    function
    
    (
    
    type)
    
    {
    
34. this
    
    .displayfreq
    
    =
    
    type
    
35. }
    
36. //for initializing
    
37. information_bar.prototype
    
    .initialize
    
    =
    
    function
    
    (
    
    )
    
    {
    
38. if
    
    (
    
    this
    
    .displayfreq
    
    ==
    
    "session"
    
    &&
    
    document.cookie
    
    .indexOf
    
    (
    
    "infobarshown"
    
    )
    
    ==-
    
    1
    
    ||
    
    this
    
    .displayfreq
    
    ==
    
    "always"
    
    )
    
    {
    
39. this
    
    .barref
    
    =
    
    document.getElementById
    
    (
    
    "information_bar"
    
    )
    
40. this
    
    .barheight
    
    =
    
    parseInt(
    
    this
    
    .barref
    
    .offsetHeight
    
    )
    
41. this
    
    .barref
    
    .style
    
    .top
    
    =
    
    this
    
    .barheight
    
    *
    
    (
    
    -
    
    1
    
    )
    
    +
    
    "px"
    
42. this
    
    .animatetoview
    
    (
    
    )
    
43. }
    
44. }
    
45. window.onunload
    
    =
    
    function
    
    (
    
    )
    
    {
    
46. this
    
    .barref
    
    =
    
    null
    
47. }
    
48. </
    
    script>
    
49. 
    
50. <!---Execute-->
    
51. <
    
    script type=
    
    "text/javascript"
    
    >
    
52. var
    
    infobar=
    
    new
    
    information_bar(
    
    )
    
53. infobar.setContent
    
    (
    
    'Welcome to <b style="color:blue;">Sourcecodester.com</b>! Do you have source code, articles, tutorials, web links, and books to share? <a href="http://www.sourcecodester.com/user?destination=submit-code" title="Submit now...">Submit now...</a>'
    
    )
    
54. //infobar.setfrequency('session') //Uncomment this line to set once the information bar per browser session.
    
55. infobar.initialize
    
    (
    
    )
    
56. </
    
    script>
    

CSS code

1. <style type=
   
   "text/css"
   
   >
   
2. #information_bar
   
   {
   
3. position
   
   :
   
   fixed
   
   ;
   
4. left
   
   :
   
   0
   
   ;
   
5. width
   
   :
   
   100%
   
   ;
   
6. text-indent
   
   :
   
   5px
   
   ;
   
7. padding
   
   :
   
   10px
   
   0
   
   ;
   
8. background-color
   
   :
   
   antiquewhite
   
   ;
   
9. border-bottom
   
   :
   
   1px
   
   solid
   
   black
   
   ;
   
10. font
    
    :
    
    bold
    
    15px
    
    Helvetica;
    
11. color
    
    :
    
    #000000
    
    ;
    
12. }
    
13. </style>
    

As you can see at the bottom of the codes, this is the code to call the animation information bar.

1. <!---Execute-->
   
2. <
   
   script type=
   
   "text/javascript"
   
   >
   
3. var
   
   infobar=
   
   new
   
   information_bar(
   
   )
   
4. infobar.setContent
   
   (
   
   'Welcome to <b style="color:blue;">Sourcecodester.com</b>! Do you have source code, articles, tutorials, web links, and books to share? <a href="http://www.sourcecodester.com/user?destination=submit-code" title="Submit now...">Submit now...</a>'
   
   )
   
5. //infobar.setfrequency('session') //Uncomment this line to set once the information bar per browser session.
   
6. infobar.initialize
   
   (
   
   )
   
7. </
   
   script>
   

Output


There are two important functions to take note:

1. setContent(html_to_show): Enter the HTML that you want to be shown inside the animation information bar. Be sure for the backslash (\) for the JavaScript reserved keywords to avoid some errors.
   
   Example:
   
   ('He\'s my girlfriend!')
   
2. setfrequency(keyword): This is the function to set the display frequency of the information bar.
   

There are two valid values:

• session
  
• always
  

Just download the source code and use it to your project.
Hope this work will help you in your future project. Enjoy coding.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download