How to Make Simple Note using HTML JavaScript

This simple note script was created using HTML and JavaScript. You can use it for broadcast special events or news in your site. You can easily be dismissed it, and users allow to specify the Frequency of its appearance, it's either once per session browser or every time the page loaded. Lastly, in any browser, you can drag the note where you want to place it.

Direction:

First, kindly copy this codes below into the HEAD section of your page.
  1. <style type="text/css">
  2. #post_the_note {
  3. position:absolute;
  4. width:523px;
  5. padding:5px;
  6. background-color:azure;
  7. border:2px solid blue;
  8. visibility:hidden;
  9. z-index:100;
  10. font-size:15px;
  11. font-family:cursive;
  12. }
  13. </style>
Second, insert this code below to your BODY section, better at the bottom of a page.
  1. <div id="post_the_note" style="left:100px;top:100px"><!---don't delete the style tag, for drag purposes-->
  2. <div align="right">
  3. <b>
  4. <a href="javascript:closeit()"><img src="images/close.gif"></a>
  5. </b>
  6. </div>
  7. <!---your content-->
  8. <b style="font-size:18px; font-family:cursive;">Reminder:</b>
  9. <br />
  10. <p>
  11. <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  12. Looking for free source code?
  13. </a>
  14. <br />
  15. Kindly visit this site, <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  16. <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Sourcecodester">Sourcecodester.com</b>
  17. </a>
  18. </p>
  19.  
  20. <p>
  21.  
  22. <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  23. Do you have source code, articles, tutorials, web links, and books to share?
  24. </a>
  25. <br />
  26. What are you waiting for? <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  27. <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Submit now!">Submit now!</b>
  28. </a>
  29. </p>
  30. <!---end your content-->
  31. </div>
This two script copy and paste below your markup in your page.
  1. <script type="text/javascript" language="JavaScript">
  2. //once per browser session to post?
  3. //(0=no, 1=yes)
  4. var once_per_browser=0
  5. var ns4=document.layers
  6. var ie4=document.all
  7. var ns6=document.getElementById&&!document.all
  8. if (ns4)
  9. crossobj=document.layers.post_the_note
  10. else if (ie4||ns6)
  11. crossobj=ns6? document.getElementById("post_the_note") : document.all.post_the_note
  12. //for closing
  13. function closeit(){
  14. if (ie4||ns6)
  15. crossobj.style.visibility="hidden"
  16. else if (ns4)
  17. crossobj.visibility="hide"
  18. }
  19. //the cookie name
  20. function get_cookie(Name) {
  21. var search = Name + "="
  22. var returnvalue = "";
  23. if (document.cookie.length > 0) {
  24. offset = document.cookie.indexOf(search)
  25. if (offset != -1) { // if cookie exists
  26. offset += search.length
  27. // set index of beginning of value
  28. end = document.cookie.indexOf(";", offset);
  29. // set index of end of cookie value
  30. if (end == -1)
  31. end = document.cookie.length;
  32. returnvalue=unescape(document.cookie.substring(offset, end))
  33. }
  34. }
  35. return returnvalue;
  36. }
  37. function showornot(){
  38. if (get_cookie('postdisplay')==''){
  39. showit()
  40. document.cookie="postdisplay=yes"
  41. }
  42. }
  43. function showit(){
  44. if (ie4||ns6)
  45. crossobj.style.visibility="visible"
  46. else if (ns4)
  47. crossobj.visibility="show"
  48. }
  49. if (once_per_browser)
  50. showornot()
  51. else
  52. showit()
  53. </script>
  54.  
  55. <script type="text/javascript" language="JavaScript">
  56. // for the drag function
  57. function drag_drop(e){
  58. if (ie4&&dragapproved){
  59. crossobj.style.left=tempx+event.clientX-offsetx+'px'
  60. crossobj.style.top=tempy+event.clientY-offsety+'px'
  61. return false
  62. }
  63. else if (ns6&&dragapproved){
  64. crossobj.style.left=tempx+e.clientX-offsetx+'px'
  65. crossobj.style.top=tempy+e.clientY-offsety+'px'
  66. return false
  67. }
  68. }
  69. function initializedrag(e){
  70. if (ie4&&event.srcElement.id=="post_the_note"||ns6&&e.target.id=="post_the_note"){
  71. offsetx=ie4? event.clientX : e.clientX
  72. offsety=ie4? event.clientY : e.clientY
  73. tempx=parseInt(crossobj.style.left)
  74. tempy=parseInt(crossobj.style.top)
  75. dragapproved=true
  76. document.onmousemove=drag_drop
  77. }
  78. }
  79. document.onmousedown=initializedrag
  80. document.onmouseup=new Function("dragapproved=false")
  81. </script>

Image Sample Output

Result

The Complete Code

  1. <!DOCTYPE html>
  2. <title>Simple Note</title>
  3.  
  4. <style type="text/css">
  5. #post_the_note {
  6. position:absolute;
  7. width:523px;
  8. padding:5px;
  9. background-color:azure;
  10. border:2px solid blue;
  11. visibility:hidden;
  12. z-index:100;
  13. font-size:15px;
  14. font-family:cursive;
  15. }
  16.  
  17. </head>
  18.  
  19.  
  20. <div id="post_the_note" style="left:100px;top:100px"><!---don't delete the style tag, for drag purposes-->
  21. <div align="right">
  22. <b>
  23. <a href="javascript:closeit()"><img src="images/close.gif"></a>
  24. </b>
  25. </div>
  26. <!---your content-->
  27. <b style="font-size:18px; font-family:cursive;">Reminder:</b>
  28. <br />
  29. <p>
  30. <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  31. Looking for free source code?
  32. </a>
  33. <br />
  34. Kindly visit this site, <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  35. <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Sourcecodester">Sourcecodester.com</b>
  36. </a>
  37. </p>
  38.  
  39. <p>
  40.  
  41. <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  42. Do you have source code, articles, tutorials, web links, and books to share?
  43. </a>
  44. <br />
  45. What are you waiting for? <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  46. <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Submit now!">Submit now!</b>
  47. </a>
  48. </p>
  49. <!---end your content-->
  50. </div>
  51.  
  52. <script type="text/javascript" language="JavaScript">
  53. //once per browser session to post?
  54. //(0=no, 1=yes)
  55. var once_per_browser=0
  56. var ns4=document.layers
  57. var ie4=document.all
  58. var ns6=document.getElementById&&!document.all
  59. if (ns4)
  60. crossobj=document.layers.post_the_note
  61. else if (ie4||ns6)
  62. crossobj=ns6? document.getElementById("post_the_note") : document.all.post_the_note
  63. //for closing
  64. function closeit(){
  65. if (ie4||ns6)
  66. crossobj.style.visibility="hidden"
  67. else if (ns4)
  68. crossobj.visibility="hide"
  69. }
  70. //the cookie name
  71. function get_cookie(Name) {
  72. var search = Name + "="
  73. var returnvalue = "";
  74. if (document.cookie.length > 0) {
  75. offset = document.cookie.indexOf(search)
  76. if (offset != -1) { // if cookie exists
  77. offset += search.length
  78. // set index of beginning of value
  79. end = document.cookie.indexOf(";", offset);
  80. // set index of end of cookie value
  81. if (end == -1)
  82. end = document.cookie.length;
  83. returnvalue=unescape(document.cookie.substring(offset, end))
  84. }
  85. }
  86. return returnvalue;
  87. }
  88. function showornot(){
  89. if (get_cookie('postdisplay')==''){
  90. showit()
  91. document.cookie="postdisplay=yes"
  92. }
  93. }
  94. function showit(){
  95. if (ie4||ns6)
  96. crossobj.style.visibility="visible"
  97. else if (ns4)
  98. crossobj.visibility="show"
  99. }
  100. if (once_per_browser)
  101. showornot()
  102. else
  103. showit()
  104.  
  105. <script type="text/javascript" language="JavaScript">
  106. // for the drag function
  107. function drag_drop(e){
  108. if (ie4&&dragapproved){
  109. crossobj.style.left=tempx+event.clientX-offsetx+'px'
  110. crossobj.style.top=tempy+event.clientY-offsety+'px'
  111. return false
  112. }
  113. else if (ns6&&dragapproved){
  114. crossobj.style.left=tempx+e.clientX-offsetx+'px'
  115. crossobj.style.top=tempy+e.clientY-offsety+'px'
  116. return false
  117. }
  118. }
  119. function initializedrag(e){
  120. if (ie4&&event.srcElement.id=="post_the_note"||ns6&&e.target.id=="post_the_note"){
  121. offsetx=ie4? event.clientX : e.clientX
  122. offsety=ie4? event.clientY : e.clientY
  123. tempx=parseInt(crossobj.style.left)
  124. tempy=parseInt(crossobj.style.top)
  125. dragapproved=true
  126. document.onmousemove=drag_drop
  127. }
  128. }
  129. document.onmousedown=initializedrag
  130. document.onmouseup=new Function("dragapproved=false")
  131. </script>
  132.  
  133. </body>
  134. </html>
Just download the source code and use it to your project. Hope this work will help you. Try it yourself and enjoy coding. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment