1. JavaScript
  2. How To Make Animated Information Bar Using HTML JavaScript

How To Make Animated Information Bar Using HTML JavaScript

Submitted by alpha_luna on Thursday, May 14, 2015 - 23:33.
Language
JavaScript
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

result 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.
    2. 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.

Tags
information bar
Javascript

Add new comment

About text formats
  • 97 views