How To Make Animated Information Bar Using HTML JavaScript

Submitted by: 
Language: 
Visitors have accessed this post 1020 times.

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="<a href="https://www.sourcecodester.com/user?destination=submit-code"">https://www.sourcecodester.com/user?destination=submit-code"</a> 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="<a href="https://www.sourcecodester.com/user?destination=submit-code"">https://www.sourcecodester.com/user?destination=submit-code"</a> 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

resultThere 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!')

  3. 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.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.